WPF TreeView 繫結不同物件的使用方法
阿新 • • 發佈：2021-10-26
關鍵在於 HierarchicalDataTemplate模板的使用
先看效果
xaml介面
1 <Window 2 x:Class="Xml資料展示.MainWindow" 3 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 4 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 5 xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 6 xmlns:local="clr-namespace:Xml資料展示" 7 xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 8 Title="MainWindow" 9 Width="800" 10 Height="450" 11 mc:Ignorable="d"> 12 <Window.Resources> 13 <XmlDataProvider 14 x:Key="xml" 15 Source="./DataContent.xml" 16 XPath="/Company/Client" /> 17 <local:XmlConverter x:Key="XmlConverter" /> 18 </Window.Resources> 19 <Grid> 20 <Grid.ColumnDefinitions> 21 <ColumnDefinition Width="3*" /> 22 <ColumnDefinition Width="8*" /> 23 </Grid.ColumnDefinitions> 24<TreeView x:Name="tree"> 25 <TreeView.Resources> 26 <!--層級控制元件模板，有多少個子節點型別，就對應多少個模板--> 27 <!-- Brands型別的控制元件模板 --> 28 <HierarchicalDataTemplate DataType="{x:Type local:Country}" ItemsSource="{Binding Path=Brands}"> 29 <StackPanel Orientation="Horizontal"> 30 <Rectangle Width="30" Height="15"> 31 <Rectangle.Fill> 32 <ImageBrush ImageSource="{Binding Flag}" /> 33 </Rectangle.Fill> 34 </Rectangle> 35 <TextBlock Margin="5,0" Text="{Binding Name}" /> 36 </StackPanel> 37 </HierarchicalDataTemplate> 38 <!-- Car型別的控制元件模板 --> 39 <HierarchicalDataTemplate DataType="{x:Type local:Brand}" ItemsSource="{Binding Cars}"> 40 <StackPanel Orientation="Horizontal"> 41 <Rectangle Width="30" Height="15"> 42 <Rectangle.Fill> 43 <ImageBrush ImageSource="{Binding Icon}" /> 44 </Rectangle.Fill> 45 </Rectangle> 46 <TextBlock Text="{Binding Name}" /> 47 </StackPanel> 48 </HierarchicalDataTemplate> 49 <HierarchicalDataTemplate DataType="{x:Type local:Car}"> 50 <TextBlock Text="{Binding Name}" /> 51 </HierarchicalDataTemplate> 52 </TreeView.Resources> 53 <TreeViewItem x:Name="item" Header="汽車資訊" /> 54 </TreeView> 55 <Grid Margin="5" Grid.Column="1" DataContext="{Binding Path=SelectedItem, ElementName=tree, Converter={local:CarConverter}}"> 56 <Grid.RowDefinitions> 57 <RowDefinition Height="8*" /> 58 <RowDefinition Height="2*" /> 59 </Grid.RowDefinitions> 60 <Viewbox Grid.Row="0"> 61 <Image Source="{Binding Image}" Stretch="Fill" /> 62 </Viewbox> 63 <StackPanel Grid.Row="1" Orientation="Horizontal"> 64 <StackPanel Width="100" Orientation="Horizontal"> 65 <TextBlock Text="名字：" /> 66 <TextBlock Text="{Binding Name}" /> 67 </StackPanel> 68 <StackPanel Width="100" Orientation="Horizontal"> 69 <TextBlock Text="顏色：" /> 70 <TextBlock Text="{Binding Color}" /> 71 </StackPanel> 72 <StackPanel Width="100" Orientation="Horizontal"> 73 <TextBlock Text="速度：" /> 74 <TextBlock Text="{Binding Speed}" /> 75 </StackPanel> 76 <StackPanel Width="100" Orientation="Horizontal"> 77 <TextBlock Text="出廠日期：" /> 78 <TextBlock Text="{Binding Pubdate}" /> 79 </StackPanel> 80 </StackPanel> 81 </Grid> 82 </Grid> 83 </Window>
後臺
1 using System; 2 using System.Collections.Generic; 3 using System.Globalization; 4 using System.Windows; 5 using System.Windows.Controls; 6 using System.Windows.Data; 7 using System.Windows.Markup; 8 9 namespace Xml資料展示 10 { 11 public class Brand 12 { 13 public List<Car> Cars { get; set; } 14 15 public Uri Icon { get; set; } 16 17 public string Name { get; set; } 18 } 19 20 public class Car 21 { 22 public string Color { get; set; } 23 24 public Uri Image { get; set; } 25 26 public string Name { get; set; } 27 28 public DateTime Pubdate { get; set; } 29 30 public double Speed { get; set; } 31 } 32 33 /// <summary> 34 /// 標記擴充套件 35 /// </summary> 36 public class CarConverter : MarkupExtension, IValueConverter 37 { 38 public object Convert(object value, Type targetType, object parameter, CultureInfo culture) 39 { 40 if (value is Country || value is Brand) 41 { 42 return new Car() 43 { 44 Name = "無", 45 Color = "無", 46 Image = new Uri("Assets/空白.jpeg", UriKind.Relative), 47 Speed = 0, 48 Pubdate = DateTime.Today, 49 }; 50 } 51 var car = value as Car; 52 return car; 53 } 54 55 public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture) 56 { 57 throw new NotImplementedException(); 58 } 59 60 public override object ProvideValue(IServiceProvider serviceProvider) 61 { 62 return this; 63 } 64 } 65 66 public class CarInfo 67 { 68 public List<Country> Countries { get; set; } 69 70 public CarInfo() 71 { 72 Countries = new List<Country>() 73 { 74 new Country() 75 { 76 Name="中國", 77 Flag=new Uri("Assets/國旗/中國國旗.png",UriKind.Relative), 78 Brands=new List<Brand>() 79 { 80 new Brand() 81 { 82 Name="北汽", 83 Icon=new Uri("Assets/品牌/北汽.png",UriKind.Relative), 84 Cars=new List<Car>() 85 { 86 new Car() 87 { 88 Name="EV160", 89 Color="白色", 90 Speed=80, 91 Pubdate=new DateTime(2016,10,10), 92 Image=new Uri("/Assets/汽車/北汽.jpeg",UriKind.Relative) 93 }, 94 } 95 }, 96 new Brand() 97 { 98 Name="蔚來", 99 Icon=new Uri("Assets/品牌/蔚來.png",UriKind.Relative), 100 Cars=new List<Car>() 101 { 102 new Car() 103 { 104 Name="SDA", 105 Color="紅", 106 Speed=80, 107 Pubdate=new DateTime(2016,10,10), 108 Image=new Uri("Assets/汽車/蔚來.jpeg",UriKind.Relative) 109 }, 110 } 111 }, 112 new Brand() 113 { 114 Name="比亞迪", 115 Icon=new Uri("Assets/品牌/比亞迪.png",UriKind.Relative), 116 Cars=new List<Car>() 117 { 118 new Car() 119 { 120 Name="MMG", 121 Color="白色", 122 Speed=80, 123 Pubdate=new DateTime(2016,10,10), 124 Image=new Uri("Assets/汽車/比亞迪.jpeg",UriKind.Relative) 125 }, 126 } 127 } 128 } 129 }, 130 new Country() 131 { 132 Name="德國", 133 Flag=new Uri("Assets/國旗/德國國旗.png",UriKind.Relative), 134 Brands=new List<Brand>() 135 { 136 new Brand() 137 { 138 Name="賓士", 139 Icon=new Uri("Assets/品牌/賓士.png",UriKind.Relative), 140 Cars=new List<Car>() 141 { 142 new Car() 143 { 144 Name="EV160", 145 Color="白色", 146 Speed=80, 147 Pubdate=new DateTime(2016,10,10), 148 Image=new Uri("/Assets/汽車/賓士.jpeg",UriKind.Relative) 149 }, 150 } 151 }, 152 new Brand() 153 { 154 Name="寶馬", 155 Icon=new Uri("Assets/品牌/寶馬.png",UriKind.Relative), 156 Cars=new List<Car>() 157 { 158 new Car() 159 { 160 Name="SDA", 161 Color="紅", 162 Speed=80, 163 Pubdate=new DateTime(2016,10,10), 164 Image=new Uri("Assets/汽車/寶馬.jpeg",UriKind.Relative) 165 }, 166 } 167 }, 168 } 169 }, 170 new Country() 171 { 172 Name="日本", 173 Flag=new Uri("Assets/國旗/日本國旗.png",UriKind.Relative), 174 Brands=new List<Brand>() 175 { 176 new Brand() 177 { 178 Name="本田", 179 Icon=new Uri("Assets/品牌/本田.png",UriKind.Relative), 180 Cars=new List<Car>() 181 { 182 new Car() 183 { 184 Name="EV160", 185 Color="白色", 186 Speed=80, 187 Pubdate=new DateTime(2016,10,10), 188 Image=new Uri("/Assets/汽車/本田.jpeg",UriKind.Relative) 189 }, 190 } 191 }, 192 new Brand() 193 { 194 Name="豐田", 195 Icon=new Uri("Assets/品牌/豐田.png",UriKind.Relative), 196 Cars=new List<Car>() 197 { 198 new Car() 199 { 200 Name="SDA", 201 Color="紅", 202 Speed=80, 203 Pubdate=new DateTime(2016,10,10), 204 Image=new Uri("Assets/汽車/豐田.jpeg",UriKind.Relative) 205 }, 206 } 207 }, 208 } 209 } 210 }; 211 } 212 } 213 214 public class Country 215 { 216 public List<Brand> Brands { get; set; } 217 218 public Uri Flag { get; set; } 219 220 public string Name { get; set; } 221 } 222 223 /// <summary> 224 /// MainWindow.xaml 的互動邏輯 225 /// </summary> 226 public partial class MainWindow : Window 227 { 228 public MainWindow() 229 { 230 InitializeComponent(); 231 var info = new CarInfo(); 232 item.ItemsSource = info.Countries; 233 } 234 } 235 }