Persistent animation on button tapped handler

How-to Discussions
1

I’ve created a nav menu that animates a rectangle to slide to the position of the pressed button (so the user can see the transition to a new page). I’m using Tapped and Focusing. All works fine, and the rectangle stays where it is until I click on another button, but - the rectangle reverts back to its starting position when I start to scroll on other page elements outside of the nav bar.

Is there any way to set this in pure ux so that the rectangle will only move if a nav button is pressed? Some way to say ignore clicks on the page outside the navbar?

Here is my code:

<NavigationBar DockPanel.Dock="Top">
                <GridLayout RowCount="1" ColumnCount="3" />
                <Rectangle ux:Binding="Appearance" ux:Name="Rectangle1" WidthUnit="Percent" Width="33.3" HeightUnit="Percent" Height="100" Alignment="BottomLeft" Margin="1,0,0,0" Padding="0">
                        <SolidColor Color="0,0,0,0.2" ux:Name="bgColor" />
                </Rectangle>

                <NavButton Text="test">
                    <Pressing>
                        <NavigateTo Context="_nav" Target="_page1" />
                    </Pressing>
                    <!-- modify the bg rectangle -->
                    <Tapped>
                        <GiveFocus />
                    </Tapped>
                    <Focusing>
                        <Move Target="Rectangle1" X="0" RelativeTo="Size" Easing="SinusoidalInOut" Duration="0.3" />
                    </Focusing>                </NavButton>

                <NavButton Text="Page 2">
                    <Pressing>
                        <NavigateTo Context="_nav" Target="_page2" />
                    </Pressing>
                    <Tapped>
                        <GiveFocus />
                    </Tapped>
                    <Focusing>
                        <Move Target="Rectangle1" X="1" RelativeTo="Size" Easing="SinusoidalInOut" Duration="0.3" />
                    </Focusing>                </NavButton>

                <NavButton Text="Page 3">
                    <Pressing>
                        <NavigateTo Context="_nav" Target="_page3" />
                    </Pressing>
                    <Tapped>
                        <GiveFocus />
                    </Tapped>
                    <Focusing>
                        <Move Target="Rectangle1" X="2" RelativeTo="Size" Easing="SinusoidalInOut" Duration="0.3" />
                    </Focusing>                </NavButton>

            </NavigationBar>
            --pages and main content follows--

Navbutton styles are in a separate file:

<!-- Reset navbutton styles -->
    <NavButton ux:Cascade="false" /> 

<!-- Initiate navbutton class -->
    <Button ux:Class="NavButton" Margin="2, 0, 0, 0" Padding="0">
        <Rectangle ux:Binding="Appearance">
            <SolidColor Color="1,1,1,0.1" ux:Name="NavBG" />
        </Rectangle>
        <Tapped>
            <GiveFocus />
        </Tapped>
        <Focusing>
        </Focusing>    </Button>
2

I’ve been trying to do the same, and also havent figured out how

3

Hi guys,

In yesterday’s release, we included <StateGroup> and <State> which makes cases like this easier.

Basically, you define a <State> for each of the states an object can be in.

Here is an example use case:

https://gist.github.com/Duckers/edafa6caf7cbf338b195

4

And here is a an bit more fancy example using animation mixers: https://gist.github.com/Duckers/8c93e3fb28dbaf4df6cd

And a video of how it looks:

We will clean these up and publish as official examples soon :slight_smile:

5

Fantastic - this works perfectly!