tnblog
首页
视频
资源
登录
原

WPF渲染模板

902人阅读 2025/1/10 17:32 总访问：3662047 评论：0 收藏：0 手机
分类: .net后台框架

.netcore

WPF渲染模板

简介


在WPF（Windows Presentation Foundation）中，渲染模板是一种强大的机制，允许开发者定义控件的外观和行为。
通过使用渲染模板，您可以完全控制控件的呈现方式，从而创建高度自定义的用户界面。

简单示例


这里定义了一个Button至于你想显示什么，取决于ControlTemplate标签下定义了什么。

  1. <Window x:Class="WpfAppLearning.StyleWin"
  2.         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  3.         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  4.         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  5.         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  6.         xmlns:local="clr-namespace:WpfAppLearning"
  7.         mc:Ignorable="d"
  8.         Title="StyleWin" Height="450" Width="800">
  9.     <Grid>
  10.         <Button Content="Button" Width="100" Height="100" >
  11.             <Button.Template>
  12.                 <ControlTemplate>
  13.                     <Label Content="xxxxx"/>
  14.                 </ControlTemplate>    
  15.             </Button.Template>
  16.         </Button>
  17.     </Grid>
  18. </Window>

自定义模板


添加一个新的button并在选中后点击Edit Template—>Edit a Copy，创建键的名称并点击OK按钮。

  1. <Window x:Class="WpfAppLearning.StyleWin"
  2.         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  3.         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  4.         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  5.         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  6.         xmlns:local="clr-namespace:WpfAppLearning"
  7.         mc:Ignorable="d"
  8.         Title="StyleWin" Height="450" Width="800">
  9.     <!-- 定义全局资源 -->
  10.     <Window.Resources>
  11.         <!-- 定义焦点样式 -->
  12.         <Style x:Key="FocusVisual">
  13.             <Setter Property="Control.Template">
  14.                 <Setter.Value>
  15.                     <!-- 使用虚线矩形表示焦点 -->
  16.                     <ControlTemplate>
  17.                         <Rectangle Margin="2" StrokeDashArray="1 2" Stroke="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}" SnapsToDevicePixels="true" StrokeThickness="1"/>
  18.                     </ControlTemplate>
  19.                 </Setter.Value>
  20.             </Setter>
  21.         </Style>
  22.         <!-- 定义按钮不同状态的背景色和边框颜色 -->
  23.         <!-- 默认背景 -->
  24.         <SolidColorBrush x:Key="Button.Static.Background" Color="red"/>
  25.         <!-- 默认边框 -->
  26.         <SolidColorBrush x:Key="Button.Static.Border" Color="#FF707070"/>
  27.         <!-- 鼠标悬停背景 -->
  28.         <SolidColorBrush x:Key="Button.MouseOver.Background" Color="#FFBEE6FD"/>
  29.         <!-- 鼠标悬停边框 -->
  30.         <SolidColorBrush x:Key="Button.MouseOver.Border" Color="#FF3C7FB1"/>
  31.         <!-- 按下背景 -->
  32.         <SolidColorBrush x:Key="Button.Pressed.Background" Color="#FFC4E5F6"/>
  33.         <!-- 按下边框 -->
  34.         <SolidColorBrush x:Key="Button.Pressed.Border" Color="#FF2C628B"/>
  35.         <!-- 禁用背景 -->
  36.         <SolidColorBrush x:Key="Button.Disabled.Background" Color="#FFF4F4F4"/>
  37.         <!-- 禁用边框 -->
  38.         <SolidColorBrush x:Key="Button.Disabled.Border" Color="#FFADB2B5"/>
  39.         <!-- 禁用文字颜色 -->
  40.         <SolidColorBrush x:Key="Button.Disabled.Foreground" Color="#FF838383"/>
  41.         <!-- 定义自定义按钮样式 -->
  42.         <Style x:Key="ButtonStyle1" TargetType="{x:Type Button}">
  43.             <!-- 设置焦点样式 -->
  44.             <Setter Property="FocusVisualStyle" Value="{StaticResource FocusVisual}"/>
  45.             <!-- 设置默认背景、边框和文字颜色 -->
  46.             <Setter Property="Background" Value="{StaticResource Button.Static.Background}"/>
  47.             <Setter Property="BorderBrush" Value="{StaticResource Button.Static.Border}"/>
  48.             <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
  49.             <!-- 设置边框厚度 -->
  50.             <Setter Property="BorderThickness" Value="1"/>
  51.             <!-- 设置内容对齐方式 -->
  52.             <Setter Property="HorizontalContentAlignment" Value="Center"/>
  53.             <Setter Property="VerticalContentAlignment" Value="Center"/>
  54.             <Setter Property="Padding" Value="1"/>
  55.             <!-- 自定义模板 -->
  56.             <Setter Property="Template">
  57.                 <Setter.Value>
  58.                     <ControlTemplate TargetType="{x:Type Button}">
  59.                         <!-- 定义按钮外观 -->
  60.                         <Border x:Name="border" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" SnapsToDevicePixels="true">
  61.                             <!-- 显示按钮内容 -->
  62.                             <ContentPresenter x:Name="contentPresenter" Focusable="False" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
  63.                         </Border>
  64.                         <!-- 定义状态触发器 -->
  65.                         <ControlTemplate.Triggers>
  66.                             <!-- 默认按钮触发 -->
  67.                             <Trigger Property="IsDefaulted" Value="true">
  68.                                 <Setter Property="BorderBrush" TargetName="border" Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}"/>
  69.                             </Trigger>
  70.                             <!-- 鼠标悬停触发 -->
  71.                             <Trigger Property="IsMouseOver" Value="true">
  72.                                 <Setter Property="Background" TargetName="border" Value="{StaticResource Button.MouseOver.Background}"/>
  73.                                 <Setter Property="BorderBrush" TargetName="border" Value="{StaticResource Button.MouseOver.Border}"/>
  74.                             </Trigger>
  75.                             <!-- 按下触发 -->
  76.                             <Trigger Property="IsPressed" Value="true">
  77.                                 <Setter Property="Background" TargetName="border" Value="{StaticResource Button.Pressed.Background}"/>
  78.                                 <Setter Property="BorderBrush" TargetName="border" Value="{StaticResource Button.Pressed.Border}"/>
  79.                             </Trigger>
  80.                             <!-- 禁用触发 -->
  81.                             <Trigger Property="IsEnabled" Value="false">
  82.                                 <Setter Property="Background" TargetName="border" Value="{StaticResource Button.Disabled.Background}"/>
  83.                                 <Setter Property="BorderBrush" TargetName="border" Value="{StaticResource Button.Disabled.Border}"/>
  84.                                 <Setter Property="TextElement.Foreground" TargetName="contentPresenter" Value="{StaticResource Button.Disabled.Foreground}"/>
  85.                             </Trigger>
  86.                         </ControlTemplate.Triggers>
  87.                     </ControlTemplate>
  88.                 </Setter.Value>
  89.             </Setter>
  90.         </Style>
  91.     </Window.Resources>
  92.     <!-- 页面内容 -->
  93.     <Grid>
  94.         <StackPanel>
  95.             <!-- 自定义模板按钮 -->
  96.             <Button Content="Button" Width="100" Height="100" >
  97.                 <Button.Template>
  98.                     <ControlTemplate>
  99.                         <Label Content="xxxxx"/>
  100.                     </ControlTemplate>
  101.                 </Button.Template>
  102.             </Button>
  103.             <!-- 应用自定义样式的按钮 -->
  104.             <Button Style="{DynamicResource ButtonStyle1}">
  105.                 <Label Content="xxxxx"/>
  106.             </Button>
  107.         </StackPanel>
  108.     </Grid>
  109. </Window>


