前言
.net开发工作了六年,看了大量的博客,现在想开始自己写博客,这是我的第一篇博客,试试水,就从自己最常使用的WPF开始。
今天我来给大家分享可用户动态选择控件模板的两种实现方式:DataTrigger实现;TemplateSelector实现。
DataTrigger实现
要通过datatrigger实现动态选择控件Template,首先我们得为控件定义一个Style,直接对style进行Trigger设置,如下:
1 <Style TargetType="ListBoxItem"> 2 <Style.Triggers> 3 。。。。。 4 </Style.Triggers> 5 </Style>
因为对于DataTrigger的Setter,我们能够进行设置的Template是ControlTemplate,所以我们需要添加控件ControlTemplate资源
1 <!--字符串--> 2 <ControlTemplate x:Key="textTemplate"> 3 <Border Height="20" Margin="5" Background="#F8F8F8"> 4 <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" Text="{Binding Content}"/> 5 </Border> 6 </ControlTemplate> 7 <!--图片--> 8 <ControlTemplate x:Key="imageTemplate"> 9 <Border Background="#F8F8F8" Margin="5"> 10 <Image MaxHeight="100" HorizontalAlignment="Center" VerticalAlignment="Center" MaxWidth="100" Stretch="Uniform" Source="{Binding Content}"/> 11 </Border> 12 </ControlTemplate> 13 <!--文件--> 14 <ControlTemplate x:Key="fileTemplate"> 15 <Border Background="#F8F8F8" Margin="5"> 16 <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center"> 17 <Image Height="30" Width="30" Stretch="Uniform" HorizontalAlignment="Center" VerticalAlignment="Center" Source="file.ico"/> 18 <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" Text="{Binding Content,Converter={StaticResource FilePathToNameConverter}}"/> 19 </StackPanel> 20 </Border> 21 </ControlTemplate>
接下来就是关键部分,我们需要把Style补全,如下:
1 <Style TargetType="ListBoxItem"> 2 <Style.Triggers> 3 <DataTrigger Binding="{Binding ItemType}" Value="text"> 4 <Setter Property="Template" Value="{StaticResource textTemplate}"></Setter> 5 </DataTrigger> 6 <DataTrigger Binding="{Binding ItemType}" Value="image"> 7 <Setter Property="Template" Value="{StaticResource imageTemplate}"></Setter> 8 </DataTrigger> 9 <DataTrigger Binding="{Binding ItemType}" Value="file"> 10 <Setter Property="Template" Value="{StaticResource fileTemplate}"></Setter> 11 </DataTrigger> 12 </Style.Triggers> 13 </Style>
此处显示指定了TargetType,对于其他类型控件也可通过key进行手动设置style。
TemplateSelector实现
该部分就简单描述一下,首先需要创建DataTemplateSelector的子类,顾名思义,该选择器仅能支持对DataTemplate的选择。
public class ItemTemplateSelector : DataTemplateSelector { public DataTemplate TextTemplate { get; set; } public DataTemplate ImageTemplate { get; set; } public DataTemplate FileTemplate { get; set; } public override DataTemplate SelectTemplate(object item, DependencyObject container) { var listitem = item as ListItem; if (listitem == null) return TextTemplate; switch (listitem.ItemType) { case itemtype.text: return TextTemplate; case itemtype.image: return ImageTemplate; case itemtype.file: return FileTemplate; } return base.SelectTemplate(item, container); } }
并在xaml的资源中添加datatemplate资源及DataTemplateSelector资源
<!--字符串--> <DataTemplate x:Key="textTemplate"> <Border Height="20" Margin="5" Background="#F8F8F8"> <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" Text="{Binding Content}"/> </Border> </DataTemplate> <!--图片--> <DataTemplate x:Key="imageTemplate"> <Border Background="#F8F8F8" Margin="5"> <Image MaxHeight="100" HorizontalAlignment="Center" VerticalAlignment="Center" MaxWidth="100" Stretch="Uniform" Source="{Binding Content}"/> </Border> </DataTemplate> <!--文件--> <DataTemplate x:Key="fileTemplate"> <Border Background="#F8F8F8" Margin="5"> <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center"> <Image Height="30" Width="30" Stretch="Uniform" HorizontalAlignment="Center" VerticalAlignment="Center" Source="file.ico"/> <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" Text="{Binding Content,Converter={StaticResource FilePathToNameConverter}}"/> </StackPanel> </Border> </DataTemplate> <local:ItemTemplateSelector x:Key="selector1" TextTemplate ="{StaticResource textTemplate}" ImageTemplate="{StaticResource imageTemplate}" FileTemplate="{StaticResource fileTemplate}"/>
完成该操作后只需对ListView设置ItemTemplateSelector即可。