Show Gridlines on canvas , With Size Slider ,WPF

• Download GridLinesWpfApplication.zip - 14 KB

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);
           //Draw the grid
           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;

           //Draw the horizontal lines
           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;
           //Draw the vertical lines
           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.