ContentPresenter是ControlTemplate的常用组件，负责显示控件的内容，可以动态呈现内容，并能够根据内容类型自适应的显示。

属性 描述
Content 要显示的内容，通常绑定到 ContentControl.Content。
ContentTemplate 一个 DataTemplate，定义如何显示内容。如果未设置，则按默认方式显示内容。
ContentTemplateSelector 一个选择器，用于动态选择 ContentTemplate。
ContentStringFormat 如果内容是字符串，可以通过格式化设置字符串的显示格式。
RecognizesAccessKey 是否识别快捷键（如 _File 显示为 File，并为快捷键 Alt+F 添加支持）。
HorizontalAlignment 控制内容的水平对齐方式（继承自 FrameworkElement）。
VerticalAlignment 控制内容的垂直对齐方式（继承自 FrameworkElement）。

TemplateBinding绑定


在 WPF 中，TemplateBinding 是一种简化的绑定方式，它专门用于控件模板内部属性与控件外部属性之间的绑定。它能够将控件外部设置的属性值传递到模板内部的控件元素，以便动态地更新控件的外观。
示例代码如下：

  1. <Window x:Class="WpfAppLearning.Window1"
  2.         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  3.         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  4.         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  5.         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  6.         xmlns:local="clr-namespace:WpfAppLearning"
  7.         mc:Ignorable="d"
  8.         Title="Window1" Height="450" Width="800">
  9.     <Window.Resources>
  10.         <Style x:Key="ButtonStyle1" TargetType="{x:Type Button}">
  11.             <Setter Property="Template">
  12.                 <Setter.Value>
  13.                     <ControlTemplate TargetType="{x:Type Button}">
  14.                         <Border x:Name="border" CornerRadius="5" BorderThickness="2" BorderBrush="Red" Background="{TemplateBinding Background}">
  15.                             <Grid Name="root">
  16.                                 <Grid.RowDefinitions>
  17.                                     <RowDefinition/>
  18.                                     <RowDefinition/>
  19.                                 </Grid.RowDefinitions>
  20.                                 <ContentPresenter Name="txt"/>
  21.                                 <TextBlock Text="{TemplateBinding Tag}" Grid.Row="1" />
  22.                             </Grid>
  23.                         </Border>
  24.                         <ControlTemplate.Triggers>
  25.                             <Trigger Property="IsMouseOver" Value="true">
  26.                                 <Setter Property="Background" Value="Red" TargetName="root"/>
  27.                                 <Setter TargetName="border" Property="Background" Value="Orange"/>
  28.                             </Trigger>
  29.                             <Trigger Property="Tag" Value="0">
  30.                                 <Setter Property="Visibility" Value="Collapsed" TargetName="txt"/>
  31.                             </Trigger>
  32.                         </ControlTemplate.Triggers>
  33.                     </ControlTemplate>
  34.                 </Setter.Value>
  35.             </Setter>
  36.         </Style>
  37.     </Window.Resources>
  38.     <Grid>
  39.         <StackPanel>
  40.             <Button Style="{DynamicResource ButtonStyle1}" Content="Hmy" Width="120" Height="80" Tag="0" Background="Blue"></Button>
  41.         </StackPanel>
  42.     </Grid>
  43. </Window>

数据模板


