我要在wpf中实现树形层级结构但是头部标题和下方的树节点的详细信息对不上 我想要层级打开的文件信息都与头部标题各列对齐应该怎么实现呢?
要使树形层级结构的详细信息与头部标题对齐,可以使用Grid布局将每一列的信息与头部标题对齐。为此,我们需要确保TreeViewItem的每一列宽度与头部标题的列宽度一致。
Grid
TreeViewItem
<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>
Grid.ColumnDefinitions
TextBlock
StackPanel
这样,通过确保顶栏和树状目录项使用相同的列定义,信息能够正确对齐。