<Canvas xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
	x:Name="top" Width="800" Height="500" Canvas.Left="50">

  <Canvas.Resources>
    <Storyboard x:Name="demoAnimation">
      <DoubleAnimation Storyboard.TargetName="rotate" Storyboard.TargetProperty="Angle" From="0" To="360" Duration="00:00:05" />
      <DoubleAnimation Storyboard.TargetName="translate" Storyboard.TargetProperty="X" From="50" To="500" Duration="00:00:05" />
      <DoubleAnimation Storyboard.TargetName="rect" Storyboard.TargetProperty="Opacity" From="0" To="1" Duration="00:00:05" />
<!--      <ColorAnimation Storyboard.TargetName="backcolor1" Storyboard.TargetProperty="Color" From="#a40000" To="rgb(255,169,0)" Duration="00:00:05" />-->
    </Storyboard>
  </Canvas.Resources>

  <Canvas.Background>
    <LinearGradientBrush StartPoint="0%,0%" EndPoint="100%,0%">
        <GradientStop Offset="0%" Color="#2e3436" />
        <GradientStop x:Name="backcolor1" Offset="100%" Color="#a40000" />
    </LinearGradientBrush>
  </Canvas.Background>

  <!-- children -->
  <Image x:Name="child" Width="80" Height="80" Source="britney.jpg">

    <Image.RenderTransform>
      <TransformGroup>
	<TranslateTransform x:Name="translate" X="50" Y="50" />
        <ScaleTransform x:Name="scale" />
      </TransformGroup>
    </Image.RenderTransform>

    <Image.Triggers>
        <EventTrigger RoutedEvent="MouseEnter">
	  <BeginStoryboard>
	    <Storyboard Duration="0:0:0.1">
	      <DoubleAnimation Storyboard.TargetName="scale" Storyboard.TargetProperty="ScaleX" From="1.0" To="3.0" />
	      <DoubleAnimation Storyboard.TargetName="scale" Storyboard.TargetProperty="ScaleY" From="1.0" To="3.0" />
	      <DoubleAnimation Storyboard.TargetName="blur" Storyboard.TargetProperty="Radius" From="5" To="0.1" />
	    </Storyboard>
	  </BeginStoryboard>
        </EventTrigger>
        <EventTrigger RoutedEvent="MouseLeave">
	  <BeginStoryboard>
	    <Storyboard Duration="0:0:0.1">
	      <DoubleAnimation Storyboard.TargetName="scale" Storyboard.TargetProperty="ScaleX" From="3.0" To="1.0" />
	      <DoubleAnimation Storyboard.TargetName="scale" Storyboard.TargetProperty="ScaleY" From="3.0" To="1.0" />
	      <DoubleAnimation Storyboard.TargetName="blur" Storyboard.TargetProperty="Radius" From="0.1" To="5" />
	    </Storyboard>
	  </BeginStoryboard>
        </EventTrigger>
    </Image.Triggers>

    <Image.BitmapEffect>
	<BlurBitmapEffect x:Name="blur" Radius="5" />
    </Image.BitmapEffect>
  </Image>

  <TextBlock x:Name="text" FontSize="10" Canvas.Left="50" Canvas.Top="120" Text="Firelight:  Silverlight/WPF implemented entirely in JavaScript!">
    <TextBlock.Foreground>
      <LinearGradientBrush StartPoint="0%,50%" EndPoint="100%,50%">
        <GradientStop Offset="0%" Color="black" />
        <GradientStop Offset="50%" Color="yellow" />
        <GradientStop Offset="100%" Color="black" />
      </LinearGradientBrush>
    </TextBlock.Foreground>

    <TextBlock.RenderTransform>
      <TransformGroup>
        <RotateTransform x:Name="rotate" Angle="0" CenterX="150" CenterY="10" />
      </TransformGroup>
    </TextBlock.RenderTransform>

    <Rectangle.BitmapEffect>
	<DropShadowBitmapEffect ShadowDepth="5"/>
    </Rectangle.BitmapEffect>
  </TextBlock>

  <Rectangle x:Name="rect" Opacity="0" Canvas.Left="50" Canvas.Top="180" Width="100" Height="50" RadiusX="5" RadiusY="3" Fill="yellow" Stroke="black">
    <Rectangle.Triggers>
      <Trigger SourceName="rotate" Property="Angle" Value="360">
        <Setter TargetName="rect" Property="Fill" Value="red" />
      </Trigger>
    </Rectangle.Triggers>

    <Rectangle.BitmapEffect>
	<DropShadowBitmapEffect ShadowDepth="10"/>
    </Rectangle.BitmapEffect>
  </Rectangle>

</Canvas>