在 WPF 中，ItemControl（如 ListBox、ComboBox、ListView 等）可以使用数据模板（DataTemplate）来定义如何展示其项（Items）的内容。当你绑定一个集合到 ItemControl 时，数据模板决定了每个集合项如何在 UI 中显示。
简单举例：

  1. <Window x:Class="WpfAppLearning.Window2"
  2.         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  3.         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  4.         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  5.         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  6.         xmlns:local="clr-namespace:WpfAppLearning"
  7.         mc:Ignorable="d"
  8.         Title="Window2" Height="450" Width="800">
  9.     <Window.Resources>
  10.         <!-- 定义数据模板 -->
  11.         <DataTemplate x:Key="PersonTemplate">
  12.             <StackPanel Orientation="Horizontal">
  13.                 <TextBlock Text="Name: " FontWeight="Bold" />
  14.                 <TextBlock Text="{Binding Name}" />
  15.                 <TextBlock Text=" | Age: " FontWeight="Bold" />
  16.                 <TextBlock Text="{Binding Age}" />
  17.             </StackPanel>
  18.         </DataTemplate>
  19.     </Window.Resources>
  20.     <Grid>
  21.         <!-- ListBox控件，用x:Array定义数据 -->
  22.         <ListBox Name="personListBox" 
  23.                  HorizontalAlignment="Left" VerticalAlignment="Top" 
  24.                  Width="300" Height="200"
  25.                  ItemTemplate="{StaticResource PersonTemplate}">
  26.             <ListBox.ItemsSource>
  27.                 <x:Array Type="{x:Type local:Person}">
  28.                     <local:Person Name="Alice" Age="30" />
  29.                     <local:Person Name="Bob" Age="25" />
  30.                     <local:Person Name="Charlie" Age="35" />
  31.                 </x:Array>
  32.             </ListBox.ItemsSource>
  33.         </ListBox>
  34.     </Grid>
  35. </Window>


Person类。

  1. public class Person
  2. {
  3.     public int Age { get; set; }
  4.     public string Name { get; set; }
  5. }

ItemContainerStyle


定义了 ListViewItem（即每个项的容器）的样式。
我们设置了 Background、Margin、Padding 等属性，并且使用 Trigger 在鼠标悬停时改变背景色。

  1. <Window x:Class="WpfAppLearning.Window4"
  2.         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  3.         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  4.         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  5.         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  6.         xmlns:local="clr-namespace:WpfAppLearning"
  7.         mc:Ignorable="d"
  8.         Title="Window4" Height="450" Width="800">
  10.     <Window.Resources>
  12.         <!-- 1. 定义 ItemTemplate：控制数据项的展示 -->
  13.         <DataTemplate x:Key="PersonTemplate">
  14.             <StackPanel Orientation="Horizontal">
  15.                 <TextBlock Text="Name: " FontWeight="Bold" />
  16.                 <TextBlock Text="{Binding Name}" />
  17.                 <TextBlock Text=" | Age: " FontWeight="Bold" />
  18.                 <TextBlock Text="{Binding Age}" />
  19.             </StackPanel>
  20.         </DataTemplate>
  21.         <!-- 2. 定义 ItemContainerStyle：控制 ListViewItem 的样式 -->
  22.         <Style x:Key="ItemContainerStyle" TargetType="ListViewItem">
  23.             <Setter Property="Background" Value="LightGray" />
  24.             <Setter Property="Margin" Value="5" />
  25.             <Setter Property="Padding" Value="10" />
  26.             <Setter Property="BorderBrush" Value="Blue" />
  27.             <Setter Property="BorderThickness" Value="1" />
  28.             <Setter Property="HorizontalAlignment" Value="Stretch" />
  29.             <Style.Triggers>
  30.                 <!-- 鼠标悬停时更改背景色 -->
  31.                 <Trigger Property="IsMouseOver" Value="True">
  32.                     <Setter Property="Background" Value="Orange" />
  33.                 </Trigger>
  34.             </Style.Triggers>
  35.         </Style>
  38.     </Window.Resources>
  40.     <Grid>
  41.         <!-- 5. ListView控件 -->
  42.         <ListView
  43.             ItemTemplate="{StaticResource PersonTemplate}" 
  44.                   ItemContainerStyle="{StaticResource ItemContainerStyle}" 
  45.             >
  47.             <ListBox.ItemsSource>
  48.                 <x:Array Type="{x:Type local:Person}">
  49.                     <local:Person Name="Alice" Age="30" />
  50.                     <local:Person Name="Bob" Age="25" />
  51.                     <local:Person Name="Charlie" Age="35" />
  52.                     <local:Person Name="Charlie" Age="35" />
  53.                     <local:Person Name="Charlie" Age="35" />
  54.                     <local:Person Name="Charlie" Age="35" />
  55.                     <local:Person Name="Charlie" Age="35" />
  56.                     <local:Person Name="Charlie" Age="35" />
  57.                 </x:Array>
  58.             </ListBox.ItemsSource>
  59.         </ListView>
  60.     </Grid>
  61. </Window>

ItemsPanel 控制项布局


