WPF TreeView ItemTemplate 对齐答案

【问题标题】：WPF TreeView ItemTemplate alighmentsWPF TreeView ItemTemplate 对齐
【发布时间】：2016-05-25 09:42:21
【问题描述】：

我已经使用标准 wpf 控件创建了自己的带有多列标题的树视图

停靠面板
DataGrid ，仅用于创建列并具有排序和调整大小的功能。 datagrid 的高度只有 25 ，这里我们只需要显示列而不是数据。
具有层次结构的 TreeView 控件

我添加图像只是为了了解问题和 XAML 代码

无论“第一列”展开多少级，帐户类型都应始终在左侧对齐

在 TreeViewItemTemplate 的 xaml 中的某个地方我失去了这个想法。任何人都可以帮我修复对齐方式

<DockPanel DataContext="{StaticResource cust}">
    <Button Command="{Binding rld}" Content="reload" DockPanel.Dock="Top"/>
    <!--Unbound DataGrid just to display the headers-->
    <DataGrid Height="25" DockPanel.Dock="Top" ItemsSource="{Binding Customers}" AutoGenerateColumns="False" Margin="0,0,0,0">
        <DataGrid.Columns>
            <DataGridTextColumn Binding="{Binding Name}" Header="Name" x:Name="col0"></DataGridTextColumn>
            <DataGridTextColumn Binding="{Binding AccountType}" Header="Account Type" x:Name="col1"></DataGridTextColumn>
        </DataGrid.Columns>
    </DataGrid>
    <!--Actual Binding with Tree View and item Template to display the properties-->
    <TreeView  ItemsSource="{Binding Customers}" DockPanel.Dock="Top">
        <TreeView.ItemTemplate>
            <HierarchicalDataTemplate ItemsSource="{Binding rel}">
                <Grid  HorizontalAlignment="Stretch">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="{Binding ElementName=col0,Path=ActualWidth}"></ColumnDefinition>
                        <ColumnDefinition Width="{Binding ElementName=col1,Path=ActualWidth}" ></ColumnDefinition>
                    </Grid.ColumnDefinitions>
                    <TextBlock  Grid.Column="0" Text="{Binding Name}" VerticalAlignment="Center"/>
                    <TextBlock  Grid.Column="1" Text="{Binding AccountType}"  VerticalAlignment="Center" />
                </Grid>
            </HierarchicalDataTemplate>
        </TreeView.ItemTemplate>
    </TreeView>
</DockPanel>

【问题讨论】：

标签： wpf header treeview

【解决方案1】：

TreeView 自然会缩进子项，因此您看到的内容很正常。

一种可能的解决方法是在 AccountType TextBlock 中设置一个负的左边距，并使用相同的缩进值，从而消除差距。只有在其父级展开时才需要应用它。这可以很容易地修改您的视图模型。

<TextBlock  Grid.Column="1"  Margin="{Binding marginPropertyInVM}" Text="{Binding AccountType}"  VerticalAlignment="Center"/>

【讨论】：

【解决方案2】：

您可以通过将模板网格列定义更改为来限制第一列的大小：

<Grid  HorizontalAlignment="Stretch">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"></ColumnDefinition>
        <ColumnDefinition Width="{Binding ElementName=col1,Path=ActualWidth}" ></ColumnDefinition>
    </Grid.ColumnDefinitions>
    <TextBlock  Grid.Column="0" Text="{Binding Name}" VerticalAlignment="Center"/>
    <TextBlock  Grid.Column="1" Text="{Binding AccountType}"  VerticalAlignment="Center" />
</Grid>

这样，一旦第二列和缩进被分配了它们的空间，第一列将只允许剩余宽度。

【讨论】：

@user2160275 啊抱歉。您可能会发现这很困难，因为您正在尝试对齐未实际连接的数据网格标题和树视图。我建议考虑使用 TreeListView，因为我相信这可以提供您想要的功能。