WPF 由TreeView想到的 DataTemplate,HierarchicalDataTemplate

发布时间 2023-08-13 21:18:56作者: JohnYang819

DataTemplate简而言之,解决的就是后台代码中的类以怎么样的形式展现在xaml前台代码中的问题。
所以DataTemplate一般都要指定DataType,一般放在resource中,而HierarchicalDataTemplate是一种特殊的DataTemplate,
它指定一个ItemsSource,当自身属性是列表时,有次序的在前台展示下去。
以下是一个简单的Demo

<Window x:Class="EB_Func_DB.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:EB_Func_DB"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Window.Resources>
        <HierarchicalDataTemplate DataType="{x:Type local:Module}" 
                                  ItemsSource="{Binding SubModules}">
            <TextBlock Text="{Binding Path=Name}">
                <TextBlock.ContextMenu>
                    <ContextMenu>
                        <MenuItem Header="添加子模块" Click="MenuItem_Click_2"  CommandParameter="{Binding}"/>
                        <MenuItem Header="删除模块" Click="MenuItem_Click_1" CommandParameter="{Binding}"/>
                    </ContextMenu>
                </TextBlock.ContextMenu>
            </TextBlock>
        </HierarchicalDataTemplate>
        <HierarchicalDataTemplate DataType="{x:Type local:SubModule}"
                                  ItemsSource="{Binding PlugInFuncs}">
            <TextBlock Text="{Binding Path=Name}">
                <TextBlock.ContextMenu>
                    <ContextMenu>
                        <MenuItem Header="添加功能" Click="MenuItem_Click_4" CommandParameter="{Binding}" />
                        <MenuItem Header="删除子模块" Click="MenuItem_Click_3" CommandParameter="{Binding}" />
                    </ContextMenu>
                </TextBlock.ContextMenu>
            </TextBlock>
        </HierarchicalDataTemplate>
        <HierarchicalDataTemplate DataType="{x:Type local:PlugInFunc}">
            <TextBlock Text="{Binding Path=FuncName}">
                <TextBlock.ContextMenu>
                    <ContextMenu >
                        <MenuItem Header="添加功能" Click="MenuItem_Click_4" CommandParameter="{Binding}"/>
                        <MenuItem Header="删除功能" Click="MenuItem_Click_5" CommandParameter="{Binding}"/>
                    </ContextMenu>
                </TextBlock.ContextMenu>
            </TextBlock>
        </HierarchicalDataTemplate>
        
    </Window.Resources>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="30"/>
            <RowDefinition Height="30"/>
            <RowDefinition/>
            <RowDefinition/>
            <RowDefinition Height="30"/>
        </Grid.RowDefinitions>
        <Grid Grid.Row="0">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="80"/>
                <ColumnDefinition Width="100"/>
                <ColumnDefinition/>
            </Grid.ColumnDefinitions>
            <TextBlock Grid.Column="0" Text="专业:" VerticalAlignment="Center" HorizontalAlignment="Center"/>
            <ComboBox x:Name="majorComBox" Grid.Column="1" VerticalAlignment="Center" HorizontalAlignment="Center" Width="95" Margin="2"/>
        </Grid>
        <Grid Grid.Row="1">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="80"/>
                <ColumnDefinition Width="200"/>
                <ColumnDefinition Width="35"/>
                <ColumnDefinition Width="45"/>
                <ColumnDefinition/>
            </Grid.ColumnDefinitions>
            <TextBlock Grid.Column="0" Text="插件路径:" VerticalAlignment="Center" HorizontalAlignment="Center"/>
            <TextBlock Grid.Column="1" x:Name="pathTextBox" VerticalAlignment="Center" HorizontalAlignment="Center" Text="unselected" Foreground="Gray" Width="195" Margin="2"/>
            <Button Grid.Column="2" x:Name="pathBtn" VerticalAlignment="Center" HorizontalAlignment="Center" Content="···" Click="pathBtn_Click" Width="30" Margin="2"/>
        </Grid>
        <DataGrid Grid.Row="2" x:Name="funcDataGrid" AutoGenerateColumns="False" CanUserAddRows="False" 
                  CanUserDeleteRows="False" CanUserSortColumns="False" RowHeaderWidth="0"
                  MouseDoubleClick="funcDataGrid_MouseDoubleClick"
                  >
            <DataGrid.ColumnHeaderStyle>
                <Style TargetType="DataGridColumnHeader">
                    <Setter Property="HorizontalContentAlignment" Value="Center"></Setter>
                    <Setter Property="VerticalContentAlignment" Value="Center"></Setter>
                </Style>
            </DataGrid.ColumnHeaderStyle>
            <DataGrid.Columns>
                <DataGridCheckBoxColumn Header="是否加入数据库" Binding="{Binding Checked}">

                </DataGridCheckBoxColumn>
                <DataGridTextColumn Header="名称" Binding="{Binding Path=Name}" IsReadOnly="True">

                </DataGridTextColumn>
                <DataGridTextColumn Header="描述" Binding="{Binding  Path=Describe}" IsReadOnly="True">

                </DataGridTextColumn>
                <DataGridTextColumn Header="是否在数据库" Binding="{Binding Path=Info}" IsReadOnly="True">

                </DataGridTextColumn>
            </DataGrid.Columns>
        </DataGrid>
        <TreeView Grid.Row="3" x:Name="treeView" 
                  >
            <TreeView.ItemContainerStyle>
                <Style TargetType="TreeViewItem">
                    <Setter Property="IsExpanded" Value="True" />
                </Style>
            </TreeView.ItemContainerStyle>
            <TreeView.ContextMenu>
                <ContextMenu>
                    <MenuItem Header="增加模块" Click="MenuItem_Click"/>
                </ContextMenu>
            </TreeView.ContextMenu>
        </TreeView>
        <Button Grid.Row="4" x:Name="ok" Content="确定" Click="ok_Click"/>
    </Grid>
</Window>