控制 ListView 中项的布局。
在这个例子中，我们使用了 WrapPanel 来让项按行排列，自动换行。
这意味着，如果项的宽度超过容器的宽度，它会自动换到下一行。

  1. <Window x:Class="WpfAppLearning.Window4"
  2.         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  3.         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  4.         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  5.         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  6.         xmlns:local="clr-namespace:WpfAppLearning"
  7.         mc:Ignorable="d"
  8.         Title="Window4" Height="450" Width="800">
  10.     <Window.Resources>
  12.         <!-- 1. 定义 ItemTemplate：控制数据项的展示 -->
  13.         <DataTemplate x:Key="PersonTemplate">
  14.             <StackPanel Orientation="Horizontal">
  15.                 <TextBlock Text="Name: " FontWeight="Bold" />
  16.                 <TextBlock Text="{Binding Name}" />
  17.                 <TextBlock Text=" | Age: " FontWeight="Bold" />
  18.                 <TextBlock Text="{Binding Age}" />
  19.             </StackPanel>
  20.         </DataTemplate>
  21.         <!-- 2. 定义 ItemContainerStyle：控制 ListViewItem 的样式 -->
  22.         <Style x:Key="ItemContainerStyle" TargetType="ListViewItem">
  23.             <Setter Property="Background" Value="LightGray" />
  24.             <Setter Property="Margin" Value="5" />
  25.             <Setter Property="Padding" Value="10" />
  26.             <Setter Property="BorderBrush" Value="Blue" />
  27.             <Setter Property="BorderThickness" Value="1" />
  28.             <Setter Property="HorizontalAlignment" Value="Stretch" />
  29.             <Style.Triggers>
  30.                 <!-- 鼠标悬停时更改背景色 -->
  31.                 <Trigger Property="IsMouseOver" Value="True">
  32.                     <Setter Property="Background" Value="Orange" />
  33.                 </Trigger>
  34.             </Style.Triggers>
  35.         </Style>
  38.         <!-- 4. 定义 ItemsPanel：控制项的布局 -->
  39.         <ItemsPanelTemplate x:Key="ItemsPanelTemplate">
  40.             <WrapPanel />
  41.         </ItemsPanelTemplate>
  42.     </Window.Resources>
  44.     <Grid>
  45.         <!-- 5. ListView控件 -->
  46.         <ListView
  47.             ItemTemplate="{StaticResource PersonTemplate}" 
  48.                   ItemContainerStyle="{StaticResource ItemContainerStyle}" 
  49.                   ItemsPanel="{StaticResource ItemsPanelTemplate}"
  50.             >
  52.             <ListBox.ItemsSource>
  53.                 <x:Array Type="{x:Type local:Person}">
  54.                     <local:Person Name="Alice" Age="30" />
  55.                     <local:Person Name="Bob" Age="25" />
  56.                     <local:Person Name="Charlie" Age="35" />
  57.                     <local:Person Name="Charlie" Age="35" />
  58.                     <local:Person Name="Charlie" Age="35" />
  59.                     <local:Person Name="Charlie" Age="35" />
  60.                     <local:Person Name="Charlie" Age="35" />
  61.                     <local:Person Name="Charlie" Age="35" />
  62.                 </x:Array>
  63.             </ListBox.ItemsSource>
  64.         </ListView>
  65.     </Grid>
  66. </Window>

ItemsControl的ControlTemplate

ItemsControl 主要是用于显示一组数据项（比如 ListBox、ListView、ComboBox 等控件）。通常，它的外观（如边框、背景、滚动条等）是由 ControlTemplate 控制的。在 ItemsControl 中，ItemTemplate 用于控制单个项的显示，而 ControlTemplate 则控制整个控件的布局和外观。
举个例子：

  1. <Window x:Class="WpfAppLearning.Window5"
  2.         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  3.         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  4.         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  5.         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  6.         xmlns:local="clr-namespace:WpfAppLearning"
  7.         xmlns:sys="clr-namespace:System;assembly=mscorlib"
  8.         mc:Ignorable="d"
  9.         Title="Window5" Height="450" Width="800">
  11.     <Window.Resources>
  12.         <!-- 定义 ItemTemplate：控制每个项的展示 -->
  13.         <DataTemplate x:Key="ItemTemplate">
  14.             <TextBlock Text="{Binding}" FontSize="16" VerticalAlignment="Center" HorizontalAlignment="Center" />
  15.         </DataTemplate>
  17.         <!-- 定义 ItemsControl 的 ControlTemplate -->
  18.         <ControlTemplate x:Key="ItemsControlTemplate" TargetType="ItemsControl">
  19.             <Border Background="LightBlue" BorderBrush="DarkBlue" BorderThickness="2" CornerRadius="10">
  20.                 <ScrollViewer>
  21.                     <StackPanel>
  22.                         <!-- 在这里使用了 ContentPresenter 来显示每一项 -->
  23.                         <ItemsPresenter />
  24.                     </StackPanel>
  25.                 </ScrollViewer>
  26.             </Border>
  27.         </ControlTemplate>
  28.     </Window.Resources>
  30.     <Grid>
  31.         <ItemsControl
  32.                       ItemTemplate="{StaticResource ItemTemplate}"
  33.                       Template="{StaticResource ItemsControlTemplate}" >
  34.             <ItemsControl.ItemsSource>
  35.                 <x:Array Type="{x:Type sys:String}">
  36.                     <sys:String>Alice</sys:String>
  37.                     <sys:String>Bob</sys:String>
  38.                     <sys:String>Charlie</sys:String>
  39.                     <sys:String>Charlie</sys:String>
  40.                     <sys:String>Charlie</sys:String>
  41.                     <sys:String>Charlie</sys:String>
  42.                     <sys:String>Charlie</sys:String>
  43.                     <sys:String>Charlie</sys:String>
  44.                 </x:Array>
  45.             </ItemsControl.ItemsSource>
  46.         </ItemsControl>
  47.     </Grid>
  48. </Window>

ItemTemplateSelector不同Item做不同的模板选择


