C# TreeView Visibilty Collapsed still leaving white space

Question

I am testing a WPF app with a TreeView that contains StackPanels with TreeViewItems. The StackPanel Visibility is bound to the code-behind. When I test "Collapsed", the StackPanel containing the TreeViewItem disappears, but the white space is left behind. How can I remove it altogether?

XAML:

<Window x:Class="TEST_TreeView.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:TEST_TreeView"
        mc:Ignorable="d"
        Title="MainWindow" Height="400" Width="400"
        x:Name="Main">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="40" />
            <RowDefinition />
        </Grid.RowDefinitions>
        <DockPanel Grid.Column="0" Grid.Row="1" Grid.RowSpan="2">
            <Border Background="White" BorderBrush="Black" BorderThickness="1">
                <ScrollViewer Background="White">
                    <TreeView
                        HorizontalAlignment="Left"
                        VerticalAlignment="Top">
                        <TreeView.ItemContainerStyle>
                            <Style TargetType="TreeViewItem">
                                <Setter Property="IsExpanded" Value="True"/>
                            </Style>
                        </TreeView.ItemContainerStyle>

                        <TreeViewItem
                            Header="TreeView Test Parent 1">
                            <StackPanel
                                Orientation="Horizontal"
                                Visibility="{Binding ElementName=Main, Path=TreeViewItem1Visibility}">
                                <TreeViewItem
                                    Header="TreeView Item 1 Info: "/>
                                <TextBlock
                                    Text="TreeView Item 1 Data"
                                    Margin="10,0,0,0"/>
                            </StackPanel>
                            <StackPanel
                                Orientation="Horizontal"
                                Visibility="{Binding ElementName=Main, Path=TreeViewItem2Visibility}">
                                <TreeViewItem
                                    Header="TreeView Item 2 Info: "/>
                                <TextBlock
                                    Text="TreeView Item 2 Data"
                                    Margin="10,0,0,0"/>
                            </StackPanel>
                            <StackPanel
                                Orientation="Horizontal"
                                Visibility="{Binding ElementName=Main, Path=TreeViewItem3Visibility}">
                                <TreeViewItem
                                    Header="TreeView Item 3 Info: "/>
                                <TextBlock
                                    Text="TreeView Item 3 Data"
                                    Margin="10,0,0,0"/>
                            </StackPanel>
                        </TreeViewItem>
                        <TreeViewItem
                            Header="TreeView Test Parent 2">
                            <StackPanel
                                Orientation="Horizontal"
                                Visibility="{Binding ElementName=Main, Path=TreeViewItem4Visibility}">
                                <TreeViewItem
                                    Header="TreeView Item 4 Info: "/>
                                <TextBlock
                                    Text="TreeView Item 4 Data"
                                    Margin="10,0,0,0"/>
                            </StackPanel>
                            <StackPanel
                                Orientation="Horizontal"
                                Visibility="{Binding ElementName=Main, Path=TreeViewItem5Visibility}">
                                <TreeViewItem
                                    Header="TreeView Item 5 Info: "/>
                                <TextBlock
                                    Text="TreeView Item 5 Data"
                                    Margin="10,0,0,0"/>
                            </StackPanel>
                            <StackPanel
                                Orientation="Horizontal"
                                Visibility="{Binding ElementName=Main, Path=TreeViewItem6Visibility}">
                                <TreeViewItem
                                    Header="TreeView Item 6 Info: "/>
                                <TextBlock
                                    Text="TreeView Item 6 Data"
                                    Margin="10,0,0,0"/>
                            </StackPanel>
                        </TreeViewItem>
                    </TreeView>
                </ScrollViewer>
            </Border>
        </DockPanel>
    </Grid>
</Window>

Code behind:

using System.Windows;

namespace TEST_TreeView
{
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }

        public Visibility TreeViewItem1Visibility
        {
            get
            {
                return Visibility.Visible;
            }
        }

        public Visibility TreeViewItem2Visibility
        {
            get
            {
                return Visibility.Collapsed;
            }
        }

        public Visibility TreeViewItem3Visibility
        {
            get
            {
                return Visibility.Collapsed;
            }
        }

        public Visibility TreeViewItem4Visibility
        {
            get
            {
                return Visibility.Visible;
            }
        }

        public Visibility TreeViewItem5Visibility
        {
            get
            {
                return Visibility.Collapsed;
            }
        }

        public Visibility TreeViewItem6Visibility
        {
            get
            {
                return Visibility.Visible;
            }
        }
    }
}

score 0 · Answer 1 · answered Feb 23 '21 at 22:11

Bind the Visibility property of the TreeViewItem to your source property and set the Header property a StackPanel with two TextBlocks:

<TreeView>
    <TreeView.ItemContainerStyle>
       ...
    </TreeView.ItemContainerStyle>

    <TreeViewItem Header="TreeView Test Parent 1">
        <TreeViewItem Visibility="{Binding ElementName=Main, Path=TreeViewItem1Visibility}">
            <TreeViewItem.Header>
                <StackPanel Orientation="Horizontal">
                    <TextBlock Text="TreeView Item 1 Info: "/>
                    <TextBlock Text="TreeView Item 1 Data" Margin="10,0,0,0"/>
                </StackPanel>
            </TreeViewItem.Header>
        </TreeViewItem>

        <TreeViewItem Visibility="{Binding ElementName=Main, Path=TreeViewItem2Visibility}">
            <TreeViewItem.Header>
                <StackPanel Orientation="Horizontal">
                    <TextBlock Text="TreeView Item 2 Info: "/>
                    <TextBlock Text="TreeView Item 2 Data" Margin="10,0,0,0"/>
                </StackPanel>
            </TreeViewItem.Header>
        </TreeViewItem>

        <TreeViewItem Visibility="{Binding ElementName=Main, Path=TreeViewItem3Visibility}">
            <TreeViewItem.Header>
                <StackPanel Orientation="Horizontal">
                    <TextBlock Text="TreeView Item 3 Info: "/>
                    <TextBlock Text="TreeView Item 3 Data" Margin="10,0,0,0"/>
                </StackPanel>
            </TreeViewItem.Header>
        </TreeViewItem>

    </TreeViewItem>
    <TreeViewItem Header="TreeView Test Parent 2">
        ...

C# TreeView Visibilty Collapsed still leaving white space

1 Answers1