CODEWITHSUNDEEP
c#wpfxaml
Faz
Faz

Reputation: 63

WPF C# GridSpittler and Show/Hide Button

I have a GridSplitter which is dragable and both columns resize accordingly. I have a button which can hide the right column but I am looking to have another press of the button to show the right column again and still be dragable.

I have tried to use a ToggleButton but the GridSpiltter is fixed using it and is not dragable.

How can I have a button to show/hide a column and still be adjustable by the user?

GridSplitter:

      <GridSplitter x:Name="rightSplitter"
      Grid.Column="1"
      Width="15"
      HorizontalAlignment="Left"
      VerticalAlignment="Stretch"
      Background="Transparent"
      ShowsPreview="True" />

Column Definitions:

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

Button:

<Button Width="50" Height="50" HorizontalAlignment="Right" x:Name="Details_Toggle" Focusable="False">
    <StackPanel>
      <Image Source="controls/details.png" />
    </StackPanel>

Button Click C#:

        private void deatilsShowHide(object sender, RoutedEventArgs e) { 
        rightColumn.Width = new GridLength(0);
        rightSplitter.Visibility = System.Windows.Visibility.Collapsed;
    }

Upvotes: 0

Views: 677

Answers (1)

Sats
Sats

Reputation: 1973

Since you are making the right items collapsed, it will make the control not to be present in the panel. Instead of making the Visibility Collapsed. We can set the width as 10 when button is clicked and when again clicked we can revert it back to original width. At the same time, we can also drag the 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>

Upvotes: 2

Related Questions