可以自定义一些条件让Item选择不同的模板，这里我们判断小于20岁的使用的模板的背景颜色标注红色，大于20岁的不变。
创建一个ListViewItemTemplateSelector类。

  1. public class ListViewItemTemplateSelector:DataTemplateSelector
  2. {
  3.     public DataTemplate DaYU_Age_22_Template { get; set; }
  4.     public DataTemplate XiaoYU_Age_22_Template { get; set; }
  6.     /// <summary>
  7.     /// 
  8.     /// </summary>
  9.     /// <param name="item">每个控件子项所对应的数据子项</param>
  10.     /// <param name="container"></param>
  11.     /// <returns></returns>
  12.     public override DataTemplate SelectTemplate(object item, DependencyObject container)
  13.     {
  14.         var nowperson = item as Person;
  15.         if (nowperson.Age > 22)
  16.         {
  17.             return DaYU_Age_22_Template;
  18.         }
  19.         return XiaoYU_Age_22_Template;
  20.     }
  21. }


这里定义了两个数据模板PersonTemplate1和PersonTemplate2，当数据中年龄小于22岁时使用PersonTemplate2加载该item，当年龄大于22岁时使用PersonTemplate1模板。

  1. <Window x:Class="WpfAppLearning.Window4"
  2.         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  3.         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  4.         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  5.         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  6.         xmlns:local="clr-namespace:WpfAppLearning"
  7.         mc:Ignorable="d"
  8.         Title="Window4" Height="450" Width="800">
  10.     <Window.Resources>
  12.         <!-- 1. 定义 ItemTemplate：控制数据项的展示 -->
  13.         <DataTemplate x:Key="PersonTemplate1">
  14.             <StackPanel Orientation="Horizontal">
  15.                 <TextBlock Text="Name: " FontWeight="Bold" />
  16.                 <TextBlock Text="{Binding Name}" />
  17.                 <TextBlock Text=" | Age: " FontWeight="Bold" />
  18.                 <TextBlock Text="{Binding Age}" />
  19.             </StackPanel>
  20.         </DataTemplate>
  21.         <DataTemplate x:Key="PersonTemplate2">
  22.             <StackPanel Orientation="Horizontal" Background="Red">
  23.                 <TextBlock Text="Name: " FontWeight="Bold" />
  24.                 <TextBlock Text="{Binding Name}" />
  25.                 <TextBlock Text=" | Age: " FontWeight="Bold" />
  26.                 <TextBlock Text="{Binding Age}" />
  27.             </StackPanel>
  28.         </DataTemplate>
  29.         <!-- 2. 定义 ItemContainerStyle：控制 ListViewItem 的样式 -->
  30.         <Style x:Key="ItemContainerStyle" TargetType="ListViewItem">
  31.             <Setter Property="Background" Value="LightGray" />
  32.             <Setter Property="Margin" Value="5" />
  33.             <Setter Property="Padding" Value="10" />
  34.             <Setter Property="BorderBrush" Value="Blue" />
  35.             <Setter Property="BorderThickness" Value="1" />
  36.             <Setter Property="HorizontalAlignment" Value="Stretch" />
  37.             <Style.Triggers>
  38.                 <!-- 鼠标悬停时更改背景色 -->
  39.                 <Trigger Property="IsMouseOver" Value="True">
  40.                     <Setter Property="Background" Value="Orange" />
  41.                 </Trigger>
  42.             </Style.Triggers>
  43.         </Style>
  46.     </Window.Resources>
  48.     <Grid>
  49.         <!-- 5. ListView控件 -->
  50.         <ListView
  51.                   ItemContainerStyle="{StaticResource ItemContainerStyle}" 
  52.             >
  53.             <ListView.ItemTemplateSelector>
  54.                 <local:ListViewItemTemplateSelector DaYU_Age_22_Template="{StaticResource PersonTemplate1}" XiaoYU_Age_22_Template="{StaticResource PersonTemplate2}"/>
  55.             </ListView.ItemTemplateSelector>
  56.             <ListBox.ItemsSource>
  57.                 <x:Array Type="{x:Type local:Person}">
  58.                     <local:Person Name="Alice" Age="30" />
  59.                     <local:Person Name="Bob" Age="25" />
  60.                     <local:Person Name="Charlie" Age="18" />
  61.                     <local:Person Name="Charlie" Age="20" />
  62.                     <local:Person Name="Charlie" Age="9" />
  63.                     <local:Person Name="Charlie" Age="6" />
  64.                     <local:Person Name="Charlie" Age="59" />
  65.                     <local:Person Name="Charlie" Age="35" />
  66.                 </x:Array>
  67.             </ListBox.ItemsSource>
  68.         </ListView>
  69.     </Grid>
  70. </Window>

ItemContainerStyleSelector


