這個帖子本來是不想寫的，但是感覺網上類似的也沒有，對于小白可能有點用，于是想著還是寫一下吧，
寫之前想說下，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的名字如圖是演示
這個是這個專案的原始碼地址，是微軟維護的
帖子寫到這就算是結束了，最后的最后當然是上我的demo的原始碼地址了，
這個是我的demo代碼，寫的有點丑大家將就下
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/1691.html
標籤：UWP