登录/ 注册
 找回密码
 立即注册
关闭

CSDN热搜

程序园 精品问答 技术交流 资源下载
返回列表 发新帖
首页 › 业界区 › 安全 ›WPF 模板Template

WPF 模板Template

丁若云 昨天 16:00
一、定义：
Template：在WPF中，Template通常指的是控件的模板，用于定义控件的外观和结构。每个控件都有一个默认的模板，但我们可以通过自定义模板来完全改变控件的外观，而不改变其行为。Template通常通过设置控件的Template属性来指定。

  • ControlTemplate：控件模板，用于定义控件的视觉结构和外观。
  • DataTemplate：数据模板，用于定义数据对象的视觉表现。
  • ItemsPanelTemplate：项面板模板，用于定义ItemsControl的布局面板。
二、使用
   
1.png


  • 数据模板：数据内容的表现形式（决定数据外观）ataTemplate 通常用于内容控件（如ContentControl）或列表控件（如ListBox、ComboBox）中，以指定如何显示数据对象。
  1. <Window.Resources>
  2.     <DataTemplate x:Key = "carInfoTemplate" DataType="{x:Type local:Person}">
  3.         <StackPanel Orientation="Horizontal">
  4.             <TextBlock Text="{Binding Name}" FontWeight="Bold"/>
  5.             <TextBlock Text="{Binding Age}" Margin="10,0,0,0"/>
  6.         </StackPanel>
  7.     </DataTemplate>
  8. </Window.Resources>
  9. <UserControl ContentTemplate="{StaticResource carInfoTemplate}"/>   
复制代码

  • 控件模板：算法内容的表现形式（决定控件外观）:

    • ControlTemplate 通过定义一组元素（如Border、Grid、ContentPresenter等）来构建控件的视觉树。ControlTemplate不改变控件的逻辑行为，只改变其外观。
    • ItemsPanelTemplate ：用于定义ItemsControl（如ListBox、ItemsControl）的项布局面板。默认情况下，ItemsControl使用StackPanel作为项布局面板，但你可以通过ItemsPanelTemplate将其改为其他面板，如WrapPanel、UniformGrid等。

  1. <ControlTemplate x:Key="RoundButtonTemplate" TargetType="Button">
  2.     <Grid>
  3.         <Ellipse Fill="{TemplateBinding Background}" Stroke="{TemplateBinding BorderBrush}" StrokeThickness="{TemplateBinding BorderThickness}"/>
  4.         <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
  5.     </Grid>
  6. </ControlTemplate>
复制代码
  1. <ControlTemplate x:Key="RoundButtonTemplate" TargetType="Button">
  2.     <Grid>
  3.         <Ellipse Fill="{TemplateBinding Background}" Stroke="{TemplateBinding BorderBrush}" StrokeThickness="{TemplateBinding BorderThickness}"/>
  4.         <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
  5.     </Grid>
  6. </ControlTemplate>            
复制代码
三、拓展

  • ContentPresenter（内容呈现器）: 是一个用于显示内容的控件。它通常在ControlTemplate中使用，作为占位符，表示控件的内容应该显示的位置。ContentPresenter会自动应用相应的DataTemplate来显示内容。
  1. <ControlTemplate TargetType="Button">
  2.     <Border Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}">
  3.         <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
  4.     </Border>
  5. </ControlTemplate>
复制代码

  • DataTemplate中的DataContext：
　　　常见问题：在DataTemplate中绑定的命令，全部来自于ViewModel。但是这些命令却始终无法生效，调试发现这些命令根本没有绑定上。
　    解决方案：因为DataTemplate中无法访问到DataTemplate控件层以外的资源，包括ViewModel中的命令。为了访问到ViewModel中的命令，我们需要改变命令源，通过指定父级来访问全局的DataContext。
  1. <Window.Resources>
  2.     <DataTemplate x:Key = "carInfoTemplate" DataType="{x:Type local:Person}">
  3.         <StackPanel Orientation="Horizontal">
  4.             <TextBlock Text="{Binding Name}" FontWeight="Bold"/>
  5.             <TextBlock Text="{Binding Age}" Margin="10,0,0,0"/>
  6.         </StackPanel>
  7.     </DataTemplate>
  8. </Window.Resources>
  9. <UserControl ContentTemplate="{StaticResource carInfoTemplate}"/><ControlTemplate x:Key="RoundButtonTemplate" TargetType="Button">
  10.     <Grid>
  11.         <Ellipse Fill="{TemplateBinding Background}" Stroke="{TemplateBinding BorderBrush}" StrokeThickness="{TemplateBinding BorderThickness}"/>
  12.         <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
  13.     </Grid>
  14. </ControlTemplate><ControlTemplate x:Key="RoundButtonTemplate" TargetType="Button">
  15.     <Grid>
  16.         <Ellipse Fill="{TemplateBinding Background}" Stroke="{TemplateBinding BorderBrush}" StrokeThickness="{TemplateBinding BorderThickness}"/>
  17.         <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
  18.     </Grid>
  19. </ControlTemplate>   
复制代码
四、使用场景

  • 当你想要改变一个控件的外观（如按钮、文本框）时，使用ControlTemplate。
  • 当你想要自定义数据对象在界面上的显示方式时，使用DataTemplate。
  • 当你想要改变一个ItemsControl的项布局方式时，使用ItemsPanelTemplate。
  • 当你在ControlTemplate中需要显示控件的内容时，使用ContentPresenter。
  1. <Window.Resources>
  2.     <DataTemplate x:Key = "carInfoTemplate" DataType="{x:Type local:Person}">
  3.         <StackPanel Orientation="Horizontal">
  4.             <TextBlock Text="{Binding Name}" FontWeight="Bold"/>
  5.             <TextBlock Text="{Binding Age}" Margin="10,0,0,0"/>
  6.         </StackPanel>
  7.     </DataTemplate>
  8. </Window.Resources>
  9. <UserControl ContentTemplate="{StaticResource carInfoTemplate}"/>   <Window.Resources>
  10.     <DataTemplate x:Key = "carInfoTemplate" DataType="{x:Type local:Person}">
  11.         <StackPanel Orientation="Horizontal">
  12.             <TextBlock Text="{Binding Name}" FontWeight="Bold"/>
  13.             <TextBlock Text="{Binding Age}" Margin="10,0,0,0"/>
  14.         </StackPanel>
  15.     </DataTemplate>
  16. </Window.Resources>
  17. <UserControl ContentTemplate="{StaticResource carInfoTemplate}"/><ControlTemplate x:Key="RoundButtonTemplate" TargetType="Button">
  18.     <Grid>
  19.         <Ellipse Fill="{TemplateBinding Background}" Stroke="{TemplateBinding BorderBrush}" StrokeThickness="{TemplateBinding BorderThickness}"/>
  20.         <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
  21.     </Grid>
  22. </ControlTemplate><ControlTemplate x:Key="RoundButtonTemplate" TargetType="Button">
  23.     <Grid>
  24.         <Ellipse Fill="{TemplateBinding Background}" Stroke="{TemplateBinding BorderBrush}" StrokeThickness="{TemplateBinding BorderThickness}"/>
  25.         <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
  26.     </Grid>
  27. </ControlTemplate>
复制代码
来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！
WPF模板Template

使用道具 举报

相关推荐
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册
发帖
丁若云
昨天 16:00

0

粉丝关注

23

主题发布

板块介绍填写区域，请于后台编辑
微信扫一扫