与ItemTemplateSelector类似，只是它是通过样式来决定，这里我就直接提供代码了（通过设置Border的颜色来决定）：

  1. <Window x:Class="WpfAppLearning.Window4"
  2.         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  3.         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  4.         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  5.         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  6.         xmlns:local="clr-namespace:WpfAppLearning"
  7.         mc:Ignorable="d"
  8.         Title="Window4" Height="450" Width="800">
  10.     <Window.Resources>
  12.         <!-- 1. 定义 ItemTemplate：控制数据项的展示 -->
  13.         <DataTemplate x:Key="PersonTemplate1">
  14.             <StackPanel Orientation="Horizontal">
  15.                 <TextBlock Text="Name: " FontWeight="Bold" />
  16.                 <TextBlock Text="{Binding Name}" />
  17.                 <TextBlock Text=" | Age: " FontWeight="Bold" />
  18.                 <TextBlock Text="{Binding Age}" />
  19.             </StackPanel>
  20.         </DataTemplate>
  21.         <DataTemplate x:Key="PersonTemplate2">
  22.             <StackPanel Orientation="Horizontal" Background="Red">
  23.                 <TextBlock Text="Name: " FontWeight="Bold" />
  24.                 <TextBlock Text="{Binding Name}" />
  25.                 <TextBlock Text=" | Age: " FontWeight="Bold" />
  26.                 <TextBlock Text="{Binding Age}" />
  27.             </StackPanel>
  28.         </DataTemplate>
  29.         <!-- 2. 定义 ItemContainerStyle：控制 ListViewItem 的样式 -->
  30.         <Style x:Key="ItemContainerStyle1" TargetType="ListViewItem">
  31.             <Setter Property="BorderBrush" Value="Blue" />
  32.         </Style>
  34.         <Style x:Key="ItemContainerStyle2" TargetType="ListViewItem">
  35.             <Setter Property="BorderBrush" Value="Red" />
  36.         </Style>
  38.     </Window.Resources>
  40.     <Grid>
  41.         <!-- 5. ListView控件 -->
  42.         <ListView
  43.             >
  44.             <ListView.ItemTemplateSelector>
  45.                 <local:ListViewItemTemplateSelector DaYU_Age_22_Template="{StaticResource PersonTemplate1}" XiaoYU_Age_22_Template="{StaticResource PersonTemplate2}"/>
  46.             </ListView.ItemTemplateSelector>
  47.             <ListView.ItemContainerStyleSelector>
  48.                 <local:TestContainerStyleSelector DaYU_Age_22_Template="{StaticResource ItemContainerStyle1}" XiaoYU_Age_22_Template="{StaticResource ItemContainerStyle2}" />
  49.             </ListView.ItemContainerStyleSelector>
  50.             <ListBox.ItemsSource>
  51.                 <x:Array Type="{x:Type local:Person}">
  52.                     <local:Person Name="Alice" Age="30" />
  53.                     <local:Person Name="Bob" Age="25" />
  54.                     <local:Person Name="Charlie" Age="18" />
  55.                     <local:Person Name="Charlie" Age="20" />
  56.                     <local:Person Name="Charlie" Age="9" />
  57.                     <local:Person Name="Charlie" Age="6" />
  58.                     <local:Person Name="Charlie" Age="59" />
  59.                     <local:Person Name="Charlie" Age="35" />
  60.                 </x:Array>
  61.             </ListBox.ItemsSource>
  62.         </ListView>
  63.     </Grid>
  64. </Window>
  1. public class TestContainerStyleSelector: StyleSelector
  2. {
  3.     public Style DaYU_Age_22_Template { get; set; }
  4.     public Style XiaoYU_Age_22_Template { get; set; }
  6.     public override Style SelectStyle(object item, DependencyObject container)
  7.     {
  8.         var nowperson = item as Person;
  9.         if (nowperson.Age > 22)
  10.         {
  11.             return DaYU_Age_22_Template;
  12.         }
  13.         return XiaoYU_Age_22_Template;
  14.     }
  15. }

AlternationCount 数据组


AlternationCount这里可以在集合中设置以几行为一组，然后我通过Trigger设置，每组下标为1的背景颜色为橘色。
核心代码：

  2.                 <Trigger Property="ItemsControl.AlternationIndex" Value="1">
  3.                     <Setter Property="Background" Value="Orange" />
  4.                 </Trigger>
  6. ...
  7. <ListView
  8.           ItemTemplate="{StaticResource PersonTemplate}" 
  9.           ItemContainerStyle="{StaticResource ItemContainerStyle}" 
  10.           AlternationCount="2"
  11.     >


