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 实现动态添加元素

view

 

 <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表示子元素将显示在此容器中。--><Canvas IsItemsHost="True"/></ItemsPanelTemplate></ItemsControl.ItemsPanel><ItemsControl.ItemContainerStyle><Style><!-- Canvas.Left\Canvas.Top对应ViewModel中的X\Y属性，--><Setter Property="Canvas.Left" Value="{Binding X}"/><Setter Property="Canvas.Top" Value="{Binding Y}"/></Style></ItemsControl.ItemContainerStyle></ItemsControl>

 ViewModel

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

只需少量更改即可使用<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>