模板是描述控件外觀,WPF中每個控件都有一個默認的模板,你可以通過定義模板來重寫控件可視化外觀和行為,WPF中有兩種常用的模板Control Template和Data Template
Control?Template
控件模板定義了控件的可視化外觀,所有的UI控件都有自己默認的可視化外觀和行為,例如Button按鈕,當我們鼠標移上去時會改變背景色,我們自定義一個Button按鈕
<Window x:Class="Example_09.MainWindow"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"xmlns:d="http://schemas.microsoft.com/expression/blend/2008"xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"xmlns:local="clr-namespace:Example_09"mc:Ignorable="d" Title="MainWindow" Height="450" Width="800"><Window.Resources><ControlTemplate x:Key="ButtonTemp" TargetType="Button"><Grid><Ellipse x:Name="rectangle"><Ellipse.Fill><SolidColorBrush Color="Red"></SolidColorBrush></Ellipse.Fill></Ellipse><ContentPresenter Content="{TemplateBinding Content}" VerticalAlignment="Center"HorizontalAlignment="Center"></ContentPresenter></Grid><ControlTemplate.Triggers><Trigger Property="IsMouseOver" Value="True"><Setter TargetName="rectangle" Property="Fill"><Setter.Value><SolidColorBrush Color="Green"></SolidColorBrush></Setter.Value></Setter></Trigger></ControlTemplate.Triggers></ControlTemplate></Window.Resources><StackPanel><Button Width="200" Height="150" Content="自定義控件模板" Template="{StaticResource ButtonTemp}"></Button><Button Width="200" Height="150" Margin="20" Content="默認控件外觀"></Button></StackPanel>
</Window>
Data?Template
數據模板定義了你的數據在控件中如何呈現以及格式化。通常用在列表控件中,例如ComboBox, ListBox, 等,默認ListBox綁定出來數據的結果
我們通過重寫數據模板顯示內容更豐富一些:
<Window x:Class="Example_09.ListBoxControl"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"xmlns:d="http://schemas.microsoft.com/expression/blend/2008"xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"xmlns:local="clr-namespace:Example_09"mc:Ignorable="d"Title="ListBoxControl" Height="450" Width="800"><Window.Resources><DataTemplate x:Key="personTemplate"><Border Name="border" BorderBrush="Aqua" BorderThickness="1" Padding="5" Margin="5"><Grid><Grid.RowDefinitions><RowDefinition/><RowDefinition/><RowDefinition/><RowDefinition/></Grid.RowDefinitions><Grid.ColumnDefinitions><ColumnDefinition Width="200"/><ColumnDefinition Width="100"/><ColumnDefinition Width="100"/></Grid.ColumnDefinitions><TextBlock Grid.Row="0" Grid.Column="1" HorizontalAlignment="Center" Text="姓名:"/><TextBlock Grid.Row="0" Grid.Column="2" HorizontalAlignment="Center" Text="{Binding Path=Name}" /><TextBlock Grid.Row="1" Grid.Column="1" HorizontalAlignment="Center" Text="性別:"/><TextBlock Grid.Row="1" Grid.Column="2" HorizontalAlignment="Center" Text="{Binding Path=Sex}"/><TextBlock Grid.Row="2" Grid.Column="1" HorizontalAlignment="Center" Text="年齡:"/><TextBlock Grid.Row="2" Grid.Column="2" HorizontalAlignment="Center" Text="{Binding Path=Age}"/><TextBlock Grid.Row="3" Grid.Column="1" HorizontalAlignment="Center" Text="戶籍:"/><TextBlock Grid.Row="4" Grid.Column="2" HorizontalAlignment="Center" Text="{Binding Path=Residence}"/><Image Grid.RowSpan="4" Grid.Column="0" HorizontalAlignment="Center" Source="{Binding Path=Image}"></Image></Grid></Border></DataTemplate></Window.Resources><Grid><ListBox x:Name="myListBox" ItemTemplate="{StaticResource personTemplate}"></ListBox></Grid>
</Window>
using System;
using System.Collections.ObjectModel;
using System.Windows;
using System.Windows.Media.Imaging;
namespace?Example_09
{public partial class ListBoxControl : Window{ObservableCollection<Person> Persons = new ObservableCollection<Person>();public ListBoxControl(){InitializeComponent();Person person = new Person();myListBox.ItemsSource = person.GetPersonList();}}public class Person{public string Name { get; set; }public string Sex { get; set; }public int Age { get; set; }public string Residence{get; set;} = "Hong Kong";public BitmapImage Image { get; set; }public override string ToString(){return Name.ToString();}public ObservableCollection<Person> GetPersonList(){ObservableCollection<Person> Persons = new ObservableCollection<Person>();Person person = new Person();person.Name = "劉德華";person.Sex = "男";person.Age = 60;person.Image = new BitmapImage(new Uri(System.IO.Directory.GetCurrentDirectory() + "/Image/劉德華.jpg"));Persons.Add(person);person = new Person();person.Name = "黎明";person.Sex = "男";person.Age = 55;person.Image = new BitmapImage(new Uri(System.IO.Directory.GetCurrentDirectory() + "/Image/黎明.jpg"));Persons.Add(person);person = new Person();person.Name = "郭富城";person.Sex = "男";person.Age = 56;person.Image = new BitmapImage(new Uri(System.IO.Directory.GetCurrentDirectory() + "/Image/郭富城.jpg"));Persons.Add(person);person = new Person();person.Name = "張學友";person.Sex = "男";person.Age = 61;person.Image = new BitmapImage(new Uri(System.IO.Directory.GetCurrentDirectory() + "/Image/張學友.jpg"));Persons.Add(person);return Persons;}}
}
上圖是我們重寫控件的數據模板之后運行效果,當然你也可以再加一些樣式和觸發器來美化效果,當鼠標移動上去以及離開顯示什么效果,選中一行的時候顯示什么效果,都可以實現,這也是WPF魅力所在以及強大之處!