完整代码如下：

  1. <Window x:Class="WpfAppLearning.Window3"
  2.         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  3.         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  4.         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  5.         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  6.         xmlns:local="clr-namespace:WpfAppLearning"
  7.         mc:Ignorable="d"
  8.         Title="Window3" Height="450" Width="800">
  10.     <Window.Resources>
  11.         <!-- 1. 定义 ItemTemplate：控制数据项的展示 -->
  12.         <DataTemplate x:Key="PersonTemplate">
  13.             <StackPanel Orientation="Horizontal">
  14.                 <TextBlock Text="Name: " FontWeight="Bold" />
  15.                 <TextBlock Text="{Binding Name}" />
  16.                 <TextBlock Text=" | Age: " FontWeight="Bold" />
  17.                 <TextBlock Text="{Binding Age}" />
  18.             </StackPanel>
  19.         </DataTemplate>
  21.         <!-- 2. 定义 ItemContainerStyle：控制 ListViewItem 的样式 -->
  22.         <Style x:Key="ItemContainerStyle" TargetType="ListViewItem">
  23.             <Setter Property="Background" Value="LightGray" />
  24.             <Setter Property="Margin" Value="5" />
  25.             <Setter Property="Padding" Value="10" />
  26.             <Setter Property="BorderBrush" Value="Black" />
  27.             <Setter Property="BorderThickness" Value="1" />
  28.             <Setter Property="HorizontalAlignment" Value="Stretch" />
  29.             <Style.Triggers>
  30.                 <!-- 鼠标悬停时更改背景色 -->
  31.                 <Trigger Property="ItemsControl.AlternationIndex" Value="1">
  32.                     <Setter Property="Background" Value="Orange" />
  33.                 </Trigger>
  34.             </Style.Triggers>
  35.         </Style>
  37.     </Window.Resources>
  39.     <Grid>
  40.         <!-- 5. ListView控件 -->
  41.         <ListView
  42.                   ItemTemplate="{StaticResource PersonTemplate}" 
  43.                   ItemContainerStyle="{StaticResource ItemContainerStyle}" 
  44.                   AlternationCount="2"
  45.             >
  46.             <ListBox.ItemsSource>
  47.                 <x:Array Type="{x:Type local:Person}">
  48.                     <local:Person Name="Alice" Age="30" />
  49.                     <local:Person Name="Bob" Age="25" />
  50.                     <local:Person Name="Charlie" Age="35" />
  51.                     <local:Person Name="Charlie" Age="35" />
  52.                     <local:Person Name="Charlie" Age="35" />
  53.                     <local:Person Name="Charlie" Age="35" />
  54.                     <local:Person Name="Charlie" Age="35" />
  55.                     <local:Person Name="Charlie" Age="35" />
  56.                     <local:Person Name="Charlie" Age="35" />
  57.                     <local:Person Name="Charlie" Age="35" />
  58.                     <local:Person Name="Charlie" Age="35" />
  59.                     <local:Person Name="Charlie" Age="35" />
  60.                     <local:Person Name="Charlie" Age="35" />
  61.                     <local:Person Name="Charlie" Age="35" />
  62.                     <local:Person Name="Charlie" Age="35" />
  63.                     <local:Person Name="Charlie" Age="35" />
  64.                     <local:Person Name="Charlie" Age="35" />
  65.                     <local:Person Name="Charlie" Age="35" />
  66.                     <local:Person Name="Charlie" Age="35" />
  67.                     <local:Person Name="Charlie" Age="35" />
  68.                     <local:Person Name="Charlie" Age="35" />
  69.                     <local:Person Name="Charlie" Age="35" />
  70.                     <local:Person Name="Charlie" Age="35" />
  71.                     <local:Person Name="Charlie" Age="35" />
  72.                     <local:Person Name="Charlie" Age="35" />
  73.                     <local:Person Name="Charlie" Age="35" />
  74.                     <local:Person Name="Charlie" Age="35" />
  75.                     <local:Person Name="Charlie" Age="35" />
  76.                     <local:Person Name="Charlie" Age="35" />
  77.                     <local:Person Name="Charlie" Age="35" />
  78.                     <local:Person Name="Charlie" Age="35" />
  79.                     <local:Person Name="Charlie" Age="35" />
  80.                     <local:Person Name="Charlie" Age="35" />
  81.                     <local:Person Name="Charlie" Age="35" />
  82.                     <local:Person Name="Charlie" Age="35" />
  83.                     <local:Person Name="Charlie" Age="35" />
  84.                     <local:Person Name="Charlie" Age="35" />
  85.                     <local:Person Name="Charlie" Age="35" />
  86.                     <local:Person Name="Charlie" Age="35" />
  87.                     <local:Person Name="Charlie" Age="35" />
  88.                     <local:Person Name="Charlie" Age="35" />
  89.                     <local:Person Name="Charlie" Age="35" />
  90.                     <local:Person Name="Charlie" Age="35" />
  91.                     <local:Person Name="Charlie" Age="35" />
  92.                     <local:Person Name="Charlie" Age="35" />
  93.                     <local:Person Name="Charlie" Age="35" />
  94.                     <local:Person Name="Charlie" Age="35" />
  95.                     <local:Person Name="Charlie" Age="35" />
  96.                     <local:Person Name="Charlie" Age="35" />
  97.                     <local:Person Name="Charlie" Age="35" />
  98.                     <local:Person Name="Charlie" Age="35" />
  99.                     <local:Person Name="Charlie" Age="35" />
  100.                     <local:Person Name="Charlie" Age="35" />
  101.                     <local:Person Name="Charlie" Age="35" />
  102.                     <local:Person Name="Charlie" Age="35" />
  103.                 </x:Array>
  104.             </ListBox.ItemsSource>
  105.         </ListView>
  106.     </Grid>
  107. </Window>

