WPF-08 控件模板

模板是描述控件外观,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绑定出来数据的结果

WPF-08 控件模板

我们通过重写数据模板显示内容更丰富一些:
<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-08 控件模板

上图是我们重写控件的数据模板之后运行效果,当然你也可以再加一些样式和触发器来美化效果,当鼠标移动上去以及离开显示什么效果,选中一行的时候显示什么效果,都可以实现,这也是WPF魅力所在以及强大之处!