UWP使用TreeView

這個帖子原本是不想寫的，可是感受網上相似的也沒有，對於小白可能有點用，因而想着仍是寫一下吧。

寫以前想說下，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代碼，寫的有點醜你們將就下