Jul 27, 2007

Simple animated WPF application - with no line of code

Playing around with Microsoft Expression Blend 2 May CTP I noticed that this tool got much better since my last trial in September 2006. There is even already an August CTP ready for download.

So let's create a simple WPF application without writing one line of code. After starting or when the "Hello World" text is clicked, it should turn around it's upper x axis.


- color the window Background with a red-to-black gradient brush
- add a StackPanel to the default Grid type LayoutRoot under window
- add a Rectange below the Stackpanel that is filled with a black-to-white gradient brush (with a 35% opacity)
- also add a label to the LayoutRoot with the "Hello World" Content
- in the "Objects and Timeline" window add a new timeline "TurnLable"
- select the label and move the timeline to 1 second where you modify the RenderTransform property to translate in the Y direction (-48) and scale Y (-1)
- select the lable and move the timeline to 2 seconds where you set the RenderTransform translation Y back to 0 and the scale Y to 1
- in the Triggers window add a Window.Loaded trigger that Begins a TurnLable
- in the Triggers window add a Window.MouseDown trigger that does the same



Et voilĂ !

Here's the XAML for reference:

<Window

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

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

    x:Class="BookCover.Window1"

    x:Name="Window"

    Title="Window1"

    Width="640" Height="480" Background="{DynamicResource BlackRedGradient}">

 

    <Window.Resources>

        <LinearGradientBrush x:Key="BlackRedGradient" EndPoint="1,0.5" StartPoint="0,0.5">

            <GradientStop Color="#FF000000" Offset="0"/>

            <GradientStop Color="#FF790606" Offset="1"/>

        </LinearGradientBrush>

        <Storyboard x:Key="TurnLable">

            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="label" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)">

                <SplineDoubleKeyFrame KeyTime="00:00:01" Value="-48"/>

                <SplineDoubleKeyFrame KeyTime="00:00:02" Value="0"/>

            </DoubleAnimationUsingKeyFrames>

            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="label" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)">

                <SplineDoubleKeyFrame KeyTime="00:00:01" Value="0"/>

                <SplineDoubleKeyFrame KeyTime="00:00:02" Value="0"/>

            </DoubleAnimationUsingKeyFrames>

            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="label" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)">

                <SplineDoubleKeyFrame KeyTime="00:00:01" Value="-1"/>

                <SplineDoubleKeyFrame KeyTime="00:00:02" Value="1"/>

            </DoubleAnimationUsingKeyFrames>

        </Storyboard>

    </Window.Resources>

 

    <Window.Triggers>

        <EventTrigger RoutedEvent="FrameworkElement.Loaded">

            <BeginStoryboard x:Name="TurnLable_BeginStoryboard" Storyboard="{StaticResource TurnLable}"/>

        </EventTrigger>

        <EventTrigger RoutedEvent="Mouse.MouseDown">

            <BeginStoryboard Storyboard="{StaticResource TurnLable}"/>

        </EventTrigger>

    </Window.Triggers>

 

    <Grid x:Name="LayoutRoot">

        <Grid.ColumnDefinitions>

            <ColumnDefinition Width="*"/>

        </Grid.ColumnDefinitions>

        <Grid.RowDefinitions>

            <RowDefinition Height="0.29*"/>

            <RowDefinition Height="0.389*"/>

            <RowDefinition Height="0.321*"/>

        </Grid.RowDefinitions>

        <Label RenderTransformOrigin="0.5,0.5" HorizontalAlignment="Left" Margin="161,52.08,0,0" x:Name="label" VerticalAlignment="Top" Content="Hello WPF" FontFamily="Verdana" FontSize="48" Foreground="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}" Grid.Row="1">

            <Label.RenderTransform>

                <TransformGroup>

                    <ScaleTransform ScaleX="1" ScaleY="1"/>

                    <SkewTransform AngleX="0" AngleY="0"/>

                    <RotateTransform Angle="0"/>

                    <TranslateTransform X="0"/>

                </TransformGroup>

            </Label.RenderTransform>

        </Label>

        <StackPanel Margin="0,129.92,0,0" Grid.RowSpan="2">

            <Rectangle Opacity="0.35" Stroke="#FF000000" Width="633.6" Height="174.272">

                <Rectangle.Fill>

                    <LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5">

                        <GradientStop Color="#FF000000" Offset="0"/>

                        <GradientStop Color="#FFFFFFFF" Offset="1"/>

                    </LinearGradientBrush>

                </Rectangle.Fill>

            </Rectangle>

        </StackPanel>

        <ToolBarPanel Opacity="1" Margin="0,0,0,61.92">

            <StackPanel Height="100">

                <ToolBar Width="100" Height="100">

                    <Button Width="100" Height="100" Content="Button" Foreground="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>

                </ToolBar>

                <Label ToolTip="This is my toolbars tool tip!" Width="100" Height="100" Content="Hello Markus" Background="{DynamicResource {x:Static SystemColors.ControlDarkBrushKey}}" Panel.ZIndex="0"/>

            </StackPanel>

        </ToolBarPanel>

    </Grid>

</Window>

No comments:

Post a Comment