Question

I have a usercontrol in WPF that have 2 buttons inside.
The buttons are in overlay, you only see one button at a time.
And i want to use a fade transition between buttons.

I can accomplish this with an opacity animation in codebehind with this layout:

<UserControl>
    <Grid>
        <Button x:Name="buttonA">A</Button>
        <Button x:Name="buttonB">B</Button>
    </Grid>
</UserControl>

But i want a better solution, preferably in XAML.
Something like this:

<UserControl>
    <TransitionContent CurrentContent="{Binding CurrentItemKey}" Transition="Fade">

        <TransitionContentItem Key="ItemA">
            <Button x:Name="buttonA">A</Button>
        </TransitionContentItem>

        <TransitionContentItem Key="ItemB">
            <Button x:Name="buttonB">B</Button>
        </TransitionContentItem>

    </TransitionContent>
</UserControl>

Can i use LayoutToolkit:TransitioningContentControl to accomplish this?

What other options are there?

thanks

Answer 1

I am not sure whether or not you will accept this as an answer but here goes:

Transitioning from a button to a button probably means that you should have a single button with (at least) two states.

If you use The VisualStateManager to define the states and manage them you’ll get the transitions thrown in.

EDIT in response to your comment:

You might subclass and style a tabcontrol. As soon as another tab page is made active you animate its opacity. That way you could create a generic transitioning container.

EDIT Found an interesting project on codeplex