重寫TreeView，多層級節點下批量顯示圖片，圖片支持縮略圖和文件名列表切換，支持調用者動態匹配選中，支持外界拖入圖片並添加到對應節點下

1、先看下整體效果 2、前端代碼 1 <UserControl x:Class="iPIS.UI.Base.Tree.ImageTreeControl" 2 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 3 xml ...

1、先看下整體效果

2、前端代碼

  1 <UserControl x:Class="iPIS.UI.Base.Tree.ImageTreeControl"
  2              xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  3              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  4              xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
  5              xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
  6              xmlns:local="clr-namespace:iPIS.UI.Base.Tree"
  7              mc:Ignorable="d" 
  8              d:DesignHeight="45" d:DesignWidth="80">
  9     <UserControl.Resources>
 10         <ResourceDictionary>
 11             <ResourceDictionary.MergedDictionaries>
 12                 <ResourceDictionary Source="/iPIS.UI.Themes.Black;component/Base/Tree/VideoTreeControlImages.xaml"/>
 13             </ResourceDictionary.MergedDictionaries>
 14             <Style TargetType="TextBlock" x:Key="treename">
 15                 <Setter Property="Foreground" Value="{Binding RelativeSource={RelativeSource Mode=FindAncestor,AncestorType=local:ImageTreeControl},Path=ImageTreeControlFontColor}"></Setter>
 16                 <Setter Property="FontSize" Value="14"></Setter>
 17             </Style>
 18         </ResourceDictionary>
 19     </UserControl.Resources>
 20     <TreeView x:Name="tree" 
 21               ItemsSource="{Binding DataList}"
 22               Background="{Binding RelativeSource={RelativeSource Mode=FindAncestor,AncestorType=local:ImageTreeControl},Path=ImageTreeControlBackground}"
 23               >
 24         <TreeView.ItemTemplate>
 25             <HierarchicalDataTemplate ItemsSource="{Binding Children}">
 26                 <Grid Margin="-1 0 0 0"
 27                       Cursor="Hand"
 28                       Background="{Binding RelativeSource={RelativeSource Mode=FindAncestor,AncestorType=local:ImageTreeControl},Path=ImageTreeControlBackground}"
 29                       >
 30                     <StackPanel x:Name="Classify" Orientation="Horizontal">
 31                         <Image Source="{Binding IconSource}" 
 32                                Width="25" 
 33                                Height="25" 
 34                                VerticalAlignment="Center"
 35                                Margin="0 0 10 0"
 36                                ></Image>
 37                         <TextBlock Text="{Binding Text}" 
 38                                    VerticalAlignment="Center"
 39                                    Style="{StaticResource treename}">
 40                         </TextBlock>
 41                         <TextBlock Style="{StaticResource treename}"
 42                                    VerticalAlignment="Center"
 43                             >（</TextBlock>
 44                         <TextBlock Text="{Binding ImagesCount}"
 45                                    VerticalAlignment="Center"
 46                                    Style="{StaticResource treename}"
 47                                    ></TextBlock>
 48                         <TextBlock Style="{StaticResource treename}"
 49                                    VerticalAlignment="Center"
 50                             >）</TextBlock>
 51                     </StackPanel>
 52                     <!--縮略圖視圖-->
 53                     <ListBox x:Name="Image_slt" 
 54                              ItemsSource="{Binding Images}" 
 55                              Visibility="Collapsed"
 56                              Width="{Binding RelativeSource={RelativeSource Mode=FindAncestor,AncestorType=local:ImageTreeControl},Path=ThumbnailWidth}"
 57                              Background="Transparent"
 58                              Margin="-35 0 0 0"
 59                              >
 60                         <ListBox.Template>
 61                             <ControlTemplate TargetType="{x:Type ListBox}">
 62                                 <ScrollViewer VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Disabled">
 63                                     <WrapPanel Orientation="Horizontal" IsItemsHost="True"></WrapPanel>
 64                                 </ScrollViewer>
 65                             </ControlTemplate>
 66                         </ListBox.Template>
 67                         <ListBox.ItemTemplate>
 68                             <DataTemplate>
 69                                 <Border x:Name="border" 
 70                                         BorderBrush="{Binding RelativeSource={RelativeSource Mode=FindAncestor,AncestorType=local:ImageTreeControl},Path=ImageTreeControlImageBoderColor}" 
 71                                         Background="{Binding RelativeSource={RelativeSource Mode=FindAncestor,AncestorType=local:ImageTreeControl},Path=ImageTreeControlImageBoderColor}"
 72                                         BorderThickness="3"                            
 73                                         Width="{Binding RelativeSource={RelativeSource Mode=FindAncestor,AncestorType=local:ImageTreeControl},Path=ImageTreeControlImageWidth}" 
 74                                         Height="{Binding RelativeSource={RelativeSource Mode=FindAncestor,AncestorType=local:ImageTreeControl},Path=ImageTreeControlImageHeight}"
 75                                         >
 76                                     <Grid>
 77                                         <Image Source="{Binding ImageSource}"
 78                                                Width="{Binding RelativeSource={RelativeSource Mode=FindAncestor,AncestorType=local:ImageTreeControl},Path=ImageTreeControlImageWidth}" 
 79                                                Height="{Binding RelativeSource={RelativeSource Mode=FindAncestor,AncestorType=local:ImageTreeControl},Path=ImageTreeControlImageHeight}" 
 80                                                ></Image>
 81                                         <Image x:Name="icon" Visibility="Collapsed" Width="13" Height="14" Margin="-72 -50 0 0"></Image>
 82                                     </Grid>
 83                                 </Border>
 84                                 <DataTemplate.Triggers>
 85                                     <DataTrigger Binding="{Binding Type}" Value="1">
 86                                         <Setter TargetName="icon" Property="Visibility" Value="Visible"></Setter>
 87                                         <Setter TargetName="icon" Property="Source" Value="{StaticResource icon_kou}"></Setter>
 88                                     </DataTrigger>
 89                                     <DataTrigger Binding="{Binding Type}" Value="2">
 90                                         <Setter TargetName="icon" Property="Visibility" Value="Visible"></Setter>
 91                                         <Setter TargetName="icon" Property="Source" Value="{StaticResource icon_jiandao}"></Setter>
 92                                     </DataTrigger>
 93                                     <DataTrigger Binding="{Binding IsSelected}" Value="true">
 94                                         <Setter TargetName="border" 
 95                                                 Property="BorderBrush" 
 96                                                 Value="{Binding RelativeSource={RelativeSource Mode=FindAncestor,AncestorType=local:ImageTreeControl},Path=ImageTreeControlImageSelectedBoderColor}"
 97                                                 ></Setter>
 98                                     </DataTrigger>
 99                                     <Trigger Property="IsMouseOver" Value="true">
