其他分享
首页 > 其他分享> > WPF动态模板选择的两种实现

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

 

标签:case,控件,return,public,DataTemplateSelector,DataTemplate,动态,WPF,模板
来源: https://www.cnblogs.com/chenchaochao034/p/10786915.html