زمانی که ما با canvas به همراه Xaml کار می کنیم ، قابلیت های مانند کشیدن محتویات به درون صفحه به وسیله ی موس را در اختیار نداریم ، بنابراین این مقاله به ما کمک می کند که gridline (جدول خطی) را در canvas نمایش دهیم.

پیش نیاز:

 در اینجا از xaml به همراه wpf استفاده می کنیم.

استفاده از کد:

Xaml Design

<DockPanel>
        <Grid DockPanel.Dock="Top">
            <CheckBox Grid.Row="0" Name="ShowGridlines" Content="نمایش جدول خطی" 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>

این xaml یک layout مانند زیر برای شما ایجاد می کند.

در code behind ما تعدادی رویداد برای  مدیریت عملکرد اسلایدر ایجاد کرده ایم.

ShowGridlines_OnChecked : enable slider and draw grdlines

ShowGridlines_OnUnchecked : disable slider and remove gridlines

SliderValue_OnValueChanged : when slider enable then change it's size

و کد وابسته به رویدادها به شکل زیر است:

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);
            }
        }

در این رویداد ها ما از 2 تابع DrawGraph و RemoveGraph به همراه بدنه های این دو تابع استفاده کرده ایم.

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;
               }
           }
       }