100                                         <Setter TargetName="border" 
101                                                 Property="BorderBrush" 
102                                                 Value="{Binding RelativeSource={RelativeSource Mode=FindAncestor,AncestorType=local:ImageTreeControl},Path=ImageTreeControlImageMouseOverBoderColor}"
103                                                 ></Setter>
104                                     </Trigger>
105                                 </DataTemplate.Triggers>
106                             </DataTemplate>
107                         </ListBox.ItemTemplate>
108                         <ListBox.ItemContainerStyle>
109                             <Style TargetType="ListBoxItem">
110                                 <Setter Property="Padding" Value="0"></Setter>
111                                 <Setter Property="BorderThickness" Value="0"></Setter>
112                                 <Setter Property="Margin" Value="1"></Setter>
113                             </Style>
114                         </ListBox.ItemContainerStyle>
115                     </ListBox>
116                     <!--文件名視圖-->
117                     <ListBox x:Name="Image_file" 
118                              ItemsSource="{Binding Images}"
119                              BorderThickness="0"
120                              Background="Transparent"
121                              Width="{Binding RelativeSource={RelativeSource Mode=FindAncestor,AncestorType=local:ImageTreeControl},Path=ListWidth}"
122                              Margin="-35 0 0 0"
123                              >
124                         <ListBox.ItemTemplate>
125                             <DataTemplate>
126                                 <TextBlock x:Name="text" 
127                                            Text="{Binding Text}"
128                                            Foreground="{Binding RelativeSource={RelativeSource Mode=FindAncestor,AncestorType=local:ImageTreeControl},Path=ImageTreeControlImageImgNameColor}"
129                                            ></TextBlock>
130                                 <DataTemplate.Triggers>
131                                     <DataTrigger Binding="{Binding IsSelected}" Value="true">
132                                         <Setter TargetName="text" 
133                                                 Property="Foreground" 
134                                                 Value="{Binding RelativeSource={RelativeSource Mode=FindAncestor,AncestorType=local:ImageTreeControl},Path=ImageTreeControlImageSelectedImgNameColor}"
135                                                 ></Setter>
136                                     </DataTrigger>
137                                 </DataTemplate.Triggers>
138                             </DataTemplate>
139                         </ListBox.ItemTemplate>
140                     </ListBox>
141                 </Grid>
142                 <HierarchicalDataTemplate.Triggers>
143                     <DataTrigger Binding="{Binding Type}" Value="0">
144                         <Setter TargetName="Classify" Property="Visibility" Value="Visible"></Setter>
145                         <Setter TargetName="Image_slt" Property="Visibility" Value="Collapsed"></Setter>
146                         <Setter TargetName="Image_file" Property="Visibility" Value="Collapsed"></Setter>
147                     </DataTrigger>
148                     <DataTrigger Binding="{Binding Type}" Value="1">
149                         <Setter TargetName="Classify" Property="Visibility" Value="Collapsed"></Setter>
150                     </DataTrigger>
151                     <MultiDataTrigger>
152                         <MultiDataTrigger.Conditions>
153                             <Condition Binding="{Binding Type}" Value="1"></Condition>
154                             <Condition Binding="{Binding RelativeSource={RelativeSource Mode=FindAncestor,AncestorType=local:ImageTreeControl},Path=ImageTreeControlViewState}" Value="0"></Condition>
155                         </MultiDataTrigger.Conditions>
156                         <Setter TargetName="Image_slt" Property="Visibility" Value="Collapsed"></Setter>
157                         <Setter TargetName="Image_file" Property="Visibility" Value="Visible"></Setter>
158                     </MultiDataTrigger>
159                     <MultiDataTrigger>
160                         <MultiDataTrigger.Conditions>
161                             <Condition Binding="{Binding Type}" Value="1"></Condition>
162                             <Condition Binding="{Binding RelativeSource={RelativeSource Mode=FindAncestor,AncestorType=local:ImageTreeControl},Path=ImageTreeControlViewState}" Value="1"></Condition>
163                         </MultiDataTrigger.Conditions>
164                         <Setter TargetName="Image_slt" Property="Visibility" Value="Visible"></Setter>
165                         <Setter TargetName="Image_file" Property="Visibility" Value="Collapsed"></Setter>
166                     </MultiDataTrigger>
167                 </HierarchicalDataTemplate.Triggers>
168 
169             </HierarchicalDataTemplate>
170         </TreeView.ItemTemplate>
171     </TreeView>
172 </UserControl>

