WPF: How do I transition from one docked UserControl to another?

Question

I have quite a basic WPF form with a DockPanel, there's a Menu bar, a Status bar, and a UserControl. Like so:

<DockPanel>
  <Menu DockPanel.Dock="Top">
    ...
  </Menu>
  <StatusBar DockPanel.Dock="Bottom">
    ...
  </StatusBar>
  <UserControls:MyUserControl />
<DockPanel>

My problem is: Based on an event, I want to transition the UserControl to a second user control.

There's no problem with them both being defined in the XAML (as I know what the other control will be), but I just can't work out the type of container I need for this that will allow me to use an animation (ideally something like one disappearing to the left and the other appearing from the right). The UserControls should grow automatically to use up all the available space.

Any ideas?

Edit: Here's what I'm trying to do in a general sense. Maybe someone can suggest a better way.

I have a ListView/GridView that has a list of clients. When the user double clicks on a client I want to replace the list of clients with a UserControl that displays details on that client (and further allows them to interact).

Answer 1

Can't you just have them both there but one of their Visibility's set to collapsed, then on the event fire, just switch the two?

Answer 2

Found out a way of doing it. I put a grid where the UserControl was before and then put both UserControls inside that. Set one to visible and one to collapsed. Then on the event fire I can play my animation which (among other things) swaps the visibility.

So in my window I have

<Grid>
    <UserControls:Control1 x:Name="Control1" />
    <UserControls:Control2 x:Name="Control2" />
</Grid>

Then in the window resources this

<Storyboard x:Key="ShowControl2">
    <ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="Control1" Storyboard.TargetProperty="(UIElement.Visibility)">
        <DiscreteObjectKeyFrame KeyTime="00:00:00.2000000" Value="{x:Static Visibility.Collapsed}"/>
    </ObjectAnimationUsingKeyFrames>
    <ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="Control2" Storyboard.TargetProperty="(UIElement.Visibility)">
        <DiscreteObjectKeyFrame KeyTime="00:00:00" Value="{x:Static Visibility.Visible}"/>
    </ObjectAnimationUsingKeyFrames>
    <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="Control1" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)">
        <SplineDoubleKeyFrame KeyTime="00:00:00.2000000" Value="0"/>
    </DoubleAnimationUsingKeyFrames>
    <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="Control2" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)">
        <SplineDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
        <SplineDoubleKeyFrame KeyTime="00:00:00.2000000" Value="1"/>
    </DoubleAnimationUsingKeyFrames>
</Storyboard>

Then in the code when I want to hide control 1 and show control 2, I have this:

Storyboard showControl2Animation = (Storyboard)FindResource("ShowControl2");
showControl2Animation .Begin();
control2.Focus();

Answer 3

Can you paste your. I am also trying to do the same thing.