Introduction
When we work on canvas with xaml , then there is no such functionality available that we can align content by draging on mouse , so this article help us to show grid line on canvas.
Background
This is using xaml with wpf .
Using the code
Xaml Design
<DockPanel>
<Grid DockPanel.Dock="Top">
<CheckBox Grid.Row="0" Name="ShowGridlines" Content="Show Grid Lines" Checked="ShowGridlines_OnChecked" Unchecked="ShowGridlines_OnUnchecked" ></CheckBox>
<Slider Grid.Row="0" ValueChanged="SliderValue_OnValueChanged" Margin="0 20 0 0" Minimum="5" Maximum="100" TickPlacement="BottomRight" TickFrequency="5" IsSnapToTickEnabled="True" Name="SliderValue" IsEnabled="False"></Slider>
</Grid>
<Canvas Name="ShapeCanvas">
</Canvas>
</DockPanel>
This xaml will create a window layout like this
in code behind we create some event to manage slider functionality
ShowGridlines_OnChecked : enable slider and draw grdlines
ShowGridlines_OnUnchecked : disable slider and remove gridlines
SliderValue_OnValueChanged : when slider enable then change it's size
and code with associate events is
private void ShowGridlines_OnChecked(object sender, RoutedEventArgs e)
{
DrawGraph((int)SliderValue.Value, (int)SliderValue.Value, ShapeCanvas);
SliderValue.IsEnabled = true;
}
private void ShowGridlines_OnUnchecked(object sender, RoutedEventArgs e)
{
RemoveGraph(ShapeCanvas);
SliderValue.IsEnabled = false;
}
private void SliderValue_OnValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)
{
if (ShowGridlines.IsChecked ?? false)
{
DrawGraph((int)SliderValue.Value, (int)SliderValue.Value, ShapeCanvas);
}
}
in these events we used 2 function DrawGraph and RemoveGraph and body of these functions is
private void DrawGraph(int yoffSet, int xoffSet, Canvas mainCanvas)
{
RemoveGraph(mainCanvas);
Image lines = new Image();
lines.SetValue(Panel.ZIndexProperty, -100);
DrawingVisual gridLinesVisual = new DrawingVisual();
DrawingContext dct = gridLinesVisual.RenderOpen();
Pen lightPen = new Pen(_color1, 0.5), darkPen = new Pen(_color2, 1);
lightPen.Freeze();
darkPen.Freeze();
int yOffset = yoffSet,
xOffset = xoffSet,
rows = (int)(SystemParameters.PrimaryScreenHeight),
columns = (int)(SystemParameters.PrimaryScreenWidth),
alternate = yOffset == 5 ? yOffset : 1,
j = 0;
Point x = new Point(0, 0.5);
Point y = new Point(SystemParameters.PrimaryScreenWidth, 0.5);
for (int i = 0; i <= rows; i++, j++)
{
dct.DrawLine(j % alternate == 0 ? lightPen : darkPen, x, y);
x.Offset(0, yOffset);
y.Offset(0, yOffset);
}
j = 0;
x = new Point(0.5, 0);
y = new Point(0.5, SystemParameters.PrimaryScreenHeight);
for (int i = 0; i <= columns; i++, j++)
{
dct.DrawLine(j % alternate == 0 ? lightPen : darkPen, x, y);
x.Offset(xOffset, 0);
y.Offset(xOffset, 0);
}
dct.Close();
RenderTargetBitmap bmp = new RenderTargetBitmap((int)SystemParameters.PrimaryScreenWidth,
(int)SystemParameters.PrimaryScreenHeight, 96, 96, PixelFormats.Pbgra32);
bmp.Render(gridLinesVisual);
bmp.Freeze();
lines.Source = bmp;
mainCanvas.Children.Add(lines);
}
private void RemoveGraph(Canvas mainCanvas)
{
foreach (UIElement obj in mainCanvas.Children)
{
if (obj is Image)
{
mainCanvas.Children.Remove(obj);
break;
}
}
}
Points of Interest
A useful control for those , who work with canvas in xaml.