隐藏/显示侧面板

Question

我试图在点击按钮时隐藏/显示屏幕右侧的面板，但是，它不能完全按照我的意图工作。

以下是一些照片：

Start

这就是我的屏幕在启动时最初的样子。

当我第一次点击Resize Grid时，这就是页面的样子：

这实际上就是我想要发生的事情。图像已经适当缩小，以便仍可以查看它们。

再次点击Resize Grid会导致重新显示上面显示的第一张图片，然后执行以下操作：

任何人都可以帮我解决这个问题吗？

到目前为止，这是我的代码：

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