Canvas 带网格 UWP 的规则线
Canvas RuleLines With grid UWP
我在一个包含 canvas 的程序中工作，
这个 canvas 包括一些形状和 RuleLines ，
我在 canvas 中添加了一个网格，它看起来像这样
问题是当我操作或缩放这个程序时程序不流畅 canvas,
这是 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 的数量是多少，它都运行得非常流畅，看起来像这样：
有什么改进我的代码的想法吗？
谢谢。
这是我的新代码..它更好但仍然不流畅
我试图尽可能地在 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);
}
为了平滑缩放和支持手势和 (Ctrl + MouseWheel)，您可以将 canvas 放在 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>
其实很流畅
现在我正在努力添加自适应网格
这是最终代码
工作完美
平滑且自适应，背景网格根据 Canvas 大小变化进行更新
我添加了两个边框
每个边框的背景都是 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>
我在一个包含 canvas 的程序中工作，
这个 canvas 包括一些形状和 RuleLines ，
我在 canvas 中添加了一个网格，它看起来像这样
问题是当我操作或缩放这个程序时程序不流畅 canvas,
这是 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 的数量是多少，它都运行得非常流畅，看起来像这样：
有什么改进我的代码的想法吗？
谢谢。
这是我的新代码..它更好但仍然不流畅 我试图尽可能地在 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);
}
为了平滑缩放和支持手势和 (Ctrl + MouseWheel)，您可以将 canvas 放在 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>
其实很流畅 现在我正在努力添加自适应网格
这是最终代码 工作完美 平滑且自适应，背景网格根据 Canvas 大小变化进行更新 我添加了两个边框 每个边框的背景都是 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>