Requirement:
Our requirement is to draw an empty Grid(table with rows and columns) on top of a tables present in the image and for a single image there may be multiple grids. All the grids should be adjustable and we can add row separator and column separator on mouse button click in the grid. The grids, thumbs and rowcolumn definitions are created from code behind
Problem:
If column or row definition is created the Grid’s Thumb position changes and it moves to first row first column instead of remaining static in the outer grid. The top, left, right and bottom thumb’s position is changed. Can you please help us on this issue.
XAML:
<Grid Name="MainGrid" Background="Gray" MouseDown="MainGrid_MouseDown" MouseMove="MainGrid_MouseMove" MouseUp="MainGrid_MouseUp">
<Image x:Name="imgDisplay" Source="{Binding ImagePath, RelativeSource={RelativeSource AncestorType=UserControl}}" Stretch="None"/>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Right" VerticalAlignment="Top" Margin="10" Cursor="Hand">
<StackPanel.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="Black"/>
<GradientStop Color="#FF086B69" Offset="1"/>
</LinearGradientBrush>
</StackPanel.Background>
<Button Name="btnAddGrid" Content="Grid" Width="30" Margin="5" Click="AddAdjustableBox_Click"/>
<Button Name="btnRowSeperator" Content="Row" Width="30" Margin="5" Click="btnRowSeperator_Click"/>
<Button Name="btnColumnSeperator" Content="Col" Width="30" Margin="5" Click="btnColumnSeperator_Click"/>
C Sharp Code:
private void Grid_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
Point clickPosition = e.GetPosition(selectedGrid);
if (_rowSeperator && !isDragging)
{
if (!gridDataMap[selectedGrid].RowSeparators.Contains(clickPosition.Y))
{
gridDataMap[selectedGrid].RowSeparators.Add(clickPosition.Y);
gridDataMap[selectedGrid].RowSeparators.Sort();
}
UpdateGrid();
}
else if (_columnSeperator && !isDragging)
{
if (!gridDataMap[selectedGrid].ColumnSeparators.Contains(clickPosition.X))
{
gridDataMap[selectedGrid].ColumnSeparators.Add(clickPosition.X);
gridDataMap[selectedGrid].ColumnSeparators.Sort();
}
UpdateGrid();
}
}
private void UpdateGrid()
{
if (selectedGrid == null)
return;
selectedGrid.RowDefinitions.Clear();
selectedGrid.ColumnDefinitions.Clear();
double previousY = 0;
foreach (var separator in gridDataMap[selectedGrid].RowSeparators)
{
selectedGrid.RowDefinitions.Add(new RowDefinition { Height = new GridLength(separator - previousY, GridUnitType.Pixel) });
previousY = separator;
}
selectedGrid.RowDefinitions.Add(new RowDefinition { Height = new GridLength(selectedGrid.ActualHeight - previousY, GridUnitType.Pixel) });
double previousX = 0;
foreach (var separator in gridDataMap[selectedGrid].ColumnSeparators)
{
selectedGrid.ColumnDefinitions.Add(new ColumnDefinition { Width = new GridLength(separator - previousX, GridUnitType.Pixel) });
previousX = separator;
}
selectedGrid.ColumnDefinitions.Add(new ColumnDefinition { Width = new GridLength(selectedGrid.ActualWidth - previousX, GridUnitType.Pixel) });
//resizeThumb.Margin = new Thickness(100,100,0,0);
//Grid.SetZIndex(resizeThumb, 1000);
// selectedGrid.UpdateLayout();
for (int row = 0; row < selectedGrid.RowDefinitions.Count; row++)
{
for (int column = 0; column < selectedGrid.ColumnDefinitions.Count; column++)
{
AddGridCell(selectedGrid, row, column);
}
}
}
private void AddGridCell(Grid grid, int row, int column)
{
var cellBorder = new Border
{
BorderBrush = Brushes.Blue,
BorderThickness = new Thickness(0.5),
Background = Brushes.Transparent
};
Grid.SetRow(cellBorder, row);
Grid.SetColumn(cellBorder, column);
cellBorder.MouseLeftButtonDown += CellBorder_MouseLeftButtonDown;
cellBorder.MouseMove += CellBorder_MouseMove;
cellBorder.MouseLeftButtonUp += CellBorder_MouseLeftButtonUp;
grid.Children.Add(cellBorder);
}
private void btnColumnSeperator_Click(object sender, RoutedEventArgs e)
{
gridGenerator = false;
_columnSeperator = !_columnSeperator;
_rowSeperator = false;
}
private void btnRowSeperator_Click(object sender, RoutedEventArgs e)
{
gridGenerator = false;
_rowSeperator = !_rowSeperator;
_columnSeperator = false;
}
Output:
Before Adding Separator:
After Adding Separators: