none
UI Animation in Metro app

Answers

  • Until there is more detailed content specific to XAML in Metro Style apps, I've used the Silverlight documentation for general guidance. This section on Animation is a great place to start.

     

    This is an example of one way you could use XAML and how to call it from the button Click event handler.

       <Grid x:Name="LayoutRoot" Background="#FF0C0C0C">
            <Grid.Resources>
                <Storyboard x:Name="MyStoryBoard">
                    <DoubleAnimation
                            Storyboard.TargetName="MyOwnTransform"
                            Storyboard.TargetProperty="TranslateX"
                            From="160" To="0" Duration="0:0:1" 
                            AutoReverse="True" 
                            RepeatBehavior="Forever" />
                </Storyboard>
            </Grid.Resources>
            
            <StackPanel x:Name="StackPanel1"  HorizontalAlignment="Left" Height="768" VerticalAlignment="Top" Width="160" Margin="1206,0,0,0" Background="#FF000CFF">
                <StackPanel.RenderTransform>
                    <CompositeTransform x:Name="MyOwnTransform" TranslateX="160"/>
                </StackPanel.RenderTransform>
                <TextBlock x:Name="txtBlk1" HorizontalAlignment="Left" TextWrapping="Wrap" Text="MyTextBlock" Width="162" Margin="0,0,0,0"/>
            </StackPanel>
           
            <Button x:Name="bTransform" Content="StackPanelSlideIn" HorizontalAlignment="Left" VerticalAlignment="Top" Width="160" Margin="439,267,0,0" Click="bTransform_Click" />
        </Grid>
    

    To start the animation from C++

    void ForumcppThreadPool::MainPage::bTransform_Click(Platform::Object^ sender, Windows::UI::Xaml::RoutedEventArgs^ e)
    {
    	MyStoryBoard->Begin();
    }
    

    Is that what you were looking for?

     

    Thanks,

    -David

     

    • Marked as answer by ytshe Tuesday, November 22, 2011 12:52 AM
    Monday, November 21, 2011 9:34 PM

All replies

  • I assume you are wanting to use XAML? If so, I'll see if it's possible to emulate that animation style.

     

    Thanks,

    -David

    Saturday, November 19, 2011 8:40 AM
  • Yes, I'm using XAML and C++.
    Sunday, November 20, 2011 5:01 AM
  • Until there is more detailed content specific to XAML in Metro Style apps, I've used the Silverlight documentation for general guidance. This section on Animation is a great place to start.

     

    This is an example of one way you could use XAML and how to call it from the button Click event handler.

       <Grid x:Name="LayoutRoot" Background="#FF0C0C0C">
            <Grid.Resources>
                <Storyboard x:Name="MyStoryBoard">
                    <DoubleAnimation
                            Storyboard.TargetName="MyOwnTransform"
                            Storyboard.TargetProperty="TranslateX"
                            From="160" To="0" Duration="0:0:1" 
                            AutoReverse="True" 
                            RepeatBehavior="Forever" />
                </Storyboard>
            </Grid.Resources>
            
            <StackPanel x:Name="StackPanel1"  HorizontalAlignment="Left" Height="768" VerticalAlignment="Top" Width="160" Margin="1206,0,0,0" Background="#FF000CFF">
                <StackPanel.RenderTransform>
                    <CompositeTransform x:Name="MyOwnTransform" TranslateX="160"/>
                </StackPanel.RenderTransform>
                <TextBlock x:Name="txtBlk1" HorizontalAlignment="Left" TextWrapping="Wrap" Text="MyTextBlock" Width="162" Margin="0,0,0,0"/>
            </StackPanel>
           
            <Button x:Name="bTransform" Content="StackPanelSlideIn" HorizontalAlignment="Left" VerticalAlignment="Top" Width="160" Margin="439,267,0,0" Click="bTransform_Click" />
        </Grid>
    

    To start the animation from C++

    void ForumcppThreadPool::MainPage::bTransform_Click(Platform::Object^ sender, Windows::UI::Xaml::RoutedEventArgs^ e)
    {
    	MyStoryBoard->Begin();
    }
    

    Is that what you were looking for?

     

    Thanks,

    -David

     

    • Marked as answer by ytshe Tuesday, November 22, 2011 12:52 AM
    Monday, November 21, 2011 9:34 PM
  • David,

    This is what I'm looking for, cool!

    Thank you.

     


    • Edited by ytshe Tuesday, November 22, 2011 12:52 AM
    Tuesday, November 22, 2011 12:51 AM