View Code

3、控制項後臺代碼

  1 using iPIS.UI.Base.Model;
  2 using iPIS.UI.Base.ViewModel;
  3 using iPIS.Utility;
  4 using System;
  5 using System.Collections.Generic;
  6 using System.Linq;
  7 using System.Text;
  8 using System.Threading.Tasks;
  9 using System.Windows;
 10 using System.Windows.Controls;
 11 using System.Windows.Data;
 12 using System.Windows.Documents;
 13 using System.Windows.Input;
 14 using System.Windows.Media;
 15 using System.Windows.Media.Imaging;
 16 using System.Windows.Navigation;
 17 using System.Windows.Shapes;
 18 
 19 namespace iPIS.UI.Base.Tree
 20 {
 21     /// <summary>
 22     /// ImageTreeControl.xaml 的交互邏輯
 23     /// </summary>
 24     public partial class ImageTreeControl : UserControl
 25     {
 26         public ImageTreeControl()
 27         {
 28             InitializeComponent();
 29             var vm = new ImageTreeControlViewModel(this);
 30             this.DataContext = vm;
 31             this.PreviewDragOver += ImageTreeControl_PreviewDragOver;
 32             this.PreviewDrop += ImageTreeControl_PreviewDrop;
 33             this.SizeChanged += ImageTreeControl_SizeChanged;
 34 
 35             //預設樣式
 36             ImageTreeControlViewState = 1;
 37             ImageTreeControlImageWidth = 85;
 38             ImageTreeControlImageHeight = 65;
 39             ImageTreeControlBackground = "#36353a";
 40             ImageTreeControlFontColor = "#89888d";
 41             ImageTreeControlImageBoderColor = "#000000";
 42             ImageTreeControlImageSelectedBoderColor = "#019e97";
 43             ImageTreeControlImageMouseOverBoderColor = ImageTreeControlImageSelectedBoderColor;
 44             ImageTreeControlImageImgNameColor = ImageTreeControlFontColor;
 45             ImageTreeControlImageSelectedImgNameColor = ImageTreeControlImageSelectedBoderColor;
 46 
 47             //測試數據
 48             test();
 49         }
 50 
 51         /// <summary>
 52         /// 大小發送變化時
 53         /// </summary>
 54         /// <param name="sender"></param>
 55         /// <param name="e"></param>
 56         private void ImageTreeControl_SizeChanged(object sender, SizeChangedEventArgs e)
 57         {
 58             ThumbnailWidth = (int)this.Width - 10;
 59             ListWidth = (int)this.Width - 25;
 60         }
 61 
 62         private void test()
 63         {
 64             //模擬數據
 65             var list = new Client.WebApiWrap.PVL.FileCategoryApiWrap().GetFileCategoryList("ac165316-6630-40ba-84bb-fba75475d713", 2, 2, -1, 1);
 66             var datas = new List<ImageTreeControlItemModel>();
 67             for (int j = 0; j < list.Count; j++)
 68             {
 69                 var item = list[j];
 70                 ImageTreeControlItemModel root = new ImageTreeControlItemModel();
 71                 root.Text = item.CategoryName;
 72                 root.Value = item;
 73                 root.Images = new List<ImageTreeControlImageModel>();
 74                 for (int i = 0; i < 10; i++)
 75                 {
 76                     root.Images.Add(new ImageTreeControlImageModel()
 77                     {
 78                         ImageSource = new BitmapImage(new Uri(PublicMethod.GetSet("Web") + "/images/defaut.png")),
 79                         Text = "我是名稱"
 80                     });
 81                 }
 82                 if (j == list.Count - 1)
 83                 {
 84                     ImageTreeControlItemModel m = new ImageTreeControlItemModel();
 85                     m.Text = "我是第二級";
 86                     m.Images = new List<ImageTreeControlImageModel>();
 87                     for (int i = 0; i < 10; i++)
 88                     {
 89                         m.Images.Add(new ImageTreeControlImageModel()
 90                         {
 91                             ImageSource = new BitmapImage(new Uri(PublicMethod.GetSet("Web") + "/images/defaut.png")),
 92                             Text = "我是第二級的圖片"
 93                         });
 94                     }
 95                     root.Children = new List<ImageTreeControlItemModel>() { m };
 96                 }
 97                 datas.Add(root);
 98             }