Hiding/Showing side panel

Question

I am trying to hide/show a panel on the right side of my screen when a button is clicked, however, it is not working exactly as I intended.

Here are a few pics:

Start

This is what my screen originally looks like at startup.

When I click Resize Grid for the first time, this is what the page looks like:

This is actually what I want to happen. The images have shrunk appropriately so that they can all still be viewed.

Two further clicks of Resize Grid results in the 1st image shown above being re-displayed, followed by this:

Can anyone help me with this so that this doesn't occur?

Here is my code so far:

XAML

<Window x:Class="VideoManager.MoviePanel"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="MoviePanel" Height="1024" Width="1463" WindowStartupLocation="CenterScreen">

<Window.Resources>
    <DataTemplate x:Key="ItemTemplate">
        <WrapPanel Orientation="Vertical"  Width="Auto">
            <Image Width="200" Height="300" Stretch="Fill" Source="{Binding Image}"/>
            <TextBlock Text="{Binding Name}" HorizontalAlignment="Center"/>
        </WrapPanel>
    </DataTemplate>
</Window.Resources>

<Grid x:Name="movie_grid" HorizontalAlignment="Left" Width="1463">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" MinHeight="102" />
        <RowDefinition />
    </Grid.RowDefinitions>
    <ListView
                  Name="MovieListView"
                  ItemTemplate="{StaticResource ItemTemplate}"
                  ItemsSource="{Binding Path = movies}" Margin="0,0,0,0" SelectionChanged="MovieListView_SelectionChanged" Grid.Row="1">
        <ListView.ItemsPanel>
            <ItemsPanelTemplate>
                <UniformGrid Columns="5" />
            </ItemsPanelTemplate>
        </ListView.ItemsPanel>
    </ListView>
    <TextBlock x:Name="SampleTextBlock"  Margin="1228,36,49,43" >
        <InlineUIContainer>
            <TextBox Height="23" TextWrapping="Wrap" Text="Search" Width="200" TextChanged="TextBox_TextChanged"/>
        </InlineUIContainer>
    </TextBlock>
    <Button Content="Home" HorizontalAlignment="Left" Margin="46,50,0,0" VerticalAlignment="Top" Width="75" Click="Button_Click_Home"/>
    <Button Name="collapse" Content="Resize Grid" HorizontalAlignment="Left" Margin="176,50,0,0" VerticalAlignment="Top" Width="75" Click="Button_Click"/>
    <ListView HorizontalAlignment="Left" Width = "0" Height="872" Grid.Row="1" VerticalAlignment="Top" Name="sidebar" SelectionChanged="sidebar_SelectionChanged">
        <ListView.View>
            <GridView>
                <GridViewColumn>
                    <TextBlock Text="hello"/>
                </GridViewColumn>
            </GridView>
        </ListView.View>
    </ListView>
</Grid>

C#

private void Button_Click(object sender, RoutedEventArgs e) {

        // collapse main grid and show sidebar
        if (this.collapse.Name == "collapse") 
        {
            MovieListView.Margin = new System.Windows.Thickness(0,0,280,0);   
            sidebar.Width = 280;
            sidebar.Margin = new System.Windows.Thickness(1183,0,0,0);
            this.collapse.Name = "expand";
        }

        // expand main grid and hide sidebar
        else if (this.collapse.Name == "expand")
        {
            MovieListView.Width = 1463; 
            MovieListView.Margin = new System.Windows.Thickness(0, 0, 0, 0);
            sidebar.Width = 0;
            sidebar.Margin = new System.Windows.Thickness(1463, 0, 0, 0);
            this.collapse.Name = "collapse";
        }

    }

Answer 1

just use the expander control (set it to what direction you desire eg left up right or down) and dont forget to set the window size to auto.

example: WPF Expander Control