wpf - 抽屉式功能 WPF 网格

Question

我被困在创建用户界面...

我创建了一个网格，它包含 3 列 -

第一列 - 一个网格，其中包含我需要用户提供的所有输入

第二列 - gridSplitter

第三列 - 再次包含所有输出的网格

我想在 RED Circle 中实现一个按钮，点击隐藏/显示我的第一列即输入部分，因此用户可以在整个屏幕上看到整个输出。

这是我到目前为止的代码 -

<Grid HorizontalAlignment="Stretch" VerticalAlignment="Top">
        <Grid Grid.Row="0" RenderTransformOrigin="0.5,0.5" Margin="20,0,20,20">
             <Grid.RowDefinitions>
                <RowDefinition Height="124"/>
                <RowDefinition Height="8*" />
                <RowDefinition Height="5*" />
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="Auto" MinWidth="1100" />
            </Grid.ColumnDefinitions>

    <Grid x:Name="InputGrid" Grid.Row="0" Grid.Column="0" />
    <GridSplitter HorizontalAlignment="Right" VerticalAlignment="Stretch" 
           Grid.Column="1" ResizeBehavior="PreviousAndNext" Width="3" />
    <Grid x:Name="OutputGrid" Grid.Row="0" Grid.Column="2"/>
</Grid>

Answer 1

我在您的 xaml 中添加了一个按钮，例如：

<Grid HorizontalAlignment="Stretch" VerticalAlignment="Top">
    <Grid Grid.Row="0" RenderTransformOrigin="0.5,0.5" Margin="20,0,20,20">
        <Grid.RowDefinitions>
            <RowDefinition Height="124"/>
            <RowDefinition Height="8*" />
            <RowDefinition Height="5*" />
            <RowDefinition Height="Auto" /><!--for the button (just an example)-->
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="Auto" MinWidth="1100" />
        </Grid.ColumnDefinitions>

        <Grid x:Name="InputGrid" Grid.Row="0" Grid.Column="0" Width="250" Background="Blue"/>
        <GridSplitter HorizontalAlignment="Right" VerticalAlignment="Stretch" Grid.Column="1" ResizeBehavior="PreviousAndNext" Width="3" />
        <Grid x:Name="OutputGrid" Grid.Row="0" Grid.Column="2" Background="Yellow"/>
        <Button Grid.Row="4" Content="test" Click="OnButtonClick"/>
    </Grid>
</Grid>

在切换网格可见性后面的代码中：

private void OnButtonClick(object sender, RoutedEventArgs e)
    {
        InputGrid.Visibility = InputGrid.Visibility == Visibility.Visible
            ? Visibility.Collapsed
            : Visibility.Visible;
    }