Click here to Skip to main content
65,938 articles
CodeProject is changing. Read more.
Articles
(untagged)

Show Gridlines on canvas , With Size Slider ,WPF

0.00/5 (No votes)
29 Jun 2016 1  
with the help of this article developer can add gridlines on canvas , and with slider control resize them easily

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.

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here