WPF中的模板是一個特別重要的概念,對於做UI開發的同學來說熟悉ControlTemplate(控件模板) 和DataTemplate(數據模板)是必須掌握的技能,否則就只能做個拖控件的菜鳥。
下面就著重介紹下這兩類模板的概念和使用。
1.ControlTemplate 就是我們常說的控件模板,主要用途是更改控件的外觀,比如你要修改一個Button的形狀是圓形的,改變背景顏色,定制動畫效果等等。
下面舉例說明它的應用,一個簡單的例子就是我們想把TabControl的tab頁放在下面,那麼就可以這樣修改TabControl的style
[csharp]
<Style TargetType="{x:Type TabControl}" x:Key="ButtomTab">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TabControl}">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<TabPanel Grid.Row="1" Panel.ZIndex="1" Margin="0" IsItemsHost="True" Background="Transparent" />
<Border Grid.Row="0" Background="White" BorderThickness="1 0 1 0" CornerRadius="0" >
<ContentPresenter ContentSource="SelectedContent" />
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
從代碼中我們可以看到ControlTemplate 裡面是一個Grid然後你可以布局它的TabPanel的位置,我們把TabPanel 的屬性設置為Grid.Row="1" 這樣就使得TabPanel 放在了內容
ContentPresenter 的下面 這樣我們就可以得到一個tab頁在下面的tabcontrol控件。看吧,夠簡單easy吧。
具體怎麼設置style,每個控件的controltemplate是什麼樣的 可以看看這篇文章有了它wpf的style可以任你發揮了
當然在controltemplate裡面還有個非常重要的概念就是trigger,在以後的博客裡我會具體介紹tirgger的使用。
2.DataTemplate就是我們所說的數據模板,主要用於數據的呈現,比如你列表控件裡面放哪些數據,怎麼排版這些數據,是橫著排還是豎著排。大部分在itemscontrol和treeview類得控件綁定數據所用,它不影響外觀,只為呈現數據內容。
DataTemplate的使用比較簡單 示例如下
[csharp]
<ItemsControl x:Name="ic_PowerPort" AlternationCount="2">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Border Margin="1" x:Name="back" Height="50">
<ToggleButton HorizontalAlignment="Stretch" MouseDoubleClick="ToggleButton_Click">
<DockPanel >
<TextBlock Text="{Binding Name}" ToolTip="{Binding Name}" Margin="10 0 0 0" VerticalAlignment="Center" TextTrimming="WordEllipsis"/>
<Image x:Name="_img" Width="18" Height="18" Margin="10 0" MouseLeftButtonDown="DelPowerPort_Click" HorizontalAlignment="Right" Source="/Vdc3D.Coms.DModelEditor;component/Images/del.png"/>
</DockPanel>
</ToggleButton>
</Border>
</ItemsControl.ItemTemplate>
</ItemsControl>
從上面的代碼我們可以看出給定一個ItemsControl 的控件用於顯示一個列表,裡面綁定一個對象的Name屬性,同是還有個Image 用於刪除,由此可以知道DataTemplate的主要作用是在綁定數據的時候做數據呈現的。
在此特別說明下TreeView 的數據綁定需要一個HierarchicalDataTemplate 它是一個級聯的綁定數據模板
[csharp]
<TreeView Name="_tree" Margin="0" BorderThickness="0" VerticalAlignment="Stretch" Background="Transparent" ItemsSource="{Binding Children}" >
<TreeView.ItemTemplate>
<HierarchicalDataTemplate ItemsSource="{Binding Children}">
<Border CornerRadius="0" Margin="1" x:Name="back" MinWidth="70"
Background="Transparent" DataContext="{Binding}" PreviewMouseMove="TreeItem_PreviewMouseMove">
<StackPanel Orientation="Horizontal" Margin="2">
<Image x:Name="BGimage" Source="/Vdc3D.Coms.DModelEditor;component/Images/item.png" Height="15" Width="15" />
<TextBlock Text="{Binding ShowText}" Margin="2 0"/>
</StackPanel>
</Border>
</HierarchicalDataTemplate>
</TreeView.ItemTemplate>
</TreeView>
這樣我們就可以給一個treeview綁定數據了UI會級聯的綁定數據對象的Children屬性
至此wpf中的兩大類模板已經介紹完畢,如果有不懂的地方,或者說的不正確的地方,可以留言交流。