如深入浅出WPF中的形容,DataTemplate为数据的外衣,ControlTemplate为控件的外衣。ControlTemplate管制控件的款式,DataTemplate控制数据显示的款式,DataTemplate是ControlTemplate的一部分。本文介绍DataTemplate与ControlTemplate联合应用的办法,其关键在于ContentPresenter,它是DataTemplate的树根,代表DataTemplate的实例。
场景
自定义Button,使其显示当前页与总页数,当页码变动时自动更新。
实现步骤
- 自定义Button.ControlTemplate;
- 自定义Button.ContentTemplate;
- 创立数据类;
- 创立ViewModel类;
- 绑定。
示例代码:
// 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;}