Canvas 控制元件

小林野夫發表於2024-03-16
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>

相關文章