WPF -- DataTemplate与ControlTemplate结合使用

Posted 2021-09-28 louzi

如深入浅出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;
}