WPF C# GridSpittler 和显示/隐藏按钮

Question

我有一个可拖动的 GridSplitter，并且两列都会相应地调整大小。我有一个可以隐藏右列的按钮，但我希望再次按下该按钮以再次显示右列并且仍然可以拖动。

我曾尝试使用 ToggleButton，但 GridSpiltter 已使用它固定且不可拖动。

我怎样才能有一个按钮来显示/隐藏列并且仍然可以由用户调整？

网格分割器：

      <GridSplitter x:Name="rightSplitter"

      Grid.Column="1"

      Width="15"

      HorizontalAlignment="Left"

      VerticalAlignment="Stretch"

      Background="Transparent"

      ShowsPreview="True" />

列定义：

<Grid.ColumnDefinitions>

    <ColumnDefinition Width="*" />

    <ColumnDefinition Width="300" x:Name="rightColumn"/>

  </Grid.ColumnDefinitions>

  <Grid.RowDefinitions>

    <RowDefinition Height="*" />

    <RowDefinition Height="Auto" />

  </Grid.RowDefinitions>

按钮：

<Button Width="50" Height="50" HorizontalAlignment="Right" x:Name="Details_Toggle" Focusable="False">

    <StackPanel>

      <Image Source="controls/details.png" />

    </StackPanel>

按钮单击 C#：

        private void deatilsShowHide(object sender, RoutedEventArgs e) { 

        rightColumn.Width = new GridLength(0);

        rightSplitter.Visibility = System.Windows.Visibility.Collapsed;

    }

Answer 1

由于您正在折叠正确的项目，因此控件不会出现在面板中。而不是制作 Visibility Collapsed。单击按钮时，我们可以将宽度设置为 10，再次单击时，我们可以将其恢复为原始宽度。同时，我们也可以拖动GridSplitter.&nbsp;private void deatilsShowHide(object sender, RoutedEventArgs e)&nbsp;&nbsp;{&nbsp;&nbsp; &nbsp; &nbsp;if(rightColumn.Width == new GridLength(10))&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; rightColumn.Width = new GridLength(300);&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; else&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; rightColumn.Width = new GridLength(10);&nbsp; &nbsp; &nbsp; &nbsp; }}Xaml：-&nbsp; &nbsp; <Grid>&nbsp; &nbsp; <Grid.ColumnDefinitions>&nbsp; &nbsp; &nbsp; &nbsp; <ColumnDefinition Width="*"&nbsp; />&nbsp; &nbsp; &nbsp; &nbsp; <ColumnDefinition Width="5" />&nbsp; &nbsp; &nbsp; &nbsp; <ColumnDefinition Width="300" x:Name="rightColumn"/>&nbsp; &nbsp; </Grid.ColumnDefinitions>&nbsp; &nbsp; <Grid.RowDefinitions>&nbsp; &nbsp; &nbsp; &nbsp; <RowDefinition Height="*" />&nbsp; &nbsp; &nbsp; &nbsp; <RowDefinition Height="Auto" />&nbsp; &nbsp; </Grid.RowDefinitions>&nbsp; &nbsp; <StackPanel Grid.Column="0" Background="AliceBlue">&nbsp; &nbsp; <Button Width="50" Height="50" HorizontalAlignment="Right" x:Name="Details_Toggle" Focusable="False" Click="Details_Toggle_Click">&nbsp; &nbsp; &nbsp; &nbsp; <StackPanel>&nbsp; &nbsp; &nbsp; &nbsp; </StackPanel>&nbsp; &nbsp; </Button>&nbsp; &nbsp; </StackPanel>&nbsp; &nbsp; <GridSplitter x:Name="rightSplitter"&nbsp; Width="15" Grid.Column="1"&nbsp; HorizontalAlignment="Stretch"&nbsp; VerticalAlignment="Stretch"&nbsp; Background="Transparent"&nbsp; ShowsPreview="True" />&nbsp; &nbsp; <StackPanel Grid.Column="2"&nbsp; &nbsp;VerticalAlignment="Center" HorizontalAlignment="Center" >&nbsp; &nbsp; &nbsp; &nbsp; <Button Content="test" Grid.Column="2" HorizontalAlignment="Left"&nbsp; VerticalAlignment="Top" Width="75"/>&nbsp; &nbsp; </StackPanel></Grid>