Question

I have a WinRT app in which an AppBar button can be one of two buttons depending upon what is selected. Changing from one button to another is straightforward, however it is lacking the visual fluidity we strive for with WinRT.

The visual behavior I am looking for is also seen in the Mail app that ships with Windows 8. If you select a message and bring up the bottom AppBar, tapping the “Mark as Read/Unread” buttons results in a nice transform effect between the two buttons.

Does anyone know if this is a pre-rolled animation or do I have to implement it by hand (or even better, is there a solution out there already)?

Answer 1

The available transitions are in the Windows.UI.Xaml.Media.Animation namespace. Check out what is there and if you don’t see what you are looking for then you will have to create your own.

The transition that looks most similar to me is AddDeleteThemeTransition, though the effect is only present when app bar items are added/removed and not when the app bar is opened.

Here’s an example of its use

    <AppBar>
        <Grid>
            <StackPanel x:Name="LeftPanel" Orientation="Horizontal">
                <Button x:Name="Search" Style="{StaticResource SearchAppBarButtonStyle}" />
                <StackPanel.ChildrenTransitions>
                    <TransitionCollection>
                        <AddDeleteThemeTransition/>
                    </TransitionCollection>
                </StackPanel.ChildrenTransitions>
            </StackPanel>
        </Grid>
    </AppBar>