Drawer Like Feature WPF Grid

Question

I am stuck creating a UI...

enter image description here

I have created a Grid and it contains 3 Columns -

1st Column - A grid which contains all the inputs that i need from the user

2nd Column - A gridSplitter

3rd Column - Again a grid which contains all the outputs

I want to implement a button as in the RED Circle which on click Hides/Shows my 1st Column i.e. the input portion and hence the user can see the entire Output on the whole of the screen..

Here is my code this far -

<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>

I want to implement a button as in the RED Circle which on click hides/Shows my 1st Column i.e. the input portion and hence the user can see the entire Output on the Whole of the screen.. i am stuck as to how do i implement this show-hide feature — Rajat Suneja, May 30 '13 at 18:12
Can't it be achieved simply by EXPANDER or something else of this sort so that i can get animation along with it... — Rajat Suneja, May 31 '13 at 06:03
Yes, you could use an expander it just depends on where you would want to specify the logic. Did you try? — Emond, May 31 '13 at 07:07

score 0 · Answer 1 · answered Jun 20 '13 at 19:18

I added a button to your xaml, just as an example:

<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>

in code behind toggle visibility of the grid:

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

Drawer Like Feature WPF Grid

1 Answers1