3 posts in this topic

Posted

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>

Share this post


Link to post
Share on other sites

Posted

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.

Share this post


Link to post
Share on other sites

Posted

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

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now
Sign in to follow this  
Followers 0

  • Recently Browsing   0 members

    No registered users viewing this page.