I have this button :
<Button x:Name="PrevAdIcon" Tag="-1" Visibility="Collapsed" Width="80" Height="80" Click="PrevAd">
<Button.Background>
<ImageBrush AlignmentY="Top" Stretch="None" ImageSource="/Images/prev.png"></ImageBrush>
</Button.Background>
</Button>
How can I change the background to /Images/prev-selected.png when a user pressed the button ? It'll give him a feedback, since it's a WP7 app
what I have so far (not working) :
<vsm:VisualState x:Name="Pressed">
<Storyboard>
<ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="Background" Storyboard.TargetProperty="Background">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<ImageBrush ImageSource="/Images/prev-selected.png" Stretch="Fill"/>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</vsm:VisualState>
As far as I know, you can't change the value of the Source property on the Image element by using the VisualStateManager. However, you can just add two Image elements to the ControlTemplate: one for the Normal state and one for the Pressed state, and toggle the Visibility in the Pressed state.
<VisualState x:Name="Pressed">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="Img">
<DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="PressedImg">
<DiscreteObjectKeyFrame KeyTime="0" Value="Visible" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
See Peter Torr's post on "Why can't I change the Background of my Button on a Click event?" for an example and explanation of how to do this.
To add more information to Derek's answer, you should look at Gambit's answer here for full XAML that works
Related
I'm working on transitioning some code from silverlight to WPF, and my VisualStates are not working correctly.
I am using visualstatemanager to control the visibility of some text fields. I am not using any transitions to animate the change, I just want the fields to be collapsed in one state, then visible in another.
Xaml from silverlight:
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="LostPasswordStates">
<VisualState x:Name="LostPassword_Start">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="lbl_UserName" Storyboard.TargetProperty="(UIElement.Visibility)">
<DiscreteObjectKeyFrame KeyTime="00:00:00" Value="Visible" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="txt_UserName" Storyboard.TargetProperty="(UIElement.Visibility)">
<DiscreteObjectKeyFrame KeyTime="00:00:00" Value="Visible" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="txt_UserName" Storyboard.TargetProperty="(TextBox.IsReadOnly)">
<DiscreteObjectKeyFrame KeyTime="00:00:00" Value="False" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="LostPassword_Success">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="lbl_UserName" Storyboard.TargetProperty="(UIElement.Visibility)">
<DiscreteObjectKeyFrame KeyTime="00:00:00" Value="Collapsed" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="txt_UserName" Storyboard.TargetProperty="(UIElement.Visibility)">
<DiscreteObjectKeyFrame KeyTime="00:00:00" Value="Collapsed" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="btn_Reset" Storyboard.TargetProperty="(UIElement.Visibility)">
<DiscreteObjectKeyFrame KeyTime="00:00:00" Value="Collapsed" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
I get the following exception :
An unhandled exception of type 'System.Windows.Media.Animation.AnimationException' occurred in PresentationCore.dll
Additional information: Cannot animate the 'Visibility' property on a 'System.Windows.Controls.TextBox' using a 'System.Windows.Media.Animation.ObjectAnimationUsingKeyFrames'. For details see the inner exception.
So my question to you is:
If I can't use a System.Windows.Media.Animation.ObjectAnimationUsingKeyFrames for this, what should I be using?
This works for me, using .NET 4.5:
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="LostPasswordStates">
<VisualState x:Name="LostPassword_Start">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="lbl_UserName" Storyboard.TargetProperty="(UIElement.Visibility)">
<DiscreteObjectKeyFrame KeyTime="00:00:00" Value="{x:Static Visibility.Visible}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="txt_UserName" Storyboard.TargetProperty="(UIElement.Visibility)">
<DiscreteObjectKeyFrame KeyTime="00:00:00" Value="{x:Static Visibility.Visible}" />
</ObjectAnimationUsingKeyFrames>
<BooleanAnimationUsingKeyFrames Storyboard.TargetName="txt_UserName" Storyboard.TargetProperty="(TextBox.IsReadOnly)">
<DiscreteBooleanKeyFrame KeyTime="00:00:00" Value="False" />
</BooleanAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="LostPassword_Success">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="lbl_UserName" Storyboard.TargetProperty="(UIElement.Visibility)">
<DiscreteObjectKeyFrame KeyTime="00:00:00" Value="{x:Static Visibility.Collapsed}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="txt_UserName" Storyboard.TargetProperty="(UIElement.Visibility)">
<DiscreteObjectKeyFrame KeyTime="00:00:00" Value="{x:Static Visibility.Collapsed}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="btn_Reset" Storyboard.TargetProperty="(UIElement.Visibility)">
<DiscreteObjectKeyFrame KeyTime="00:00:00" Value="{x:Static Visibility.Collapsed}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
There are two changes to your current code:
Instead of "Collapsed" and "Visible", the Value is set to "{x:Static Visibility.Collapsed}" and "{x:Static Visibility.Visible}";
The IsReadOnly property uses a BooleanAnimationUsingKeyFrames instead of an ObjectAnimationUsingKeyFrames;
You can only animate properties of numeric types (double). Visibility can not be animated because it is enum an there is no way to animate this meaningfull.
If you want to fadeout something you can use the opacity property.
In WPF, I'm trying to move an image from left to center, pause for a second, then move the image to the right.
I'm trying to achieve it using ObjectAnimationUsingKeyFrames.
<BeginStoryboard>
<Storyboard Storyboard.TargetName="RoundNumberText" >
<ObjectAnimationUsingKeyFrames Duration="0:0:1" Storyboard.TargetProperty="Left">
<DiscreteObjectKeyFrame Value="400" KeyTime="0:0:0.5"/>
<DiscreteObjectKeyFrame Value="1400" KeyTime="0:0:1.5"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
Somehow i got the error message on the TargetProperty that the object does not supported by this properties. I've tried with margin as well, but still giving error.
Appreciate if anyone could help.
To set the value for alignment, you need to do something like this:
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="MyImage"
Storyboard.TargetProperty="HorizontalAlignment">
<DiscreteObjectKeyFrame KeyTime="0:0:0">
<DiscreteObjectKeyFrame.Value>
<HorizontalAlignment>Center</HorizontalAlignment>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
Below is my example, where the image appears in the role of the Label:
<Grid>
<Grid.Triggers>
<EventTrigger SourceName="MoveToCenter" RoutedEvent="Button.Click">
<BeginStoryboard>
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="Test"
Storyboard.TargetProperty="HorizontalAlignment">
<DiscreteObjectKeyFrame KeyTime="0:0:0">
<DiscreteObjectKeyFrame.Value>
<HorizontalAlignment>Center</HorizontalAlignment>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames BeginTime="0:0:1"
Storyboard.TargetName="Test"
Storyboard.TargetProperty="HorizontalAlignment">
<DiscreteObjectKeyFrame KeyTime="0:0:0">
<DiscreteObjectKeyFrame.Value>
<HorizontalAlignment>Right</HorizontalAlignment>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Grid.Triggers>
<Label x:Name="Test" Content="Test" Width="300" Height="200" Background="Aqua" HorizontalAlignment="Left" />
<Button Name="MoveToCenter" Content="MoveToCenter" Width="120" Height="30" HorizontalAlignment="Right" VerticalAlignment="Bottom" />
</Grid>
In my silverlight app, I have two images of equal dimension.
When the user clicks on the image I would like to animate the transition of one image to the other as if it were a piece of paper being flipped with the first image on the front and the other on the back.
I haven't worked with silverlight animation, yet so I don't know where to begin.
Basically you will need two Storybards to begin with. Each Storyboard will be using PlaneProjection (in this case I am using RotationX which rotates the images around the x-axis of rotation) to do the flipping animation.
In the following example, I have created FlippingDown and FlippingUp two Storyboards. I attached a ControlStoryboardAction behavior to each of them, they will be triggered when MouseLeftButtonDown is fired.
You'll need to reference System.Windows.Interactivity and Microsoft.Expression.Interactions.
<UserControl xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity" xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions" mc:Ignorable="d" x:Class="FilppingAnimation.MainPage" Width="640" Height="480">
<UserControl.Resources>
<Storyboard x:Name="FlippingDown">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationX)" Storyboard.TargetName="Front">
<EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="90.0146"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.6" Value="180"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationX)" Storyboard.TargetName="Back">
<EasingDoubleKeyFrame KeyTime="0" Value="-180"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="-90"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.6" Value="0"/>
</DoubleAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="Front">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
<DiscreteObjectKeyFrame KeyTime="0:0:0.3">
<DiscreteObjectKeyFrame.Value>
<Visibility>Collapsed</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="Back">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
<DiscreteObjectKeyFrame KeyTime="0:0:0.3">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Name="FlippingUp">
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="Front">
<DiscreteObjectKeyFrame KeyTime="0:0:0.3">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<DoubleAnimation Duration="0:0:0.6" To="0" Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationX)" Storyboard.TargetName="Front" d:IsOptimized="True"/>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationX)" Storyboard.TargetName="Back">
<EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="-90.0146"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.6" Value="-180"/>
</DoubleAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="Back">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
<DiscreteObjectKeyFrame KeyTime="0:0:0.3">
<DiscreteObjectKeyFrame.Value>
<Visibility>Collapsed</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</UserControl.Resources>
<Grid x:Name="LayoutRoot" Background="#FFCC9E9E">
<Image x:Name="Back" HorizontalAlignment="Center" VerticalAlignment="Center" Source="/311438.jpg" Height="226" Width="129">
<i:Interaction.Triggers>
<i:EventTrigger EventName="MouseLeftButtonDown">
<ei:ControlStoryboardAction Storyboard="{StaticResource FlippingUp}"/>
</i:EventTrigger>
</i:Interaction.Triggers>
<Image.Projection>
<PlaneProjection/>
</Image.Projection>
</Image>
<Image x:Name="Front" HorizontalAlignment="Center" VerticalAlignment="Center" Source="/318549.jpg" Height="226" Width="129" d:IsHidden="True">
<Image.Projection>
<PlaneProjection/>
</Image.Projection>
<i:Interaction.Triggers>
<i:EventTrigger EventName="MouseLeftButtonDown">
<ei:ControlStoryboardAction Storyboard="{StaticResource FlippingDown}"/>
</i:EventTrigger>
</i:Interaction.Triggers>
</Image>
</Grid>
</UserControl>
Hope this helps. :)
You could search for info on Projection animations in Blend. This looks like what you need: http://www.silverlightbuzz.com/2009/10/14/using-the-3d-tools-to-animate-in-blend/
I've got a "toolbar" type control that is basically a set of buttons for "groups" of other buttons. The buttons and groups are arranged horizontally along the top of my window.
What I'd like is to have, when the user clicks one of the buttons for one of the groups, the list (probably an ItemsPanel) of other buttons for that group expands from being 0 width to being however wide it needs to be to hold the list of buttons.
So you'd start off with something like this:
_______
|G|G|G|
-------
where G is a group button. And if you click on the middle group button, you'll end up with this:
_______________
|G|G|B|B|B|B|G|
---------------
where the original group buttons are still there and the new buttons for the selected group have "grown" into place.
What's the best way to make this happen? Should I use a ListBox as the outer container and trigger an animation when IsSelected changes on one of the ListBoxItems? If so, how do I write an animation that goes from 0 width (or hidden) to "full width" (whatever that may be)?
Thanks!
I'd use fluid layout, not that this is the best way or anything, but its one way. Basically allows you to animate between say Auto width and 0 width.
<Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions"
xmlns:System="clr-namespace:System;assembly=mscorlib"
xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
x:Class="Example.MainWindow"
Title="MainWindow"
Height="350"
Width="525">
<Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="Group1" ei:ExtendedVisualStateManager.UseFluidLayout="True">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0:0:1"/>
</VisualStateGroup.Transitions>
<VisualState x:Name="G1Hidden">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Width)" Storyboard.TargetName="button">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<System:Double>0</System:Double>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Width)" Storyboard.TargetName="button1">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<System:Double>0</System:Double>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="G1Shown"/>
</VisualStateGroup>
<VisualStateGroup x:Name="Group2" ei:ExtendedVisualStateManager.UseFluidLayout="True">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0:0:1"/>
</VisualStateGroup.Transitions>
<VisualState x:Name="G2Hidden">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Width)" Storyboard.TargetName="button2">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<System:Double>0</System:Double>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Width)" Storyboard.TargetName="button3">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<System:Double>0</System:Double>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="G2Shown"/>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<VisualStateManager.CustomVisualStateManager>
<ei:ExtendedVisualStateManager/>
</VisualStateManager.CustomVisualStateManager>
<i:Interaction.Behaviors>
<ei:DataStateBehavior Binding="{Binding IsChecked, ElementName=toggleButton}" Value="True" TrueState="G1Shown" FalseState="G1Hidden"/>
<ei:DataStateBehavior Binding="{Binding IsChecked, ElementName=toggleButton1}" Value="True" TrueState="G2Shown" FalseState="G2Hidden"/>
</i:Interaction.Behaviors>
<StackPanel Orientation="Horizontal">
<ToggleButton x:Name="toggleButton" Content="Group1" />
<Button x:Name="button" Content="Group1B1" />
<Button x:Name="button1" Content="Group1B2" />
<ToggleButton x:Name="toggleButton1" Content="Group2" />
<Button x:Name="button2" Content="Group2B1" />
<Button x:Name="button3" Content="Group2B2" />
</StackPanel>
</Grid>
I'm looking for an example Style to change the look of the Silverlight BusyIndicator to more like the "spinning wheel" look of AJAX apps.
A lap around google produces some links to where people are creating new controls to achieve the same thing (I suspect they pre-date the BusyIndicator) but I'd rather skin the BusyIndicator if possible.
Anyone pont me in the right direction?
Thanks
Mark
I made my own custom BusyIndicator from Silverlight Toolkit
Here is what you need:
Set the System namespace in your style file:
xmlns:System="clr-namespace:System;assembly=mscorlib"
Put the style/template in your style file:
<ControlTemplate x:Key="AjaxBusyIndicatorControlTemplate" TargetType="toolkit:BusyIndicator">
<Grid x:Name="ColorLayer">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="VisibilityStates">
<VisualState x:Name="Hidden">
<Storyboard>
<ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.001" Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="busycontent">
<DiscreteObjectKeyFrame KeyTime="00:00:00">
<DiscreteObjectKeyFrame.Value>
<Visibility>Collapsed</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.001" Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="overlay">
<DiscreteObjectKeyFrame KeyTime="00:00:00">
<DiscreteObjectKeyFrame.Value>
<Visibility>Collapsed</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Visible">
<Storyboard>
<ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.001" Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="busycontent">
<DiscreteObjectKeyFrame KeyTime="00:00:00">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.001" Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="overlay">
<DiscreteObjectKeyFrame KeyTime="00:00:00">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="BusyStatusStates">
<VisualState x:Name="Idle">
<Storyboard>
<ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.001" Storyboard.TargetProperty="(Control.IsEnabled)" Storyboard.TargetName="content">
<DiscreteObjectKeyFrame KeyTime="00:00:00">
<DiscreteObjectKeyFrame.Value>
<System:Boolean>True</System:Boolean>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Busy">
<Storyboard RepeatBehavior="Forever" AutoReverse="False">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.Rotation)" Storyboard.TargetName="loader">
<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:1" Value="359.999"/>
</DoubleAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.001" Storyboard.TargetProperty="(Control.IsEnabled)" Storyboard.TargetName="content">
<DiscreteObjectKeyFrame KeyTime="00:00:00">
<DiscreteObjectKeyFrame.Value>
<System:Boolean>False</System:Boolean>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<ContentControl x:Name="content" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
<Rectangle x:Name="overlay" Style="{TemplateBinding OverlayStyle}"/>
<ContentPresenter x:Name="busycontent">
<Path x:Name="loader" Height="19" Width="19" Canvas.Left="0.5" Canvas.Top="0.5" Stretch="Fill" UseLayoutRounding="False" Stroke="Black" StrokeThickness="0.2" RenderTransformOrigin="0.5,0.5"
Data="M9.5,3 C5.9101491,3 3,5.9101491 3,9.5 C3,13.08985 5.9101491,16 9.5,16 C13.08985,16 16,13.08985 16,9.5 C16,5.9101491 13.08985,3 9.5,3 z M9.5,0 C14.746705,0 19,4.2532949 19,9.5 C19,14.746705 14.746705,19 9.5,19 C4.2532949,19 0,14.746705 0,9.5 C0,4.2532949 4.2532949,0 9.5,0 z">
<Path.RenderTransform>
<CompositeTransform/>
</Path.RenderTransform>
<Path.Fill>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF0089FF" Offset="0"/>
<GradientStop Color="White" Offset="1"/>
</LinearGradientBrush>
</Path.Fill>
</Path>
</ContentPresenter>
</Grid>
</ControlTemplate>
<Style x:Key="AjaxBusyIndicator" TargetType="toolkit:BusyIndicator" >
<Setter Property="Template" Value="{StaticResource AjaxBusyIndicatorControlTemplate}"/>
</Style>
Use it in your XAML:
<Grid x:Name="LayoutRoot" Background="White">
<toolkit:BusyIndicator IsBusy="True" Style="{StaticResource AjaxBusyIndicator}">
<TextBox Text="TEST test test" />
</toolkit:BusyIndicator>
</Grid>
Well really a common scenario.. Silverlight devs usually use
Link this type of control. but as your requirement is to have it like AJAX i think this link could be helpful:
http://chrisa.wordpress.com/2008/10/09/a-wait-indicator-in-silverlight/
Here are some hints on how to customize data template for busy indicator:
http://www.jeff.wilcox.name/2009/11/busy-indicator-control/
Regards.