Can Silverlight animate object using Storyboard without... RSS

• 

  Allardyce

  None

  0 Points

  8 Posts

  • Reply
  •  

  Can Silverlight animate object using Storyboard without explisit calling method Begin() ?

  Jan 16, 2009 01:43 PM | LINK

  Hi All,

  I unsuccessfully try to animate button when 'Mouse is over' in 'Style'. If I manually perform 'Begin()' in, suppose, 'Click' event - animate

  works well, but manually attach method for every object - it is not a best practice. Please help me. Thanks.

  Here is my code:

  App.xaml:

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

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

  x:Class="SilverlightApplication3.App"

  >

  <Application.Resources>

  <Style x:Key="myButton" TargetType="Button">

  <Setter Property="HorizontalAlignment" Value="Center"/>

  <Setter Property="Content" Value="222"/>

  <Setter Property="Template">

  <Setter.Value>

  <ControlTemplate>

  <Border x:Name="brd1" Width="100" Height="22" CornerRadius="05" HorizontalAlignment="Center" VerticalAlignment="Center">

  <TextBlock x:Name="txt2" TextAlignment="Center" Text="{TemplateBinding Content}" FontSize="11" VerticalAlignment="center">

  <TextBlock.Resources>

   

  <Storyboard x:Key="MouseOver State">

  <ColorAnimation Storyboard.TargetName="scb" To="Red" Duration="0:0:0.5" Storyboard.TargetProperty="Color" AutoReverse="True"/>

  </Storyboard>

   

  </TextBlock.Resources>

  <TextBlock.Foreground>

  <SolidColorBrush Color="#222" x:Name="scb" />

  </TextBlock.Foreground>

  </TextBlock>

  <Border.Background>

  <RadialGradientBrush GradientOrigin=".3, .3">

  <GradientStop Color="#FFF" Offset=".15"/>

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

  </RadialGradientBrush>

  </Border.Background>

  </Border>

  </ControlTemplate>

  </Setter.Value>

  </Setter>

  </Style>

  </Application.Resources>

  </Application>

  Page.xaml

  <UserControl x:Class="SilverlightApplication3.Page"

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

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

  >

  <Grid HorizontalAlignment="Center">

  <Button x:Name="Button5" Content="999" Style="{StaticResource myButton}" />

  </Grid>

   

  </UserControl>

• 

  bryant

  Star

  10113 Points

  1662 Posts

  • Reply
  •  

  Re: Can Silverlight animate object using Storyboard without explisit calling method Begin() ?

  Jan 16, 2009 02:07 PM | LINK

  With Silverlight you're pretty much stuck writing some code to trigger animations. What you can do is create a custom control that has the behavior you want and then just use multiple instances of that control instead of writting code to animate a bunch of buttons.

  -- bryant
  
  Blog | Twitter
  _________________
  Dont forget to click "Mark as Answer" on the post that helped you.
