CompositeTransforms in MetroRT

  • Article

Blah-blah

Using CompositeTransitions to make an interesting look in the tablet.  And yes this would work in the Win7 world as well.  I initially started this blog to whine about the changes in some of the functionality of XAML but got distracted.  Also, this effort came up when one of my teammates (Alice Pang) ask about timers, so blogging is very random in the creation process.

End of the blah-blah

 

 

Here are the transitions as I see them (loosely based on something I read, but now I can’t find the article or forum entry, if you know, please add it to my comments).  In the XAML, there is a button to click, which will need a very simple response:

C#:      CurtainStoryBoard.Begin();

C++:    CurtainStoryBoard->Begin();

Place those in the click or tap response, by habit I used the click, but recommending using the tap.  You will need to change the x:Class to match your project name or the app won’t work.

The storyboard and DoubleAnimation are the same story we have been following it WPF, the two double animations are the same except for the Storyboard.TargetName.

Where the work is accomplished:

The StackPanel is where the work for the storyboard takes place, here the CompositeTransform fires the rendering transform CurtainTransform and the StackPanel moves from the right and left creating a curtain like opening and closing.  This sample is part of my “no-class” samples, meaning that there are no extra classes created outside of the template.

Here is the working code, make sure to change the x:Class and add the appropriate event in your Windows 8 application.  Then use Live Mesh to store your application in case you have to rebuild your machine.

 

 <Page

     x:Class="CHANGETHISTOMAPTOYOURPROJECTNAME.BlankPage"

     xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"

     xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"

     xmlns:local="using:XAMLStoryBoardAnimation"

     xmlns:d="https://schemas.microsoft.com/expression/blend/2008"

     xmlns:mc="https://schemas.openxmlformats.org/markup-compatibility/2006"

     mc:Ignorable="d">

  

     <Grid x:Name="LayoutRoot" Background="Purple">

         <Grid.Resources>

             <Storyboard x:Name="CurtainStoryBoard">

                 <DoubleAnimation

                         Storyboard.TargetName="CurtainTransform"

                         Storyboard.TargetProperty="TranslateX"

                         From="160" To="0" Duration="0:0:1" 

                         AutoReverse="True" 

                         RepeatBehavior="Forever" />

                 <DoubleAnimation

                         Storyboard.TargetName="CurtainTransform2"

                         Storyboard.TargetProperty="TranslateX"

                         From="0" To="160" Duration="0:0:1" 

                         AutoReverse="True" 

                         RepeatBehavior="Forever" />

             </Storyboard>

         </Grid.Resources>

  

         <StackPanel x:Name="StackPanel1"  

                     HorizontalAlignment="Left" Height="768" Width="160"

                     VerticalAlignment="Top"  Margin="1206,0,0,0" 

                     Background="Red">

             <StackPanel.RenderTransform>

                 <CompositeTransform x:Name="CurtainTransform" TranslateX="160"/>

             </StackPanel.RenderTransform>

             <TextBlock x:Name="txtSide1" 

                        HorizontalAlignment="Left" 

                        Text="Left" 

                        Width="162" Margin="0,0,0,0" FontSize="36"/>

             <Image x:Name="PlaneRight" Source="Assets/0.png"

                    HorizontalAlignment="Left" Height="100" Width="160"/>

         </StackPanel>

         <StackPanel x:Name="StackPanelLeft"  

                     HorizontalAlignment="Right" VerticalAlignment="Top" 

                     Height="768"  Width="160" Margin="-161,0,1367,0" 

                     Background="Blue">

             <StackPanel.RenderTransform>                

                 <CompositeTransform x:Name="CurtainTransform2" TranslateX="0"/>

             </StackPanel.RenderTransform>

             <TextBlock x:Name="txtSide2" 

                 Text="Right" TextAlignment="Right"

                 Width="162" Margin="0" FontSize="36" />

             <Image x:Name="PlaneLeft" Source="Assets/1.png"

                    HorizontalAlignment="Left" Height="100" Width="160"/>

         </StackPanel>

  

         <Button x:Name="bTransform" Content="Side Wings" 

                 HorizontalAlignment="Left" VerticalAlignment="Top" 

                 Width="160" Margin="546,279,0,0"

                 Click="bTransform_Click" />

     </Grid>

  

 </Page>

  

  

1