带有网格 UWP 的画布 RuleLines答案

【问题标题】：Canvas RuleLines With grid UWP带有网格 UWP 的画布 RuleLines
【发布时间】：2016-11-11 02:21:05
【问题描述】：

我正在一个包含画布的程序中工作，此画布包括一些形状和 RuleLines ，我在画布上添加了一个网格，它看起来像这样

问题是当我操纵或缩放此画布时程序不流畅，

这是 C# 中的网格代码：

   public void GridPartitions (Grid grid)
        {
            for (int ii = 0; ii < 50; ii++)
            {
                MyGrid.RowDefinitions.Add(new RowDefinition() { Height = new GridLength(20) });
                MyGrid.ColumnDefinitions.Add(new ColumnDefinition() { Width = new GridLength(20) });
            }
            for (int row = 0; row < 50; row++)
            {
                for(int coulmn = 0; coulmn < 50; coulmn++)
                {
                    var PartitionRectangle = new Rectangle();
                    PartitionRectangle.Stroke = new SolidColorBrush() { Color = Color.FromArgb(255, 0, 0, 0) };
                    PartitionRectangle.StrokeThickness = 0.2;
                    grid.Children.Add(PartitionRectangle);
                    Grid.SetRow(PartitionRectangle, row);
                    Grid.SetColumn(PartitionRectangle, coulmn);
                }
            }
        }

但是在 Microsoft OneNote UWP 中它有这个选项，无论 RuleLines 的数量是多少，它都运行得非常流畅，看起来像这样：

有什么想法可以改进我的代码吗？

谢谢。

【问题讨论】：

尝试将线条直接放在画布中而不是网格中。具有 50x50 单元格的 Grid 在布置其子级时可能不会那么高效。
我试过了，有一个明显的差异，但仍然不平滑和流畅，只要画布大小在变化并且我希望网格填充这个画布，我使用 ObservableCollection ，并且我已经将它与 Canvas 内的 ItemsControl 绑定在一起，现在我正在努力在线程内运行 CanvasSizeChanged 事件处理程序。我希望它能工作
能否分享一个可以重现此问题的演示？
好的，我会在优化这段代码时分享它

标签： c# .net xaml canvas uwp

【解决方案1】：

这是我的新代码.. 更好但仍然不流畅我试图尽可能地在 OOP 中制作所有内容 XAML：

<Canvas Name="MyCanvas01" Background="Transparent"  
                                    MinWidth="2500" MinHeight="720"
                Width="2500" Height="720"
                                    HorizontalAlignment="Left" VerticalAlignment="Top"
                                    RenderTransformOrigin="0.5,0.5"
                                ManipulationDelta="MyCanvas01_ManipulationDelta" ManipulationMode="All" 
                SizeChanged="MyCanvas01_SizeChanged">
            <ItemsControl ItemsSource="{x:Bind HorizontalLines}">
            <ItemsControl.ItemsPanel>
                <ItemsPanelTemplate>
                    <Canvas />
                </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>
                <ItemsControl.ItemTemplate>
                    <DataTemplate>
                        <Line X1="{Binding From.X}" Y1="{Binding From.Y}"
                      X2="{Binding ElementName=MyCanvas01, Path=Width}" Y2="{Binding To.Y}"
                      Stroke="black" StrokeThickness="0.5"/>
                    </DataTemplate>
                </ItemsControl.ItemTemplate>
            </ItemsControl>

            <ItemsControl ItemsSource="{x:Bind VerticalLines}">
                <ItemsControl.ItemsPanel>
                    <ItemsPanelTemplate>
                        <Canvas />
                    </ItemsPanelTemplate>
                </ItemsControl.ItemsPanel>
                <ItemsControl.ItemTemplate>
                    <DataTemplate>
                        <Line X1="{Binding From.X}" Y1="{Binding From.Y}"
                      X2="{Binding To.X }" Y2="{Binding ElementName=MyCanvas01, Path=Height}"
                      Stroke="black" StrokeThickness="0.5"/>
                    </DataTemplate>
                </ItemsControl.ItemTemplate>
            </ItemsControl>

            <Canvas.RenderTransform>
                    <TransformGroup>
                        <ScaleTransform x:Name="st01"/>
                        <TranslateTransform x:Name="TT01" />
                    </TransformGroup>
                </Canvas.RenderTransform>

        </Canvas>

C#：

public  void  DrawMissingLines(ObservableCollection<LineBindingPointsClass> lines, double missingLines, Point from, Point to ,int gg)
        {
            if (missingLines > 0)
            {
                for (int ii = 0; ii < missingLines; ii++)
                {

                    lines.Add(new LineBindingPointsClass() { From = from , To = to });
                    if (gg == 1)
                    {
                        from.X += 25;
                        to.X += 25;
                    }
                    else if (gg == 2)
                    {
                        from.Y += 25;
                        to.Y += 25;
                    }

                }
            }
            else if (missingLines < 0)
            {
                for (int ii = 0; ii < -missingLines; ii++)
                {                    
                        lines.Remove(lines.Last());                    
                }
            }
        }

