C# WPF - Dockpanel's children collapsed not resizing the other visible childs

Question

I'm sorry if I didn't find any relative post/questions regarding my small annoying issue.

I have a WPF window with a DockPanel (LastChildFill = True) that hosts three controls :

• One Button (OK)
• One label (Title)
• One Border with a listbox in it

What I do is when the test in process is "pass" it has no data to push in the listbox so I make it collapsed and then I would like the Title label to be centered in the available space that is not used by the listbox and its border.

When I have a "fail" or an "error", I have data to put in the listbox and then it is visible and everything is just as expected.

I tried many things before coming here and I lost enough time on this as I need to get other stuff done by the time I'm writing here.

Can anyone point me out how to solve my issue (centering label when listbox+border is collapsed) ?

Here is my xaml code for this window :

<Window x:Class="NI.TestStand.WPFControls.Views.DisplayBannerView"
        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:NI.TestStand.WPFControls"
        mc:Ignorable="d"
        Title="DisplayBanner" x:Name="DisplayBannerMessage" Height="500" Width="800" MinHeight="300" MinWidth="500">
    <Window.Resources>
        <Style x:Name="BaseWindowFont" TargetType="Window">
            <Setter Property="FontFamily" Value="Arial"></Setter>
            <Setter Property="FontSize" Value="16"></Setter>
        </Style>
    </Window.Resources>
    <Grid>
        <Border BorderBrush="Black" BorderThickness="2">
            <DockPanel LastChildFill="True">
                <Button 
                    x:Name="butOK" 
                    DockPanel.Dock="Bottom" 
                    Margin="10" Content="OK" 
                    HorizontalAlignment="Center" 
                    VerticalAlignment="Top" 
                    Padding="10" Width="150" 
                    Click="butOK_Click"/>

                <Label 
                    x:Name="main_message" 
                    Padding="15" 
                    FontSize="50"                     
                    Content="MAIN_MSG" 
                    DockPanel.Dock="Top"
                    HorizontalAlignment="Center" 
                    VerticalContentAlignment="Center" />

                <Border BorderBrush="Chocolate" BorderThickness="2" Margin="10" Name="messages_border">
                    <ListBox                                                               
                        Background="{Binding ElementName=DisplayBannerMessage, Path=Background}" 
                        Foreground="Black" 
                        ScrollViewer.HorizontalScrollBarVisibility="Auto" 
                        ScrollViewer.VerticalScrollBarVisibility="Auto"                     
                        ScrollViewer.CanContentScroll="True"
                        VerticalContentAlignment="Top" 
                        VerticalAlignment="Stretch"
                        x:Name="detail_message">
                        <ListBox.ItemTemplate>
                            <DataTemplate>
                                <TextBlock Text="{Binding}" ToolTip="{Binding}"/>
                            </DataTemplate>
                        </ListBox.ItemTemplate>
                    </ListBox>
                </Border>
            </DockPanel>
        </Border>
    </Grid>
</Window>

Here are the images that shows a PASS and an ERROR to show the difference.
The PASSED title message in the green lime window should go in the middle of the window as the listbox is collapsed..

Thanks for all your help and time

Answer 1

I would design the whole thing like this:

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>
    <Border BorderBrush="Black" BorderThickness="2"
            Grid.RowSpan="{Binding PassErrorBooleanProperty, Converter={StaticResource BoolToRowSpanConverter}}">
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="*" />
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
            </Grid.RowDefinitions>

            <Label 
                    x:Name="main_message" 
                    Padding="15" 
                    FontSize="50"                     
                    Content="MAIN_MSG" 
                    DockPanel.Dock="Top"
                    HorizontalAlignment="Center" 
                    VerticalContentAlignment="Center" />

            <Border Grid.Row="1" BorderBrush="Chocolate" BorderThickness="2" Margin="10" Name="messages_border"
                    Visibility="{Binding PassErrorBooleanProperty, Converter={StaticResource BoolToVisibilityConverter}}">
                <ListBox                                                               
                        Background="{Binding ElementName=DisplayBannerMessage, Path=Background}" 
                        Foreground="Black" 
                        ScrollViewer.HorizontalScrollBarVisibility="Auto" 
                        ScrollViewer.VerticalScrollBarVisibility="Auto"                     
                        ScrollViewer.CanContentScroll="True"
                        VerticalContentAlignment="Top" 
                        VerticalAlignment="Stretch"
                        x:Name="detail_message">
                    <ListBox.ItemTemplate>
                        <DataTemplate>
                            <TextBlock Text="{Binding}" ToolTip="{Binding}"/>
                        </DataTemplate>
                    </ListBox.ItemTemplate>
                </ListBox>
            </Border>

            <Button Grid.Row="2"
                    x:Name="butOK" 
                    DockPanel.Dock="Bottom" 
                    Margin="10" Content="OK" 
                    HorizontalAlignment="Center" 
                    VerticalAlignment="Top" 
                    Padding="10" Width="150" 
                    Click="butOK_Click" />
        </Grid>
    </Border>
</Grid>

There are two bindings to PassErrorBooleanProperty (which I've made up as something you'd use to indicate the result, you might have something else in place for this already), and you'd need two different converters, one for converting to a Visibility, and one for converting to an int (Grid.RowSpan).

When the value is true (Pass), you'd return Visibility.Collapsed and 2 from the converters. When the value is false, you'd return Visibility.Visible and 1.

Let me know if you need more info on the converters, though there is lots of information out there on using IValueConverter to create Boolean to Visibility converters, etc.