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

  • 相关阅读:
    DOM_节点操作创建表格
    表单提交
    HTML常用标签
    网络通讯详解
    java===TCP(多线程多客户端同时上传字节数据:图片为例)
    java===TCP(文件上传功能)
    java===UDP
    java==IO=随机读写文件
    git中的基本命令
    ansible中roles的简单使用
  • 原文地址:https://www.cnblogs.com/chenchaochao034/p/10786915.html
Copyright © 2020-2023  润新知