這個帖子本來是不想寫的，但是感覺網上類似的也沒有，對於小白可能有點用，於是想着還是寫一下吧。
寫之前想說下，UWP其實並沒有死掉，對於win10來說，以后的新設備肯定是支持UWP的，而且微軟一直在完善win10所以做dotnet的同學可以偶爾玩玩UWP，像我就是，技術不咋地，但偶爾還會玩玩。
言歸正傳，這個treeview控件之前在1809前的版本是沒有的，而且大家都唱衰uwp所以用uwp的人也很少，以至於這個控件也很少有人用。
我用這個控件主要是用來作為目錄選項用的，我開發了一個第三方的Zaker這個資訊app，這個app算是我練手項目吧。
大家商店搜索zaker，帶uwp的應該就是我的了。我就不放鏈接了，下面是圖片。
最有邊的就是treeview，大家感覺怎么樣呢？
好了，首先我們要新建個UWP項目，空白的就行。新建完我們就需要安裝一個庫了。這個是Microsoft.UI.Xaml這個庫是微軟開源的winui，從名字能看出，Microsoft.UI.Xaml和Windows.UI.Xaml很像，是的，微軟打算將UWP的UI和運行時分開維護，這樣Winui也可以快速迭代了。
這個是WinUI源碼的地址
下面是項目的結構圖。
很簡單的一個demo，我們要在mainpage准備一個Treeview控件，和三個數據模板，用來匹配treeview的不同級別的樣式，比如一級的時候有圖片和文字，而里面的沒有圖片只有文字。
在page的.resources里添加數據模板和模板選擇器。
<Page.Resources>
<DataTemplate x:Key="FolderTemplate"
x:DataType="data:Son">
<muxcontrols:TreeViewItem AutomationProperties.Name="{Binding title}"
ItemsSource="{Binding sons}"
Width="400"
IsExpanded="False">
<StackPanel Orientation="Horizontal">
<Image Width="28" Source="{Binding list_icon}"/>
<TextBlock Margin="0,0,10,0"/>
<TextBlock Text="{Binding title}" FontSize="28"/>
</StackPanel>
</muxcontrols:TreeViewItem>
</DataTemplate>
<DataTemplate x:Key="FolderTemplate1"
x:DataType="data:Son">
<muxcontrols:TreeViewItem AutomationProperties.Name="{Binding title}"
ItemsSource="{Binding sons}"
Width="360"
IsExpanded="False">
<StackPanel Orientation="Horizontal">
<TextBlock Margin="0,0,10,0" />
<TextBlock Text="{Binding title}"
FontSize="28" />
</StackPanel>
</muxcontrols:TreeViewItem>
</DataTemplate>
<DataTemplate x:Key="FileTemplate"
x:DataType="data:Son">
<muxcontrols:TreeViewItem AutomationProperties.Name="{Binding title}"
Width="320"
IsExpanded="False">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="80"/>
<ColumnDefinition Width="auto"/>
</Grid.ColumnDefinitions>
<StackPanel Orientation="Horizontal"
Width="320"
Grid.Column="1">
<TextBlock Margin="0,0,10,0" />
<TextBlock Text="{Binding title}"
FontSize="24" />
</StackPanel>
<Button Command="{Binding SwitchThemeCommand }"
CommandParameter="{Binding}"
HorizontalAlignment="Right"
Grid.Column="0"
Background="Transparent"
CornerRadius="4"
Content="{x:Bind BtnText,Mode=TwoWay}" />
</Grid>
</muxcontrols:TreeViewItem>
</DataTemplate>
<local:ExplorerItemTemplateSelector
x:Key="ExplorerItemTemplateSelector"
FolderTemplate="{StaticResource FolderTemplate}"
FileTemplate="{StaticResource FileTemplate}"
FolderTemplate1="{StaticResource FolderTemplate1}" />
</Page.Resources>
還有一個模板選擇器 這個模板選擇器，大家如果有做過wpf應該能知道，我也沒有深入了解，簡單里的理解 就是一個類，然后根本數據本身的結構返回不同的模板，這樣可以根據數據進行適當的展示。
public class ExplorerItemTemplateSelector : DataTemplateSelector
{
public DataTemplate FolderTemplate { get; set; }
public DataTemplate FolderTemplate1 { get; set; }
public DataTemplate FileTemplate { get; set; }
protected override DataTemplate SelectTemplateCore(object item)
{
var explorerItem = (Son)item;
//var explorerItem = explorer.Content as Son;
if (!string.IsNullOrEmpty(explorerItem.list_icon))
{
return FolderTemplate;
}
else if (string.IsNullOrEmpty(explorerItem.list_icon) && explorerItem.sons != null && explorerItem.sons.Count > 0)
{
return FolderTemplate1;
}
else
{
return FileTemplate;
}
// return FolderTemplate;
// return explorerItem.sons!=null ? FolderTemplate : FileTemplate;
}
}
准備好了數據模板，就差這個treeview本尊了，下面上代碼：
<Grid>
<muxcontrols:TreeView Name="TreeView1"
Margin="0,12,0,0"
Width="800"
HorizontalAlignment="Center"
VerticalAlignment="Top"
SelectionMode="None"
ItemTemplateSelector="{StaticResource ExplorerItemTemplateSelector}"
>
</muxcontrols:TreeView>
</Grid>
有的同學肯定會疑惑這個muxcontrols是個什么玩意，其實就一個引入命名空間的表示，下面里就能看出來。
大家看了上面的動圖，可能會有疑問，這個已訂閱的ui更新是怎么實現的，然后這個事件是怎么觸發的，大家在數據模板里，應該能看到一個綁定的指令。
在后台的屬性里有個繼承了INotifyPropertyChanged的類，在里面有個指令綁定，大家看代碼
private ICommand _switchThemeCommand;
public ICommand SwitchThemeCommand
{
get
{
if (_switchThemeCommand == null)
{
_switchThemeCommand = new RelayCommand<Son>(
(param) =>
{
var par = param as Son;
IsAdded = !IsAdded;
if (isAdded == true)
{
}
else
{
}
BtnText = "已添加o";
// ElementTheme = param;
// await ThemeSelectorService.SetThemeAsync(param);
});
}
return _switchThemeCommand;
}
}
大家可以在這里面處理一些邏輯，具體的大家可以搜搜這個按鈕綁定指令的用法。
treeview商店有個官方的app是展示demo
Xaml-Controls-Gallery是app的名字如圖是演示