简单的Checkbox样式示例

  1. <Window x:Class="WpfAppLearning.Window6"
  2.         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  3.         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  4.         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  5.         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  6.         xmlns:local="clr-namespace:WpfAppLearning"
  7.         mc:Ignorable="d"
  8.         Title="Window6" Height="450" Width="800">
  9.     <Window.Resources>
  10.         <Style x:Key="chkBullet" TargetType="CheckBox">
  11.             <Setter Property="IsChecked" Value="False"/>
  12.             <Setter Property="Background" Value="Transparent"/>
  13.             <Setter Property="Foreground" Value="#999"/>
  14.             <Setter Property="Template">
  15.                 <Setter.Value>
  16.                     <ControlTemplate TargetType="CheckBox">
  17.                         <Border Width="60" Height="20" CornerRadius="10" Background="{TemplateBinding Background}" >
  18.                             <Grid>
  19.                                 <Border x:Name="border" Width="18" Height="18" CornerRadius="9" VerticalAlignment="Center" HorizontalAlignment="Left" Margin="1 0" Background="White">
  20.                                     <Border.RenderTransform>
  21.                                         <TranslateTransform  X="0"/>
  22.                                     </Border.RenderTransform>
  23.                                 </Border>
  24.                                 <TextBlock x:Name="txt" Text="{TemplateBinding Content}" Margin="9 0" VerticalAlignment="Center" Foreground="White" >
  25.                                     <TextBlock.RenderTransform>
  26.                                         <TranslateTransform   X="18"></TranslateTransform>
  27.                                     </TextBlock.RenderTransform>
  28.                                 </TextBlock>
  29.                             </Grid>
  30.                         </Border>
  31.                         <ControlTemplate.Triggers>
  32.                             <Trigger Property="IsChecked" Value="true">
  33.                                 <Setter Property="Text" TargetName="txt" Value="{Binding Tag,RelativeSource={RelativeSource TemplatedParent}}"/>
  34.                                 <Trigger.EnterActions>
  35.                                     <BeginStoryboard>
  36.                                         <Storyboard>
  37.                                             <DoubleAnimation Storyboard.TargetName="border" Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.X)" To="40" Duration="00:00:0.2"/>
  38.                                             <DoubleAnimation Storyboard.TargetName="txt" Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.X)" To="0" Duration="00:00:0.2"/>
  39.                                         </Storyboard>
  40.                                     </BeginStoryboard>
  41.                                 </Trigger.EnterActions>
  42.                                 <Trigger.ExitActions>
  43.                                     <BeginStoryboard>
  44.                                         <Storyboard>
  45.                                             <DoubleAnimation Storyboard.TargetName="border" Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.X)" To="0" Duration="00:00:0.2"/>
  46.                                             <DoubleAnimation Storyboard.TargetName="txt" Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.X)" To="18" Duration="00:00:0.2"/>
  47.                                         </Storyboard>
  48.                                     </BeginStoryboard>
  49.                                 </Trigger.ExitActions>
  50.                             </Trigger>
  51.                             <Trigger Property="IsChecked" Value="False">
  52.                                 <Setter Property="Text" TargetName="txt" Value="{Binding Content,RelativeSource={RelativeSource TemplatedParent}}"/>
  53.                             </Trigger>
  54.                         </ControlTemplate.Triggers>
  55.                     </ControlTemplate>
  56.                 </Setter.Value>
  57.             </Setter>
  58.         </Style>
  59.     </Window.Resources>
  60.     <Grid>
  61.         <CheckBox Style="{StaticResource chkBullet}" Background="#5387b9" IsChecked="False" Content="Off" Tag="On" Margin="10"/>
  62.     </Grid>
  63. </Window>


欢迎加群讨论技术，1群：677373950(满了，可以加，但通过不了)，2群：656732739

评价

WPF DataGrid表头Checkbox 全选与全反选
WPF 在使用DataGrid展示数据的时候经常会使用到checkbox列，特别是id列 例如下面这种效果：WPF 要实现DataGrid checkbox全...

WPF基础学习笔记
WPF基础学习笔记[TOC] WPF简介在WPF（Windows Presentation Foundation）中，布局控件用于管理和组织界面元素的排列与尺寸...

WPF基础学习笔记（二）
WPF基础学习笔记（二）[TOC] 设置控件样式在 WPF 中，Setter 是用来定义控件样式（Style）的一个重要元素。它允许你为控件...

WPF CommunityToolkit.Mvvm初探
WPF CommunityToolkit.Mvvm初探[TOC] 什么是 CommunityToolkit.Mvvm？CommunityToolkit.Mvvm 是一个现代化的 MVVM 框架，...

WPF Mvvmlight初探
WPF Mvvmlight初探[TOC] 什么是 Mvvmlight？MVVM Light 是一个轻量级的 MVVM 框架，适用于 WPF、UWP、Xamarin 等多个平台...

WPF MvvmLight Messager学习
WPF MvvmLight Messager学习[TOC] NotificationMessage在 MVVM Light 中，NotificationMessage 是一种消息类型，用于在 Vi...

WPF Prism 框架：打造高效、可维护的 WPF 应用
WPF Prism 框架：打造高效、可维护的 WPF 应用[TOC] Prism 框架简介Prism 是一个用于构建松耦合、可维护且可测试的 XAML ...

WPF Prism 框架初始化
WPF Prism 框架初始化[TOC] 什么是 Prism Bootstrapper？Prism Bootstrapper 是一个抽象类，它定义了一个基本的启动序列，...

WPF Prism ViewModel的应用
WPF Prism ViewModel的应用[TOC] 在 WPF 开发中，Prism 是一个非常流行的框架，它基于 MVVM（Model-View-ViewModel）模式...

WPF Prism Dialog与Region
WPF Prism Dialog与Region[TOC] Prism框架中的Dialog子窗口处理在 WPF 应用程序开发中，对话框是一个常见的功能需求，无论...

WPF Prism 复合命令与模块化管理
WPF Prism 复合命令与模块化管理[TOC] Prism 中的 CompositeCommand 示例CompositeCommand 是 Prism 框架中用于组合多个子...
这一世以无限游戏为使命！
博主信息
排名
2
文章
657
粉丝
44
评论
93
文章类别
最新文章
最新评价
docker中Sware集群与service
尘叶心繁 : 想学呀！我教你呀
一个bug让程序员走上法庭 索赔金额达400亿日元
叼着奶瓶逛酒吧 : 所以说做程序员也要懂点法律知识
.net core 塑形资源
剑轩 : 收藏收藏
映射AutoMapper
剑轩 : 好是好，这个对效率影响大不大哇,效率高不高
ASP.NET Core 服务注册生命周期
剑轩 : http://www.tnblog.net/aojiancc2/article/details/167
关于我们
ICP备案 ：渝ICP备18016597号-1
网站信息：2018-2025TNBLOG.NET
技术交流：群号656732739
联系我们：contact@tnblog.net
公网安备：50010702506256
欢迎加群
欢迎加群交流技术