SplitView inline pane does not have animation with right placement

[LilyStilson]

Describe the bug Microsoft Docs sent me to this repo When <SplitView /> Pane PanePlacement="Right" and DisplayMode="Inline", animation when Pane opens or closes does not work.

Steps to reproduce the bug Steps to reproduce the behavior:

1. Create a new UWP project with Blank page
2. Add following code to the <Grid /> component on this page

   <StackPanel Orientation="Horizontal" Canvas.ZIndex="10">
       <ToggleButton Content="Toogle Pane" IsChecked="{Binding ElementName=MainView, Path=IsPaneOpen, Mode=TwoWay}" HorizontalAlignment="Left" VerticalAlignment="Top" />
       <ComboBox x:Name="LRBox" HorizontalAlignment="Left" VerticalAlignment="Top" Width="128" SelectedIndex="0">
           <x:String>Right</x:String>
           <x:String>Left</x:String>
       </ComboBox>
   </StackPanel>
   <SplitView x:Name="MainView" DisplayMode="Inline" OpenPaneLength="256" PanePlacement="{Binding ElementName=LRBox, Path=SelectedValue, Mode=TwoWay}" Margin="0, 32, 0, 0" IsPaneOpen="True" >
       <SplitView.Content>
           <Grid Background="#202020" />
       </SplitView.Content>
       <SplitView.Pane>
           <Grid Background="Green"/>
       </SplitView.Pane>
   </SplitView>

3. Build, Deploy and Run application
4. Press Toggle Pane button and see the bug

Expected behavior When Pane on Right open/closed state changes, animation works as intended.

Screenshots I attached video of a bug, since it could not be shown with screenshots https://youtu.be/9bNncBjNcJc

Version Info NuGet package version: [Microsoft.UI.Xaml 2.4.2]

Windows 10 version	Saw the problem?
Insider Build (xxxxx)
May 2020 Update (19041)
November 2019 Update (18363)
May 2019 Update (18362)	Yes
October 2018 Update (17763)
April 2018 Update (17134)
Fall Creators Update (16299)
Creators Update (15063)

Device form factor	Saw the problem?
Desktop	Yes
Xbox	Yes
Surface Hub	Yes
IoT	No

Additional context

This is very strange, since animation for left side placement exists and works. Not ideally, but still works.

[LilyStilson]

I found out that somebody already reported this issue, but it was closed with no resolve. https://github.com/microsoft/microsoft-ui-xaml/issues/2392

The problem is that <SplitView /> component style just does not have any <VisualTransition /> for <VisualState x:Name="OpenInlineRight" />

Also, <VisualState x:Name="OpenInlineLeft" /> has different structure and made using <VisualState.Setters /> while <VisualState x:Name="OpenInlineRight" /> is made using <Storyboard />

This issue can be fixed by adding with proper contents

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

to the <SplitView /> default style. (note, that I showed them as empty ones, but they of course should have <Storyboard /> inside of them with proper animations)

The only problem that I have is that I can't figure out how to make animation work on the right side of the component and make it slide from the right side (I only managed to enable it sliding on left side and then it jumps quickly to the right side)

[StephenLPeters]

If this only requires template changes, then maybe we could fix this before WinUI 3. The template currently exists in WinUI 2 so its possible this is fixable now.

[AtosNicoS]

Is there a workaround available to patch this from my uwp application directly?

[LilyStilson]

Is there a workaround available to patch this from my uwp application directly?

@AtosNicoS Seems like, it's either way WinUI team will make a proper <VisualState x:Name="OpenInlineRight" /> or we have to do it ourselves. It should be an easy fix for them, but seems like they just don't care, since almost a year passed since report and a whole 3 issues with same contents (though, they were poorly explained by the reporters) were just closed with no resolution.

Right now, I'm just using a DisplayMode="Overlay", but still, the problem with Inline-Right placement persists.

[AtosNicoS]

@LilyStilson Is there a PR yet? Maybe opening a PR would help to speed up the process?

[LilyStilson]

@AtosNicoS Opening PR without forking and any actual changes to code being made? I don't think it'll help, honestly...

[AtosNicoS]

A PR with a fix of course.

[LilyStilson]

Implemented <VisualTransition /> for OpenInlineRight state. Seems like Microsoft won't give a shit themselves, so I'm working on a PR now.

https://user-images.githubusercontent.com/42270214/153998135-6eb85718-a162-484c-b150-83a11d8c339b.mov

[LilyStilson]

Created a PR for that issue #6719.

[github-actions[bot]]

This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 5 days.

[LilyStilson]

Still present, even in WinUI 3. Video demonstrating the issue in WinUI 3 Gallery:

https://github.com/microsoft/microsoft-ui-xaml/assets/42270214/624927a0-742d-4aac-9dca-abf0f5beaadd