Monday, 30 May 2011

Simple XAML fade

Getting a control in WPF or Silverlight to fade in on a specific event is a doddle.

Here’s an example of a menu control I created that fades in when the StackPanel has loaded. 

The StackPanel contains multiple menu item controls, each of which comprises of an image and some text.

The key points here are:

  • EventTrigger RoutedEvent which tells the animation to start on the StackPanel.Loaded event
  • Use a double animation, double being the opacity value data type
<StackPanel x:Name="MenuContainer" Orientation="Horizontal" HorizontalAlignment="Center">

<StackPanel.Triggers>
<EventTrigger RoutedEvent="StackPanel.Loaded">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="MenuContainer"
Storyboard.TargetProperty="Opacity"
From="0.0"
To="1.0"
Duration="0:0:3" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</StackPanel.Triggers>

</StackPanel>

Full source:  http://stevenhollidge.com/blog-source-code/Silverblade-Prism.7z

1 comment:

  1. It would be great if you can show the source code.

    ReplyDelete