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

【问题标题】：WPF C# GridSpittler and Show/Hide ButtonWPF C# GridSpittler 和显示/隐藏按钮
【发布时间】：2018-12-13 03:04:27
【问题描述】：

我有一个可拖动的 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;
    }

【问题讨论】：

标签： c# wpf xaml

【解决方案1】：

由于您正在折叠正确的项目，因此控件不会出现在面板中。而不是使可见性Collapsed。单击按钮时，我们可以将宽度设置为 10，再次单击时，我们可以将其恢复为原始宽度。同时，我们也可以拖动GridSplitter。

 private void deatilsShowHide(object sender, RoutedEventArgs e) 
 { 
     if(rightColumn.Width == new GridLength(10))
        {
            rightColumn.Width = new GridLength(300);
        }
        else
        {
            rightColumn.Width = new GridLength(10);
        }
}

Xaml:-

    <Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"  />
        <ColumnDefinition Width="5" />
        <ColumnDefinition Width="300" x:Name="rightColumn"/>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="*" />
        <RowDefinition Height="Auto" />
    </Grid.RowDefinitions>

    <StackPanel Grid.Column="0" Background="AliceBlue">
    <Button Width="50" Height="50" HorizontalAlignment="Right" x:Name="Details_Toggle" Focusable="False" Click="Details_Toggle_Click">
        <StackPanel>

        </StackPanel>
    </Button>
    </StackPanel>

    <GridSplitter x:Name="rightSplitter"

  Width="15" Grid.Column="1"
  HorizontalAlignment="Stretch"
  VerticalAlignment="Stretch"
  Background="Transparent"
  ShowsPreview="True" />

    <StackPanel Grid.Column="2"   VerticalAlignment="Center" HorizontalAlignment="Center" >
        <Button Content="test" Grid.Column="2" HorizontalAlignment="Left"  VerticalAlignment="Top" Width="75"/>

    </StackPanel>


</Grid>

【讨论】：