小能豆

WPF树形结构

javascript

我要在wpf中实现树形层级结构但是头部标题和下方的树节点的详细信息对不上 我想要层级打开的文件信息都与头部标题各列对齐应该怎么实现呢?


阅读 54

收藏
2024-06-11

共1个答案

小能豆

要使树形层级结构的详细信息与头部标题对齐,可以使用Grid布局将每一列的信息与头部标题对齐。为此,我们需要确保TreeViewItem的每一列宽度与头部标题的列宽度一致。

修改后的WPF布局示例

<Grid Margin="0,8,0,8">
    <!-- 页面整体分两列 -->
    <Grid.ColumnDefinitions>
        <ColumnDefinition />
        <ColumnDefinition Width="86" />
    </Grid.ColumnDefinitions>
    <!-- 第一列 程序管理主页面 -->
    <Grid Grid.Column="0">
        <Grid.RowDefinitions>
            <RowDefinition Height="48" />
            <RowDefinition Height="274" />
            <RowDefinition Height="2" />
            <RowDefinition Height="274" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>

        <!-- 顶栏 -->
        <Border Grid.Row="0" Margin="8,0,8,0" Background="#FFFFFF" BorderBrush="#D1D6E0" BorderThickness="1,1,1,0" CornerRadius="4 4 0 0">
            <Grid Margin="4,4,4,4">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="2*" />
                    <ColumnDefinition Width="8*" />
                    <ColumnDefinition Width="86" />
                    <ColumnDefinition Width="50" />
                    <ColumnDefinition Width="60" />
                    <ColumnDefinition Width="80" />
                    <ColumnDefinition Width="80" />
                    <ColumnDefinition Width="60" />
                    <ColumnDefinition Width="40" />
                </Grid.ColumnDefinitions>
                <TextBlock Grid.Column="0" VerticalAlignment="Center" FontSize="16" Foreground="#385278" Text="文件夹" TextAlignment="Center" />
                <TextBlock Grid.Column="1" VerticalAlignment="Center" FontSize="16" Foreground="#385278" Text="EXT." TextAlignment="Center" />
                <TextBlock Grid.Column="2" VerticalAlignment="Center" FontSize="16" Foreground="#385278" Text="大小" TextAlignment="Center" />
                <TextBlock Grid.Column="3" VerticalAlignment="Center" FontSize="16" Foreground="#385278" Text="文件" TextAlignment="Center" />
                <TextBlock Grid.Column="4" VerticalAlignment="Center" FontSize="16" Foreground="#385278" Text="备注" TextAlignment="Center" />
                <TextBlock Grid.Column="5" VerticalAlignment="Center" FontSize="16" Foreground="#385278" Text="修改" TextAlignment="Center" />
                <TextBlock Grid.Column="6" VerticalAlignment="Center" FontSize="16" Foreground="#385278" Text="存储" TextAlignment="Center" />
                <TextBlock Grid.Column="7" VerticalAlignment="Center" FontSize="16" Foreground="#385278" Text="属性" TextAlignment="Center" />
            </Grid>
        </Border>

        <!-- PC区树状目录结构 -->
        <Border Grid.Row="1" Margin="8,0,8,0" Background="#FFFFFF" BorderBrush="#33375278" BorderThickness="1,1,1,0">
            <Border.Effect>
                <DropShadowEffect BlurRadius="10" Direction="315" Opacity="0.2" ShadowDepth="2" Color="#377484" />
            </Border.Effect>
            <TreeView x:Name="PCtree" Height="273" VerticalAlignment="Bottom" ItemContainerStyle="{StaticResource TreeViewItemStyle}" ItemsSource="{Binding PCModels}">
                <TreeView.Resources>
                    <local:FileFolderTemplateSelector x:Key="FileFolderTemplateSelector" DirectoryDataTemplate="{StaticResource DirectoryDataTemplate}" FileDataTemplate="{StaticResource FileDataTemplate}" />
                </TreeView.Resources>
                <TreeView.ItemTemplateSelector>
                    <StaticResource ResourceKey="FileFolderTemplateSelector" />
                </TreeView.ItemTemplateSelector>
            </TreeView>
        </Border>

        <!-- 文件详细信息模板 -->
        <HierarchicalDataTemplate x:Key="FileDataTemplate" DataType="{x:Type local:PCModel}" ItemsSource="{Binding Children}">
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="2*" />
                    <ColumnDefinition Width="8*" />
                    <ColumnDefinition Width="86" />
                    <ColumnDefinition Width="50" />
                    <ColumnDefinition Width="60" />
                    <ColumnDefinition Width="80" />
                    <ColumnDefinition Width="80" />
                    <ColumnDefinition Width="60" />
                    <ColumnDefinition Width="40" />
                </Grid.ColumnDefinitions>
                <StackPanel Grid.Column="0" Margin="2" Orientation="Horizontal">
                    <Image Width="16" Height="16" Margin="10,6" Source="{DynamicResource FileDocumentIcon}" Stretch="Uniform" />
                    <TextBlock Margin="0,1,0,0" FontSize="14" Foreground="#375278" Text="{Binding Name}" />
                </StackPanel>
                <TextBlock Grid.Column="1" Margin="20,0,0,0" FontSize="14" Foreground="#375278" Text="{Binding FileDetail.PCFileExt}" />
                <TextBlock Grid.Column="2" Margin="20,0,0,0" FontSize="14" Foreground="#375278" Text="{Binding FileDetail.PCFileSize}" />
                <TextBlock Grid.Column="3" Margin="20,0,0,0" FontSize="14" Foreground="#375278" Text="{Binding FileDetail.PCNCFileName}" />
                <TextBlock Grid.Column="4" Margin="20,0,0,0" FontSize="14" Foreground="#375278" Text="{Binding FileDetail.PCFileComment}" />
                <TextBlock Grid.Column="5" Margin="20,0,0,0" FontSize="14" Foreground="#375278" Text="{Binding FileDetail.PCFileModify}" />
                <TextBlock Grid.Column="6" Margin="20,0,0,0" FontSize="14" Foreground="#375278" Text="{Binding FileDetail.PCFileStorage}" />
                <TextBlock Grid.Column="7" Margin="20,0,0,0" FontSize="14" Foreground="#375278" Text="{Binding FileDetail.PCFileAttributes}" />
            </Grid>
        </HierarchicalDataTemplate>
    </Grid>
</Grid>

关键修改点

  1. 统一列定义:在顶栏和文件详细信息的模板中使用相同的Grid.ColumnDefinitions,确保每一列的宽度一致。
  2. 调整StackPanel:将顶栏的TextBlock控件放置在Grid的列中,而不是使用StackPanel,这样每一列的信息能够对齐。

这样,通过确保顶栏和树状目录项使用相同的列定义,信息能够正确对齐。

2024-06-11