UI Animation in Metro app

Question

Hi, guys:

I found a sample of UI animiation showEdgeUI in JS, http://code.msdn.microsoft.com/windowsapps/UI-Animations-Sample-763bee9d

 

The animation of show Edge UI is very cool, how to implement in C++?

 

Thank you.

Answer 1

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

 

Thanks,

-David

Answer 2

Yes, I'm using XAML and C++.

Answer 3

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

 

Answer 4

David,

This is what I'm looking for, cool!

Thank you.