Hiding/Showing a UserControl WPF

Question

I am building a WPF MVVM application.

What I have:

I have a ShellWindow which looks like this:

It is composed by 2 rows:

1: the hamburger menu (not important) with Height="*"

2: the console with Height="100"

The console is a UserControl:

<UserControl
    //namespaces>
    <Grid Name="LoggingGrid" Background="Black">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <TextBlock Grid.Row="0" Margin="{StaticResource SmallLeftMargin}">
            <Button
                x:Name="CollapseBtn"
                Width="25"
                Height="25"
                Click="CollapseBtn_Click"
                Content="▲">
                <Button.Template>
                    <ControlTemplate TargetType="{x:Type Button}">
                        <Grid>
                            <Ellipse Fill="White" />
                            <ContentPresenter
                                HorizontalAlignment="Center"
                                VerticalAlignment="Center"
                                Content="{TemplateBinding Content}" />
                        </Grid>
                    </ControlTemplate>
                </Button.Template>
            </Button>
            <StackPanel Margin="5,0,0,0" Orientation="Horizontal">
                <Image
                    Height="25"
                    Source="/Images/console-icon.png"
                    Visibility="Visible" />
                <Label
                    Content="Console"
                    FontSize="16"
                    Foreground="White" />
            </StackPanel>
        </TextBlock>
        <Border Grid.Row="1">
            <ListView
                x:Name="LoggingList"
                Margin="5"
                Background="Black"
                BorderThickness="0"
                Foreground="White"
                ItemsSource="{Binding Logs, UpdateSourceTrigger=PropertyChanged}"
                ScrollViewer.HorizontalScrollBarVisibility="Disabled"
                ScrollViewer.VerticalScrollBarVisibility="Auto" />
        </Border>
    </Grid>
</UserControl>

I have omitted the non-important things.

What I want to do:

Whenever the user clicks on the button, the console should collapse and look something like this:

The arrow is also changed.

How can I implement this? What is the best approach using MVVM?

What I have tried:

I have tried using a button click event handler in the code behind - CollapseBtn_Click, just to see what will happen:

private void CollapseBtn_Click(object sender, System.Windows.RoutedEventArgs e)
{
      LoggingGrid.Visibility = System.Windows.Visibility.Hidden;
}

Apparently it removes the user control and leaves a white background where it used to be.

Answer 1

Instead of setting the Visibility of the whole LoggingGrid to Hidden, you should set the Visibility of the LoggingList to Collapsed. (For the difference between Hidden and Collapsed, see here: Difference between Visibility.Collapsed and Visibility.Hidden).

Depending on your layout in the ShellWindow you probably have to adjust your row height configuration in the UserControl such that the collapsed LoggingGrid leads to a row with a height of zero.

Regarding MVVM the best approach would be to bind the Button to a bool property ConsoleVisible on your ViewModel such that clicking the button toggles the property between true and false. The styling of the button can be bound to the same property. For the LoggingList Visibility you could use a Binding with a BooleanToVisibilityConverter on the same property.