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;
}
           

轉載請注明出處，歡迎交流。