Скрытие/отображение боковой панели

Question

Я пытаюсь скрыть/показать панель в правой части экрана при нажатии кнопки, однако она не работает точно так, как я предполагал.

Вот несколько фото:

Start

Это то, что мой экран изначально выглядит как при запуске.

Когда я нажимаю Resize Grid в первый раз, это то, что страница выглядит следующим образом:

Это на самом деле то, что я хочу, чтобы это произошло. Изображения уменьшились соответственно, чтобы все они могли быть просмотрены.

еще два щелчками Resize Grid результатов в 1-изображение, показанное выше повторного отображения, а затем это:

Может кто-нибудь помочь мне с этим, так что это Безразлично» t происходит?

Вот мой код до сих пор:

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

просто использовать элемент управления расширителя (установите его в каком направлении вы хотите, например, левый вверх или вниз) и не забудьте установить размер окна на авто.

пример: WPF Expander Control