Home / Questions / 2284
Accepted
Edwin V
Asked: 2020-01-09 16:48:59 +0800 CST 2020-01-09 16:48:59 +0800 CST

How to enable SplitView transition

  • 772

I am creating a universal app with a HamburgerMenu

<Grid>
    <SplitView x:Name="hMenu" IsPaneOpen="{Binding ElementName=hMenuBtn, Path=IsChecked}">
        <SplitView.Pane>
            <RelativePanel>

            </RelativePanel>
        </SplitView.Pane>  
    </SplitView>
    <StackPanel Orientation="Horizontal" Height="48" 
                VerticalAlignment="Top" HorizontalAlignment="Stretch"
                Background="{ThemeResource SystemControlBackgroundAccentBrush}">
        <ToggleButton x:Name="hMenuBtn" VerticalAlignment="Stretch" Width="48"
                      HorizontalAlignment="Stretch">
        </ToggleButton>
        <TextBlock Foreground="White" Text="Control De Materiales"
                   HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
                   FontSize="20" Margin="10 20 0 0"/>
    </StackPanel>
</Grid>

It works correctly, but pressing the ToogleButtonel Paneopens abruptly without showing any transition.

I've tried to add it via TransitionCollection, but I can't get it to work.

c#

2 Answers

  1. Best Answer

    It should be done like this:

    <SplitView x:Name="hMenu" IsPaneOpen="{Binding ElementName=hMenuBtn, Path=IsChecked}">
    <TransitionCollection>
        <ExponentialEase />
    </TransitionCollection>
    <SplitView.Pane>
        <RelativePanel>

        </RelativePanel>
    </SplitView.Pane>  
</SplitView>

    of course you can also try it from C# and it should work without mess.

    hMenu.ChildrenTransitions = new 
             TransitionCollection {new ExponentialEase ()};

    However, remember that the apps are prepared for low end devices, therefore this uses a lot of energy and processing that you may not have. So if you're doing custom animations you should intentionally say that you'll run animations on dependent objects, and it's done this way: EnableDependentAnimation="true"on the animation object you're using:

    <PointAnimation EnableDependentAnimation="true" />
    • 4

  2. Hi, I use the template navpanelto automatically generate projects with splitview(sliding side menu), the same template includes the effects of the menu and transition between views.

    Nav Pane App Template (Universal Windows)

    • 1