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