如深入浅出WPF中的形容,DataTemplate为数据的外衣,ControlTemplate为控件的外衣。ControlTemplate管制控件的款式,DataTemplate控制数据显示的款式,DataTemplate是ControlTemplate的一部分。本文介绍DataTemplate与ControlTemplate联合应用的办法,其关键在于ContentPresenter,它是DataTemplate的树根,代表DataTemplate的实例。

场景

自定义Button,使其显示当前页与总页数,当页码变动时自动更新。

实现步骤
  1. 自定义Button.ControlTemplate;
  2. 自定义Button.ContentTemplate;
  3. 创立数据类;
  4. 创立ViewModel类;
  5. 绑定。
示例代码:
// xaml<UserControl.Resources>    <viewmodel:TextViewModel x:Key="TestViewModel"/></UserControl.Resources><Grid DataContext="{StaticResource TextViewModel}">    <Button Width="120" Height="50" Content="{Binding PageInfo}">        <Button.Template>            <ControlTemplate TargetType="Button">                <ContentPresenter/>            </ControlTemplate>        </Button.Template>        <Button.ContentTemplate>            <DataTemplate>                <TextBlock Width="{TemplateBinding Width}" TextAlignment="Center"                           FontSize="36" FontFamily="微软雅黑" Foreground="#ffffff">                    <Run Text="{Binding CurrentPage}"/>                    <Run Text="/"/>                    <Run Text="{Binding TotalPages}"/>                </TextBlock>            </DataTemplate>        </Button.ContentTemplate>    </Button></Grid>// 数据类public class PageInfo : ViewModelBase{    public PageInfo(string currentPage, string totalPages)    {        this.CurrentPage = currentPage;        this.TotalPages = totalPages;    }    public string CurrentPage    {        get { return currentPage; }        set        {            currentPage = value;            OnPropertyChanged("CurrentPage");        }    }    public string TotalPages    {        get { return totalPages; }        set        {            totalPages = value;            OnPropertyChanged("TotalPages");        }    }    private string currentPage;    private string totalPages;}// viewmodel类public class TestViewModel : ViewModelBase{    public TextViewModel()    {        PageInfo = new PageInfo("1", "1");    }    public PageInfo PageInfo    {        get { return pageInfo; }        set { pageInfo = value; }    }    // 其它逻辑    private PageInfo pageInfo;}