WPF模板(一)：控制元件模板、資料模板、面板模板
阿新 • • 發佈：2019-01-31
模板使用方式：首先定義模板，然後在把對應的key應用到控制元件對應的屬性中；
屬性對應：
控制元件模板，對應控制元件的Template；
資料模板，對應控制元件的ItemTemplate屬性；
面板模板，對應控制元件的ItemsPanel屬性。
控制元件模板：如果控制元件的樣式不能滿足，可自定義控制元件模板來設計樣式。
資料模板：內容控制元件通過ContentTemplate屬性支援資料模板；列表控制元件(即繼承自ItemsControl類的控制元件)，通過ItemTemplate屬性支援資料模板，該模板用於顯示由ItemSource提供集合中的每一項。
面板模板：ItemsPanelTemplate用於指定項的佈局。 ItemsControl 型別具有一個型別為ItemsPanelTemplate 的 ItemsPanel 屬性。
一、控制元件模板：如果控制元件的樣式不能滿足，可自定義控制元件模板來設計樣式。
<Window.Resources> <ControlTemplate x:Key="roundBtnTemplte"> <Grid> <Ellipse Name="roundBtn" Width="100" Height="100" Fill="AliceBlue"> </Ellipse> <ContentPresenter Content="{TemplateBinding Button.Content}" VerticalAlignment="Center"> </ContentPresenter> </Grid> <ControlTemplate.Triggers> <Trigger Property="IsMouseOver" Value="true"> <Setter TargetName="roundBtn" Property="Fill" Value="Yellow"> </Setter> </Trigger> </ControlTemplate.Triggers> </ControlTemplate> </Window.Resources> <Grid> <Grid.ColumnDefinitions> <ColumnDefinition Width="1*"></ColumnDefinition> <ColumnDefinition Width="1*"></ColumnDefinition> </Grid.ColumnDefinitions> <StackPanel Margin="10" Grid.Column="0" Orientation="Horizontal"> <Button Padding="5" Margin="5" Content="Round Button" Template="{StaticResource roundBtnTemplte}"></Button> <Button Padding="5" Margin="5">nomal button</Button> </StackPanel> </Grid>
2.資料模板：內容控制元件通過ContentTemplate屬性支援資料模板；列表控制元件(即繼承自ItemsControl類的控制元件)，通過ItemTemplate屬性支援資料模板，該模板用於顯示由ItemSource提供集合中的每一項。
<Window x:Class="WpfApplication1.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:sys="clr-namespace:System;assembly=mscorlib" Title="MainWindow" Height="350" Width="525"> <Window.Resources> <!--建立資料模板--> <HierarchicalDataTemplate x:Key="NavDataTem" ItemsSource="{Binding Children}"> <Border Name="myborder" BorderBrush="AliceBlue" BorderThickness="2" Margin="3"> <StackPanel Orientation="Horizontal" Margin="0,3"> <CheckBox IsChecked="{Binding IsChecked}" Content=""/> <Image Source="{Binding Icon}" Width="16" Height="16"></Image> <TextBlock Name="txtOne" Margin="5" FontWeight="Bold" Text="{Binding ItemName}" ></TextBlock> <TextBlock Name="txtTwo" Margin="5" Text="{Binding ItemProperty}" ></TextBlock> </StackPanel> </Border> <HierarchicalDataTemplate.Triggers> <Trigger SourceName="myborder" Property="IsMouseOver" Value="True"> <Setter TargetName="txtOne" Property="Background" Value="LightGray"></Setter> <Setter TargetName="txtTwo" Property="FontSize" Value="20"></Setter> </Trigger> </HierarchicalDataTemplate.Triggers> </HierarchicalDataTemplate> </Window.Resources> <StackPanel Margin="5"> <TreeView Name="treeTest" ScrollViewer.VerticalScrollBarVisibility="Visible" ItemTemplate="{StaticResource NavDataTem}"> </TreeView> </StackPanel> </Window>
編碼部分：
public class NavBarItem : INotifyPropertyChanged
{
public string ID { get { return Guid.NewGuid().ToString(); } }
public string ItemName { get; set; }
public string ItemProperty { get; set; }
public List<NavBarItem> Children { get; set; }
public NavBarItem()
{
Children = new List<NavBarItem>();
}
public event PropertyChangedEventHandler PropertyChanged;
public void OnPropertyChanged(PropertyChangedEventArgs e)
{
if (PropertyChanged != null)
PropertyChanged(this, e);
}
}
/// <summary>
/// Interaction logic for MainWindow.xaml
/// </summary>
public partial class MainWindow : Window
{
List<NavBarItem> _NavBarItems = new List<NavBarItem>();
List<NavBarItem> NavBarItems
{
get { return _NavBarItems; }
set { _NavBarItems = value; }
}
public MainWindow()
{
InitializeComponent();
treeTest.ItemsSource = NavBarItems;
List<NavBarItem> childrenOne = new List<NavBarItem>();
childrenOne.Add(new NavBarItem()
{
ItemName = "C++",
ItemProperty = "C++語言"
});
childrenOne.Add(new NavBarItem()
{
ItemName = "C",
ItemProperty = "C語言"
});
childrenOne.Add(new NavBarItem()
{
ItemName = "C#",
ItemProperty = "C#語言"
});
childrenOne.Add(new NavBarItem()
{
ItemName = "Java",
ItemProperty = "Java語言"
});
List<NavBarItem> childrenTwo = new List<NavBarItem>();
childrenTwo.Add(new NavBarItem()
{
ItemName = "Windows",
ItemProperty = "微軟"
});
childrenTwo.Add(new NavBarItem()
{
ItemName = "Linux",
ItemProperty = "開源"
});
childrenTwo.Add(new NavBarItem()
{
ItemName = "MacOS",
ItemProperty = "蘋果"
});
NavBarItems.Add(new NavBarItem()
{
ItemName = "程式語言",
Children = childrenOne
});
NavBarItems.Add(new NavBarItem()
{
ItemName = "作業系統",
Children = childrenTwo
});
}
}
說明：控制元件模板和資料模板的關係
控制元件只是資料和行為的載體，至於它本身長什麼樣子和資料長什麼樣子都是靠Template決定的。決定控制元件外觀的是ControlTemplate，決定資料外觀的是DataTemplate，它們正是Control類的Template和ContentTemplate兩個屬性的值。
一般來說，ControlTemplate內都有一個ContentPresenter，這個ContentPresenter的ContentTemplate就是DataTemplate型別。所以資料模板和控制元件模板的關係如下圖所示：
Control型別
- Template屬性 (ControlTemplate型別)
- ContentPresenter
- ContentTemplate (DataTemplate型別)
ContentControl型別
- Template屬性 (ControlTemplate型別) 繼承自Control
- ContentTemplate (DataTemplate型別)
ItemsControl型別
- Template屬性 (ControlTemplate型別) 繼承自Control
- ItemsPanel屬性 (ItemsPanelTemplate型別) 指定佈局容器
- ItemTemplate屬性 (DateTemplate型別) 每個Item的Template
3.面板模板
增加ItemsPanelTemplate調整面板佈局
<Window.Resources>
<!--建立資料模板-->
<HierarchicalDataTemplate x:Key="NavDataTem" ItemsSource="{Binding Children}">
<Border Name="myborder" BorderBrush="AliceBlue" BorderThickness="2" Margin="3">
<StackPanel Orientation="Horizontal" Margin="0,3">
<CheckBox IsChecked="{Binding IsChecked}" Content=""/>
<Image Source="{Binding Icon}" Width="16" Height="16"></Image>
<TextBlock Name="txtOne" Margin="5" FontWeight="Bold" Text="{Binding ItemName}" ></TextBlock>
<TextBlock Name="txtTwo" Margin="5" Text="{Binding ItemProperty}" ></TextBlock>
</StackPanel>
</Border>
<HierarchicalDataTemplate.Triggers>
<Trigger SourceName="myborder" Property="IsMouseOver" Value="True">
<Setter TargetName="txtOne" Property="Background" Value="LightGray"></Setter>
<Setter TargetName="txtTwo" Property="FontSize" Value="20"></Setter>
</Trigger>
</HierarchicalDataTemplate.Triggers>
</HierarchicalDataTemplate>
<ItemsPanelTemplate x:Key="ItemsPanelTem">
<StackPanel Orientation="Horizontal"
VerticalAlignment="Center"
HorizontalAlignment="Left"/>
</ItemsPanelTemplate>
</Window.Resources>
<StackPanel Margin="5">
<TreeView Name="treeTest" ScrollViewer.VerticalScrollBarVisibility="Visible"
ItemTemplate="{StaticResource NavDataTem}" ItemsPanel="{StaticResource ItemsPanelTem}">
</TreeView>
</StackPanel>
</Window>