TreeViewItem 中的背景不是全宽

Question

我是 WPF 表单的新手，在尝试在 TreeViewItem 中设置背景时遇到了一个问题。

<Window x:Class="wpf_test.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Window.Resources>
        <!--Styles-->
        <Style x:Key="GUIEntity" TargetType="{x:Type Control}">
            <Setter Property="MinWidth" Value="150" />
            <Setter Property="MaxWidth" Value="150" />
        </Style>
        <Style TargetType="TreeViewItem">
            <Setter Property="IsExpanded" Value="True" />
        </Style>
        <!--Data Sources-->
        <x:Array x:Key="BooleanListData" Type="sys:String" xmlns:sys="clr-namespace:System;assembly=mscorlib">
            <sys:String>True</sys:String>
            <sys:String>False</sys:String>
        </x:Array>
    </Window.Resources>
    <Grid>
        <TreeView Name="treeView1" Margin="5" Background="Azure">
            <TreeViewItem Header="ComplexTypeProperty" Margin="5">
                <CheckBox Style="{StaticResource GUIEntity}" Margin="3,3,10,3" Content="Instance" />
                <StackPanel Orientation="Horizontal" Background="LightGray">
                    <Label Margin="0,2,0,0" Content="IsBoolProperty" Width="150" />
                    <ComboBox Margin="5" Style="{StaticResource GUIEntity}" ItemsSource="{StaticResource BooleanListData}" />
                </StackPanel>
            </TreeViewItem>
        </TreeView>
    </Grid>
</Window>

问题是在 StackPanel 中设置的背景没有达到 TreeView 控件的全宽（向右）。我尝试将 HorizontalAllignment="Stretch" 添加到 TreeView 向下的所有控件，但没有效果。 StackPanel 上的背景宽度仅到 ComboBox 的末尾。

通过在 TreeView 上设置背景，我确认它确实占据了表单的整个宽度，所以这不是问题。

有谁知道如何将背景扩展到 TreeView 大小的末尾？

我将如何以最简单的方式覆盖此网格？

Answer 1

这是一篇涵盖问题并提供解决方案的博客文章。据我记得，它对我来说还不错。基本上你需要重新模板 TreeViewItem。很多 Xaml，但我认为是唯一合适的解决方案

https://leecampbell.com/2009/01/14/horizontal-stretch-on-treeviewitems/

Answer 2

这只是用一些视觉效果来扩展这篇旧帖子。

问题说明：默认情况下不能右对齐 TreeView 中的内容 - 基于这里&那里的其他一些 cmets - 我测试了从 Xaml 中删除任何堆栈面板（但这不是问题，因为我可以使用堆栈面板在 TreeView 之外复制所需的设计）

TLDR：解决方法已在之前的 cmets 中发布

XAML：

<Window x:Class="Test"
    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:DbSeeder.WPF.View"
    mc:Ignorable="d"
    Title="Test" 
    Height="450" 
    Width="800"
    Loaded="Window_Loaded">
<DockPanel>
    <!-- what i want -->
    <StackPanel DockPanel.Dock="Top"
                Margin="5">
        <Label Content="This is the expected structure" 
               FontFamily="Verdana"
               FontWeight="Bold"
               BorderBrush="Black"
               BorderThickness="2"
               HorizontalAlignment="Stretch"
               Background="Orange"
               />
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="5*"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
            </Grid.RowDefinitions>

            <!-- Buttons -->
            <StackPanel Grid.Column="1" 
                        Orientation="Horizontal" 
                        HorizontalAlignment="Right"
                        Margin="3">
                <Button Content="Button 1"
                        Margin="5"/>
                <Button Content="Button 2"
                        Margin="3"/>
            </StackPanel>

            <!-- Keys -->
            <StackPanel Grid.Column="0"
                        Orientation="Horizontal"
                        HorizontalAlignment="Left"
                        Margin="3" >
                <Label Content="Here should come key 1" Margin="3" BorderBrush="Black" BorderThickness="2"/>
                <Label Content="Here should come key 2" Margin="3" BorderBrush="Black" BorderThickness="2"/>
            </StackPanel>
        </Grid>
    </StackPanel>

    <!-- What I get 2-->
    <Grid 
        ShowGridLines="True"
        DockPanel.Dock="Top"
        Margin="5">

        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>

        <Label Content="This is what I get" 
               FontFamily="Verdana"
               FontWeight="Bold"
               BorderBrush="Black"
               BorderThickness="2"
               Background="Orange"
               Grid.Column="0"
               Grid.Row="0"/>
        <TreeView x:Name="alternative2"
                  Grid.Column="0"
                  Grid.Row="1"
                  HorizontalContentAlignment="Stretch"
                  HorizontalAlignment="Stretch">
            <TreeView.Resources>
                <Style TargetType="{x:Type TreeViewItem}">
                    <Setter Property="HeaderTemplate">
                        <Setter.Value>
                            <DataTemplate>
                                    <Grid ShowGridLines="True"
                                          DockPanel.Dock="Top"
                                          Margin="5">
                                        <Grid.ColumnDefinitions>
                                            <ColumnDefinition Width="3*"/>
                                            <ColumnDefinition Width="3*"/>
                                            <ColumnDefinition Width="*"/>
                                            <ColumnDefinition Width="*"/>
                                        </Grid.ColumnDefinitions>
                                        <Grid.RowDefinitions>
                                            <RowDefinition Height="Auto"/>
                                        </Grid.RowDefinitions>

                                        <!-- Buttons -->
                                        <Button Content="Button 1"
                                                Grid.Column="2" 
                                                Margin="5"
                                                HorizontalAlignment="Stretch"/>
                                        <Button Content="Button 2"
                                                Grid.Column="3" 
                                                Margin="3"
                                                HorizontalAlignment="Stretch"/>

                                        <!-- Keys -->

                                        <Label Grid.Column="0" 
                                               HorizontalAlignment="Stretch" 
                                               Content="Here should come key 1" 
                                               Margin="3" 
                                               BorderBrush="Black" 
                                               BorderThickness="2"/>
                                        <Label Grid.Column="1"
                                               HorizontalAlignment="Stretch" 
                                               Content="Here should come key 2" 
                                               Margin="3" 
                                               BorderBrush="Black" 
                                               BorderThickness="2"/>
                                    </Grid>
                            </DataTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>
            </TreeView.Resources>
        </TreeView>
    </Grid>
</DockPanel>

以及后面的代码（为视图播种）

public partial class Test : Window
{
    protected IDictionary<string, object> JsonFields { get; set; }

    public Test()
    {
        InitializeComponent();
        var x = new Dictionary<string, string>()
        {
            {"key 1", "string" },
            {"key 2", "string 2" }
        };

        var y = new List<string>()
        {
            "subList5a",
            "subList5b",
        };

        JsonFields = new Dictionary<string, object>()
        {
            { "Key 1", "string" },
            { "Key 2", "string" },
            { "Key 3", "string" },
            { "Key 4 - dict", x },
            { "Key 5 - List", y }
        };
    }

    private void Window_Loaded(object sender, RoutedEventArgs e)
    {
        var counter = 0;
        foreach (var key in JsonFields.Keys)
        {
            counter++;

            var item = new TreeViewItem()
            {
                Header = key,
                ClipToBounds = true
            };

            if (counter % 2 == 0)
            {
                var subItem = new TreeViewItem()
                {
                    Header = $"SubKey of {item.Header}",
                    ClipToBounds = true
                };

                item.Items.Add(subItem);
            }
            alternative2.Items.Add(item);
        }
    }
}