Canvas 控件

在C#中中设置控件坐标

Label label = new Label
{
    Content = "测试",
    FontSize = 14,
    Foreground = new SolidColorBrush((Color)ColorConverter.ConvertFromString("#FF0000"))
};
 
Canvas.SetTop(label, 10.9);//在c#后台代码中动态设置
Canvas.SetLeft(label, 20.39);
 
printArea.Children.Add(label);

这种方式适合动态增加控件的页面。

动态创建控件

1.容器控件.RegisterName("Name",要注册的控件)   //注册控件

2.容器控件.FindName("Name") as  控件类型            //找到控件并转换成相应类型

注意：仅通过 控件.Name来设置是不能通过FindName来找到控件的，必须注册
动态删除控件
1.容器控件.Children.Remove(控件)                           //移除控件

2.容器控件.UnregisterName("Name")                       //取消注册

其它设置

1.控件.SetValue(Grid.RowProperty, 0);                    //设置控件在Grid面板中的行数
   控件.SetValue(Grid.ColumnProperty, 1);               //设置控件在Grid面板中的列数

2.Canvas.SetLeft("控件名", 50);                                //设置控件在Canvas面板中的横坐标
   Canvas.SetTop("控件名", 50);                                //设置控件在Canvas面板中的纵坐标

在mvvm 模式下，Canvas 实现动态添加元素

Subjectview

 <ItemsControl Margin="0,0,0,20" ItemsSource="{Binding Balloons}" x:Name="canvasBackground" Grid.Column="1" Grid.Row="1" Grid.ColumnSpan="2">
     <ItemsControl.ItemsPanel>
         <ItemsPanelTemplate>
             <!-- IsItemsHost=true表示子元素将显示在此容器中。 在SubjectViewModel中增删改Balloons集合对象就可以设置 Canvas中元素的。-->
             <Canvas IsItemsHost="True"/>
         </ItemsPanelTemplate>
     </ItemsControl.ItemsPanel>
     <ItemsControl.ItemContainerStyle>
         <Style>
             <!-- Canvas.Left\Canvas.Top对应 ItemViewModel中的X\Y属性，-->
             <Setter Property="Canvas.Left" Value="{Binding X}"/>
             <Setter Property="Canvas.Top" Value="{Binding Y}"/>
         </Style>
     </ItemsControl.ItemContainerStyle>


 </ItemsControl>

 ItemViewModel

 internal partial class BalloonViewModel : ObservableObject 
  {
///其他代码
    /// <summary>
 /// 坐标点
 /// </summary>
 /// 
 [ObservableProperty]
 public double? x;
 [ObservableProperty]
 public double? y;
}

SubjectViewModel

  internal partial class SubjectViewModel: ObservableObject
  {
///其他代码
    /// <summary>
 /// 元素集合
 /// </summary>
 /// 
 [ObservableProperty]
 ObservableCollection<BalloonViewModel>? balloons=new();
}

只需少量更改即可使用<Canvas IsItemsHost=“True” />，    IsItemsHost=true表示子元素将显示在此容器中。

Canvas 复杂矢量图形布局

如果希望Path的各个部分使用不同的颜色，就需要创建彼此独立的Path对象。 此时就需要使用View+Canvas+path的组合方式 来设计复杂的矢量图形。

注意必须给canvas设置一个初始的 Width、 Height的，否则无法显示。

     <Viewbox  Stretch="Uniform"  >
         <Canvas Width="80" Height="220" >
             <!--球体-->
             <Path  Canvas.Left="0" Canvas.Top="0"  Fill="{Binding BalloonColor}"    Data="M57.078,140.071h6.175L69,153l-18.054-.946ZM61,0c33.689,0,61,31.34,61,70s-27.311,70-61,70S0,108.66,0,70,27.311,0,61,0Z"  />
             <!--反光-->
             <Path   Fill="{Binding  ReflectLight}" Data="M33.978,35.095c6.638,1.091,10.462,11.335,8.542,22.881S33.66,78,27.022,76.905,16.56,65.57,18.48,54.025,27.34,34,33.978,35.095Z"   />
             <!--线条-->
             <Path   StrokeThickness="4" Stroke="{Binding  Line}" Data="M62,152c-4.764,15.394-5.243,29.971,0,43,2.406,5.98,7.875,14.606,14,23,4.172,5.717,6.546,9.83,8,16,3.84,16.294-3.737,52.7-11,67" />
         </Canvas>
     </Viewbox>