Jump to content



Photo

Win8/Metro c# Transistions/Animations

c# metro windows8 transistions animations

  • Please log in to reply
2 replies to this topic

#1 James Rose

James Rose

    Software Developer

  • Tech Issues Solved: 1
  • Joined: 20-January 04
  • Location: New York City

Posted 22 June 2013 - 20:38

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>



#2 ~Johnny

~Johnny

    Earthling

  • Joined: 10-August 08
  • Location: London, England, Earth, Milky Way

Posted 22 June 2013 - 21:25

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.



#3 OP James Rose

James Rose

    Software Developer

  • Tech Issues Solved: 1
  • Joined: 20-January 04
  • Location: New York City

Posted 23 June 2013 - 18:39

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





Click here to login or here to register to remove this ad, it's free!