private void MyCanvas01_SizeChanged(object sender, SizeChangedEventArgs e)
        {
            Canvas SizedCanvas = (Canvas)sender;
            double missingVerticalLines, MissingHorizontalLines;

            missingVerticalLines = (Math.Floor(SizedCanvas.Width) -  VerticalLines.Count() * 25 ) / 25;
            MissingHorizontalLines = (Math.Floor(SizedCanvas.Height) - HorizontalLines.Count() * 25) / 25;
            DrawMissingLines(VerticalLines, missingVerticalLines, 
                new Point(VerticalLines.Count()*25  , 0),
                new Point(VerticalLines.Count() * 25 , SizedCanvas.Height ),1);

            DrawMissingLines(HorizontalLines, MissingHorizontalLines
                , new Point(0,HorizontalLines.Count() * 25 ),                
                new Point( SizedCanvas.Width, HorizontalLines.Count() * 25) ,2);
        }

【讨论】：

【解决方案2】：

为了平滑缩放和支持手势以及 (Ctrl + MouseWheel)，您可以将画布放在 ScrollViewer 中。这是示例代码：

<ScrollViewer ZoomMode="Enabled" ZoomSnapPointsType="Mandatory"> 
     <Canvas Background="White" RenderTransformOrigin="0.5,0.5" 
            ManipulationDelta="MyCanvas_ManipulationDelta" ManipulationMode="All" CacheMode="BitmapCache">   

        <Rectangle Width="500" Height="500" Fill="Black"/>
    </Canvas>
</ScrollViewer>

其实它很流畅现在我正在努力添加自适应网格

【讨论】：

【解决方案3】：

这是最终代码工作完美平滑自适应，背景网格根据画布大小变化更新我添加了两个边框每个边框的背景都是 LinearGradientBrush ,,........ 说够了，这里是代码：

<ScrollViewer Name="BorderScrollViewer" ZoomMode="Enabled" ZoomSnapPointsType="Mandatory"
              HorizontalScrollMode="Disabled"
              VerticalScrollMode="Disabled"
              VerticalScrollBarVisibility="Disabled" HorizontalScrollBarVisibility="Disabled"
              ManipulationDelta="MyCanvas01_ManipulationDelta" ManipulationMode="All">



        <Canvas Name="MyCanvas01" Background="White"  
                                        MinWidth="1200" MinHeight="720"
                    Width="1200" Height="720"
                                        HorizontalAlignment="Left" VerticalAlignment="Top"
                                        RenderTransformOrigin="0.5,0.5"
                                    ManipulationDelta="MyCanvas01_ManipulationDelta" ManipulationMode="All" 
                    SizeChanged="MyCanvas01_SizeChanged"
                     >

            <Border VerticalAlignment="Stretch"
                    Width="{Binding ElementName=MyCanvas01,Path=Width}" 
                    Height="{Binding ElementName=MyCanvas01,Path=Height}">
                <Border.Background>
                    <LinearGradientBrush EndPoint="25,0" SpreadMethod="Repeat" MappingMode="Absolute" StartPoint="-25,0">
                        <LinearGradientBrush.RelativeTransform>
                            <CompositeTransform CenterY="0.5" CenterX="0.5" />
                        </LinearGradientBrush.RelativeTransform>
                        <GradientStop Color="Transparent" Offset="0.53"/>
                        <GradientStop Color="Transparent" Offset="0.48"/>
                        <GradientStop Color="#FF320064" Offset="0.49"/>
                        <GradientStop Color="#FF320061" Offset="0.51"/>
                        <GradientStop Color="#FF320068" Offset="0.51"/>
                    </LinearGradientBrush>
                </Border.Background>
            </Border>
            <Border VerticalAlignment="Stretch" HorizontalAlignment="Stretch" 
                    Width="{Binding ElementName=MyCanvas01,Path=Width}" 
                    Height="{Binding ElementName=MyCanvas01,Path=Height}" >
                <Border.Background>
                    <LinearGradientBrush EndPoint="0,25" SpreadMethod="Repeat" MappingMode="Absolute" StartPoint="0,-25">
                        <LinearGradientBrush.RelativeTransform>
                            <CompositeTransform CenterY="0.5" CenterX="0.5"/>
                        </LinearGradientBrush.RelativeTransform>
                        <GradientStop Color="Transparent" Offset="0.53"/>
                        <GradientStop Color="Transparent" Offset="0.48"/>
                        <GradientStop Color="#FF320064" Offset="0.49"/>
                        <GradientStop Color="#FF320061" Offset="0.51"/>
                        <GradientStop Color="#FF320068" Offset="0.51"/>
                    </LinearGradientBrush>
                </Border.Background>
            </Border>

            <Canvas.RenderTransform>
                <TransformGroup>
                    <TranslateTransform x:Name="TT01" />
                </TransformGroup>
            </Canvas.RenderTransform>

        </Canvas>

</ScrollViewer>

【讨论】：