WPF MVVM expand functionality for left hand panel

Question

I have a WPF MVVM application that is divided up into two columns. The left hand one is about 25% of the width and contains a scrollable list of objects to select and a calculate button. The right hand pane is the results pane and is about 75% of the width.

The left hand pane is contained within a UserControl that is embedded in the main application window. The main app uses a Grid layout with two columns, the first column is the UserControl and the second is a StackPanel that contains the results. Currently the UserControl binds to a ViewModel for the data.

What I want to achieve is to have this UserControl appear as it currently does by default with the summarised list of items, but to have an expand arrow in the right of the control and if you click that then the left panel "slides" over to the right until it fills up 75% of the application width and goes over the top of the results pane, and the datatemplate needs to change aswell so the display goes from a simple list of objects, to a large grid showing all the details of each object.

So the application has two states, one is collapsed when the left hand control is 25% of the width and contains abbreviated rendering of the underlying viewmodels data, and when you click expand, it slides with a visible slide effect over to the right, opening up to 75% of the application width, and the rendering of the underlying data changes to a detailed view.

Can anyone suggest how best to achieve this?

Answer 1

You can consider this is pure WPF visual effects. First define your grid like this:

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="2*"/>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>

    <Border x:Name="Results" Grid.Column="1" Grid.ColumnSpan="2"/>

    <Border x:Name="LeftPanel" Grid.Column="0"/>

    <Border x:Name="LeftExpandPanel" Grid.Column="0" Grid.ColumnSpan="2" Visibility="Collapsed"/>

</Grid>

The expand panel is at bottom to make sure it on the top of the other two. Put the simple list on left panel, the complex list with rich item template on left expand panel and your result UI on results.

Then define a group of animations and states to handle the animation switch visibility(from Collapsed to Visible and from Visible to Collapsed) of LeftExpandPanel.

The last is to handle click of the arrow button. You can put the handle in code behind since it is purely UI related. You need to do two things inside the handler:

1. Change the arrow direction on the button, and save the state(expanding or collapsing)
2. Start animation.

Done. Hope it can help you.