Question

I’m creating a transition effect that will slide 2 panels (side to side).

My plan is to have a Grid that has the width of the window multiplied by 2 through data-binding, divide it by 2 to have the 2 panels, then put Grids in them (so I’ll have 2 panels equally divided with their own grid and you can see only one of them at a time. all it takes now is to move the root grid with an animation to create the transition effect).

So I’m trying to data bind the Grid’s width to the width of the window multiplied by 2 (as I’ve written in bold above), but I have no idea how you can modify a data bind, and let it keep updating accordingly. so if possible – how do you do it?

I guess I could do it with events (just like in any other .NET application) but that’s just more opportunities for bugs to come and fester (i.e. events I’ll miss); so I’d really appreciate a good and clean solution.

By the way, if you have a better way to make the transition, please let me know in the comments. My mind is still open to ideas.
Thanks!

Answer 1

I’ve done it. It was like this:

<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition Width="0" />

<Grid x:Name="Panel1" />
<Grid x:Name="Panel2"/>
</Grid>

Now, this is side-scrolling, however the point is same. All you do is apply RenderTransform.TranslateTransform animation to Panel2, you animate X from 0 to Panel2 Width, essentially it will be completely off, and after that you just set Panel2 Column to “1”.

I can give you tomorrow little code example too, but you can get started.

Here is the Xaml that takes care of slide2slide animation when user toggles the button.

    <Grid.Triggers>
<EventTrigger RoutedEvent="ToggleButton.Checked" SourceName="workingPlanButton">
<BeginStoryboard>
<Storyboard Completed="Storyboard_Completed">

<DoubleAnimationUsingKeyFrames BeginTime="00:00:0.1"
                              Duration="0:0:00.5"
                              Storyboard.TargetName="lsView"
                              Storyboard.TargetProperty="RenderTransform.(TranslateTransform.Y)"
                              Timeline.DesiredFrameRate="30">
<LinearDoubleKeyFrame KeyTime="00:00:00.3" Value="{Binding ElementName=bodyGrid, Path=ActualHeight}" />
</DoubleAnimationUsingKeyFrames>


<!--  Hide the panel  -->
<ObjectAnimationUsingKeyFrames BeginTime="0:0:0.5"
                              Storyboard.TargetName="lsView"
                              Storyboard.TargetProperty="Visibility"
                              Timeline.DesiredFrameRate="30">
<DiscreteObjectKeyFrame Value="{x:Static Visibility.Hidden}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>

Now the actual grid:

<Grid x:Name="bodyGrid" Grid.Row="1">

<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="1" />
</Grid.RowDefinitions>
<StudyPlan:StudyPlanControl />
<local:LessonControl x:Name="lsView />
<local:LessonControl.RenderTransform>
<TranslateTransform Y="0" />
</local:LessonControl.RenderTransform>

</local:LessonControl>
</Grid>