Added SplitView VisualTransitions for OpenInlineRight and OpenInlineCompactRight states

[LilyStilson]

A fix for #3108.

Description

Changed default <SplitView /> template by adding there <VisualTransition /> for states OpenInlineRight and OpenInlineCompactRight.

<VisualTransition From="Closed" To="OpenInlineRight" />
<VisualTransition From="OpenInlineRight" To="Closed" />
<VisualTransition From="ClosedCompactRight" To="OpenCompactInlineRight" />
<VisualTransition From="OpenCompactInlineRight" To="ClosedCompactRight" />

Motivation and Context

This change is just for completeness of <SplitView /> component. I think MS didn't implemented those transitions because they never used them anywhere, so they never bothered to implement them. And I need to use that transition in my app, so I implemented them.

The issues it fixes are #3108, #2392 (which was closed without resolution) and Kinnara/ModernWpf#87

How Has This Been Tested?

Manually. Created a ResourceDictionary with the copy of the <SplitView /> DefaultTemplate. Then edited <VisualTransition From="Closed" To="OpenInlineLeft" /> for it to become <VisualTransition From="Closed" To="OpenInlineRight" />. Did the same for the OpenInlineCompactRight transition.
Then, merged that dictionary with a test project, tested and it worked, soo...

Screenshots (if appropriate):

Video showing the before and after fix:
https://user-images.githubusercontent.com/42270214/154005944-80429dae-2044-4679-859d-c9e19b68f3dd.mov

[ghost]

All CLA requirements met.

[StephenLPeters]

@LilyStilson It looks like there is an unintended animation component on the left side of the video around 1:09 time stamp. Do you understand the cause of that?

[LilyStilson]

@StephenLPeters Yes! Indeed, I noticed that too. My guess is that it tries to transition somewhere either to zero width of pane or there is something wrong with grid's definitions there... If there was a visual transition debug tool, I'd say with more confidence.

I tried different values, nothing worked for me. Still, I haven't tried adding keyframe time to the copy of visual state, so going to try that.

[LilyStilson]

2022-03-01.16-40-49.mov

@StephenLPeters Fixed!

[Fritierkelle]

Am i missing something?! I had to change "Value" from Lily's code as follows and now it works for me, if closing (From="OpenInlineRight" To="Closed"):

<DoubleAnimationUsingKeyFrames Storyboard.TargetName="PaneClipRectangleTransform" Storyboard.TargetProperty="TranslateX"> <SplineDoubleKeyFrame KeyTime="{StaticResource SplitViewPaneAnimationCloseDuration}" KeySpline="0.0,0.35 0.15,1.0" Value="{Binding TemplateSettings.NegativeOpenPaneLength, RelativeSource={RelativeSource Mode=TemplatedParent}}"/> </DoubleAnimationUsingKeyFrames>

[ojhad]

/azp run

[azure-pipelines]

Azure Pipelines successfully started running 1 pipeline(s).

[ojhad]

/azp run

[azure-pipelines]

Azure Pipelines successfully started running 1 pipeline(s).

[ojhad]

/azp run

[azure-pipelines]

Azure Pipelines successfully started running 1 pipeline(s).