关于mvvm:WPF-DataTemplate与ControlTemplate结合使用

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