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.