WPF动态模板选择的两种实现

　 前言

    　.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即可。

 

转载于:https://www.cnblogs.com/chenchaochao034/p/10786915.html