question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

SplitView inline pane does not have animation with right placement

See original GitHub issue

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.

Issue Analytics

  • State:open
  • Created 3 years ago
  • Reactions:4
  • Comments:11 (7 by maintainers)

github_iconTop GitHub Comments

1reaction
StephenLPeterscommented, Aug 13, 2020

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.

0reactions
LilyStilsoncommented, Jul 29, 2023

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

Read more comments on GitHub >

github_iconTop Results From Across the Web

(UWP) When SplitView pane is open, interaction with the ...
CompactOverlay and when the SplitView is opened, rest of the UI is inaccessible. To have it opened all the time and let user...
Read more >
SplitView Class (Microsoft.UI.Xaml.Controls)
Represents a container with two views; one view for the main content and another view that is typically used for navigation commands.
Read more >
Split View Control Windows 10
Split View Pane is to hold the navigational objects like buttons, Hamburger menu etc. The Pane also contains default animation and has ......
Read more >
Split View
Split View. A split view presents a container with two parts: the main content zone and a side pane. The main content zone...
Read more >
Split view on MacOS 12: very long animation after key ...
This seems to be some weird bug related to the "shift"-key. After removing "shift" from my shortcut, the animation worked as intended.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found