Win8/Metro c# Transistions/Animations

[James Rose]

Hello gang,

 

I am currently converting a Windows .Net app to a Metro app and I am having a little trouble with the build in transitions.  I have a grid ("BediaMenuItemsGrid") that gets loaded via C# as the number of UserControls varies so I don't want to preload them in the XAML   They animate load find with with the EntranceThemeTransition.   But I can't found out to Fade them out via c# (before I load the next list of items)

 

Thoughts?

        <Grid Name="BediaMenuItemsGrid" Canvas.ZIndex="40" Canvas.Top="75" Canvas.Left="0">         
            <ItemsControl Grid.Row="1" x:Name="BediaMenuItems">
                <ItemsControl.ItemContainerTransitions>
                    <TransitionCollection>
                        <EntranceThemeTransition FromVerticalOffset="2000" />
                    </TransitionCollection>
                </ItemsControl.ItemContainerTransitions>
                <ItemsControl.ItemsPanel>
                    <ItemsPanelTemplate>
                    </ItemsPanelTemplate>
                </ItemsControl.ItemsPanel>

                <!-- The sequence children appear depends on their order in 
         the panel's children, not necessarily on where they render
         on the screen. Be sure to arrange your child elements in
         the order you want them to transition into view. -->
                <ItemsControl.Items></ItemsControl.Items>
            </ItemsControl>
        </Grid>

[~Johnny]

If you use an obseravablecollection as the items source, you can also use the AddRemoveThemeTransition (or something similarly named) which will fade items out as they go out - I.e. when they get removed from your observablecollection (as long as you recycle the observablecollection and DON'T set a new one as the itemssource).

 

Or, you could use the VisualTreeHelperExtensions class (see WinRT toolkit), to get all the rendered element children in the list (using GetDescedentsofType<T> on the itemspanel or similar), and then manually create a storyboard in code behind to fade them out - if you're going for a staggered effect. Otherwise, just fade out the entire panel.

 

 

As you'll go along you'll find that as nice and simple as the ThemeTransitions are... they're very limited and don't play all too nicely with XAML as a whole. So there'll be many occasions where you may have to dip into writing your own animations.

[James Rose]

Thanks Johnny, I will review what you mentioned here and think about my options.