• 

  MoHassan

  Member

  467 Points

  151 Posts

  • Reply
  •  

  Re: Can Silverlight animate object using Storyboard without explisit calling method Begin() ?

  Jan 16, 2009 02:22 PM | LINK

  Hello,

  You don't need any code to animate Mouse over for button see the markup below. Sorry if I did not not understand the qestion but you can use Visual State Manager for that.

  <UserControl x:Class="SilverSandBox.Page"

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

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

  Width="500" Height="300"

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

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

  HorizontalAlignment="Stretch" x:Name="frmMain" BorderBrush="#FF006892"

  xmlns:vsm="clr-namespace:System.Windows;assembly=System.Windows" VerticalAlignment="Stretch" >

  <UserControl.Resources>

  <Style x:Key="MyButtonStyle" TargetType="Button">

  <Setter Property="Background" Value="#FF1F3B53"/>

  <Setter Property="Foreground" Value="#FF000000"/>

  <Setter Property="Padding" Value="3"/>

  <Setter Property="BorderThickness" Value="1"/>

  <Setter Property="BorderBrush">

  <Setter.Value>

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

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

  <GradientStop Color="#FF8399A9" Offset="0.375"/>

  <GradientStop Color="#FF718597" Offset="0.375"/>

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

  </LinearGradientBrush>

  </Setter.Value>

  </Setter>

  <Setter Property="Template">

  <Setter.Value>

  <ControlTemplate TargetType="Button">

  <Grid>

  <vsm:VisualStateManager.VisualStateGroups>

  <vsm:VisualStateGroup x:Name="CommonStates">

  <vsm:VisualStateGroup.Transitions>

  <vsm:VisualTransition GeneratedDuration="00:00:00.2000000"/>

  </vsm:VisualStateGroup.Transitions>

  <vsm:VisualState x:Name="Normal"/>

  <vsm:VisualState x:Name="MouseOver">

  <Storyboard>

  <ColorAnimationUsingKeyFrames Storyboard.TargetName="rectangle" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)" BeginTime="00:00:00" Duration="00:00:00.0010000">

  <SplineColorKeyFrame KeyTime="00:00:00" Value="#FFFF0000"/>

  </ColorAnimationUsingKeyFrames>

  </Storyboard>

  </vsm:VisualState>

  <vsm:VisualState x:Name="Pressed">

  <Storyboard>

  <ColorAnimationUsingKeyFrames Storyboard.TargetName="Background" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)">

  <SplineColorKeyFrame KeyTime="0" Value="#FF6DBDD1"/>

  </ColorAnimationUsingKeyFrames>

  </Storyboard>

  </vsm:VisualState>

  <vsm:VisualState x:Name="Disabled">

  <Storyboard/>

  </vsm:VisualState>

  </vsm:VisualStateGroup>

  <vsm:VisualStateGroup x:Name="FocusStates">

  <vsm:VisualState x:Name="Focused">

  <Storyboard/>

  </vsm:VisualState>

  <vsm:VisualState x:Name="Unfocused"/>

  </vsm:VisualStateGroup>

  </vsm:VisualStateManager.VisualStateGroups>

  <Border x:Name="Background" Background="White" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="3">

  <Rectangle Fill="#00FF0000" Stroke="#FF000000" StrokeThickness="0" x:Name="rectangle"/>

  </Border>

  <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" x:Name="contentPresenter" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}"/>

  </Grid>

  </ControlTemplate>

  </Setter.Value>

  </Setter>

  </Style>

  </UserControl.Resources>

  <Grid x:Name="LayoutRoot" Background="#FFEBE7DB">

  <Button Height="30" HorizontalAlignment="Center" Style="{StaticResource MyButtonStyle}" VerticalAlignment="Center" Width="90" Content="Button"/>

  </Grid>

  </UserControl>

   

   

• 

  Allardyce

  None

  0 Points

  8 Posts

  • Reply
  •  

  Re: Can Silverlight animate object using Storyboard without explisit calling method Begin() ?

  Jan 16, 2009 02:24 PM | LINK

  Thanks, Bryant, I've understood.

• 

  Allardyce

  None

  0 Points

  8 Posts

  • Reply
  •  

  Re: Can Silverlight animate object using Storyboard without explisit calling method Begin() ?

  Jan 16, 2009 02:30 PM | LINK

  Oh, MoHassan, thank you very much! It is exactly the thing I wanted to know! I'll try to test your code just now.

• 

  Allardyce

  None

  0 Points

  8 Posts

  • Reply
  •  

  Re: Can Silverlight animate object using Storyboard without explisit calling method Begin() ?

  Jan 16, 2009 02:38 PM | LINK

  MoHassan, it works well! Thank you very much!

• 

  MoHassan

  Member

  467 Points

  151 Posts

  • Reply
  •  

  Re: Can Silverlight animate object using Storyboard without explisit calling method Begin() ?

  Jan 16, 2009 02:44 PM | LINK

  Hi,

  Please check out the videos in the learn section. Also Dont forget to click "Mark as Answer".

  Good luck

  Hassan