<Window
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
x:Class="QWERTY.animation"
x:Name="Window"
Title="animation"
Width="640" Height="480">
<Window.Resources>
<Storyboard x:Key="Animation">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(TextElement.FontSize)" Storyboard.TargetName="btn_1">
<EasingDoubleKeyFrame KeyTime="0" Value="11"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="10.667"/>
</DoubleAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(TextElement.FontWeight)" Storyboard.TargetName="btn_1">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<FontWeight>Normal</FontWeight>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
<DiscreteObjectKeyFrame KeyTime="0:0:0.3">
<DiscreteObjectKeyFrame.Value>
<FontWeight>Bold</FontWeight>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(GradientBrush.GradientStops)[1].(GradientStop.Color)" Storyboard.TargetName="btn_1">
<EasingColorKeyFrame KeyTime="0" Value="#FFEAF0ED"/>
<EasingColorKeyFrame KeyTime="0:0:0.3" Value="#FF106285"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
</Window.Resources>
<Grid x:Name="LayoutRoot">
<Button x:Name="btn_2" Content="B" Height="55" Margin="236,98,0,0" VerticalAlignment="Top" Click="btn_2_Click" HorizontalAlignment="Left" Width="72" />
<Button x:Name="btn_1" Content="A" Height="55" Margin="115,98,0,0" VerticalAlignment="Top" HorizontalAlignment="Left" Width="72" Click="btn_1_Click">
<Button.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="White" Offset="0"/>
<GradientStop Color="#FFEAF0ED" Offset="0.9"/>
</LinearGradientBrush>
</Button.Background>
</Button>
<Button Content="Remove" HorizontalAlignment="Left" Margin="173,179,0,217" Width="75" Click="Button_Click" />
</Grid>
The design will be like below
public partial class animation : Window
{
Storyboard SB;
public animation()
{
this.InitializeComponent();
}
public void Animate(string name)
{
SB = (Storyboard)(FindResource("Animation"));
Storyboard.SetTargetName(SB.Children[0], name);
Storyboard.SetTargetName(SB.Children[1], name);
Storyboard.SetTargetName(SB.Children[2], name);
SB.Begin();
}
private void btn_1_Click(object sender, RoutedEventArgs e)
{
Button Btn_1 = (Button)sender;
Animate(btn_1.Name);
}
private void btn_2_Click(object sender, RoutedEventArgs e)
{
Button Btn_2 = (Button)sender;
Animate(Btn_2.Name);
}
private void Button_Click(object sender, RoutedEventArgs e)
{
SB.Remove();
}
}
It's output will be like below
The above result is after i clicked two buttons one by one.Then I clicked the remove button,only the button B animation is removed. But i want to remove button A and button B animation by clicking of remove button.
You can have only one TargetName at a Time assigned to the Storyboard. By using SetTargetName you are Transfering the Target to the new Button. Then when you click remove, you remove the last one you added. Take a look at this Blog its for SilverLight but should apply here. Your only other option would to be to use Style.Triggers and put your animation in the Style.
From above Link:
In this example, it might not be desirable to stop an animation on one rectangle so that the animation can start on another rectangle. Perhaps you want both animations to run at the same time. However, you cannot use the same animation object to run two separate animations at the same time, because there is only one TargetName. This does not mean that you are back to creating a separate Storyboard for every object. Instead, you need one Storyboard for each animation that you want to run concurrently (synchronously).
Related
I've read about a dozen articles on how to pause and resume an WPF storyboard, but I just can't get it to work.
Here's my problem: I have a User control with a storyboard. The storyboard looks like this:
<UserControl.Resources>
<Storyboard x:Key="TheStoryboard" RepeatBehavior="Forever">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)" Storyboard.TargetName="Arc1">
<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:2" Value="90"/>
<EasingDoubleKeyFrame KeyTime="0:0:4" Value="180"/>
<EasingDoubleKeyFrame KeyTime="0:0:6" Value="270"/>
<EasingDoubleKeyFrame KeyTime="0:0:8" Value="360"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</UserControl.Resources>
Simple enough, it makes an ark spin forever.
Now in the code behind I have a dependency property which is bound to a Boolean value indicating when the animation should be spinning or stopped. This triggers a method which should, in theory, pause or resume the animation.
It looks something like this:
private void SetStoryBoardActivity(bool play)
{
var storyboard = (Storyboard)this.Resources["TheStoryboard"];
if (play)
{
storyboard.Resume();
}
else
{
storyboard.Pause();
}
}
The execution path enters the method as intended, however the animation doesn't stop when calling Pause(); I've tried
storyboard.Stop();
storyboard.Stop(this);
storyboard.Stop(this.Arc1);
storyboard.Freeze();
storyboard.Pause();
storyboard.Pause(this);
storyboard.Pause(this.Arc1);
but nothing seems to work. Does anyone know what I'm doing wrong?
So the Answer in my case seems to be visual states.
I manged to make this work in the following manner:
I moved the storyboard to a visual state manager like this:
<Grid x:Name="LayoutRoot">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="Animation">
<VisualState x:Name="On">
<Storyboard RepeatBehavior="Forever">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)" Storyboard.TargetName="Arc1">
<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:2" Value="90"/>
<EasingDoubleKeyFrame KeyTime="0:0:4" Value="180"/>
<EasingDoubleKeyFrame KeyTime="0:0:6" Value="270"/>
<EasingDoubleKeyFrame KeyTime="0:0:8" Value="360"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Off"/>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<ed:Arc x:Name="Arc1" ArcThickness="15" ArcThicknessUnit="Pixel" StartAngle="30" EndAngle="150" Fill="#C0375E77" HorizontalAlignment="Center" Height="200" Width="200" Margin="0,0,0,0" Stretch="None" Stroke="#FF204050" StrokeThickness="2" VerticalAlignment="Center" RenderTransformOrigin="0.5,0.5" >
<ed:Arc.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform/>
</TransformGroup>
</ed:Arc.RenderTransform>
</ed:Arc>
</Grid>
Please note that the visual state manager is not placed in the control's resources, but in the control's main container.
Where ed is:
xmlns:ed="http://schemas.microsoft.com/expression/2010/drawing"
And the SetStoryBoardActivity method becomes:
private void SetStoryBoardActivity()
{
VisualStateManager.GoToState(this, this.AnimationActive ? "On" : "Off", true);
}
Where this.AnimationActive is the dependency property mentioned in my question.
How about trying out with:
Storyboard storyboard = (Storyboard)this.Resources["TheStoryboard"];
private void BeginStoryBoard()
{
storyboard.begin(this, true);
}
private void SetStoryBoardActivity(bool play)
{
if (play)
{
storyboard.Resume(this);
}
else
{
storyboard.Pause(this);
}
}
Below given code is used for toggling images. It works but when I click on button white rectangle is shown as a foreground of button. Is there any better way?
private void music_click(object sender, RoutedEventArgs e)
{
System.Diagnostics.Debug.WriteLine("music clickedddd");
switch (key)
{
case 1:
var brush = new ImageBrush();
BitmapImage image = new BitmapImage(new Uri(#"Images/music pause button.png", UriKind.Relative));
brush.ImageSource = image;
music.Background = brush;
key = 0;
System.Diagnostics.Debug.WriteLine("music clickedddd pause");
break;
case 0:
var brush2 = new ImageBrush();
BitmapImage image2 = new BitmapImage(new Uri(#"Images/Music on.png", UriKind.Relative));
brush2.ImageSource = image1;
music.Background = brush2;
key = 1;
System.Diagnostics.Debug.WriteLine("music clickedddd play");
break;
}
}
I recommend styling your ToggleButton to show two different VisualStates for the two cases "paused" and "running" (The ToggleButton control supports the two VisualStates "Checked" and "Unchecked").
How would I do this?
Well I tried the following code and it works:
<UserControl
x:Class="SilverlightApplication2.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<UserControl.Resources>
<ControlTemplate x:Key="MySpecialToggleButton" TargetType="ToggleButton">
<Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CheckStates">
<VisualState x:Name="Checked">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="RunningIcon">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="PausedIcon">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Collapsed</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Unchecked"/>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Image x:Name="PausedIcon" Source="/SilverlightApplication2;component/assets/paused.png" Visibility="Visible" Width="16" Height="16"/>
<Image x:Name="RunningIcon" Source="/SilverlightApplication2;component/assets/running.png" Visibility="Collapsed" Width="16" Height="16"/>
</Grid>
</ControlTemplate>
</UserControl.Resources>
<ToggleButton Height="20" Width="20" Template="{StaticResource MySpecialToggleButton}"/>
I assume you still want to handle the toggling to start playing music or stop it, well you can still handle the click in code behind but you won't have to change the button appearance anymore. And you do not have to track whether the button is toggled or not (your variable named "key"), you can always ask your button if it is checked or unchecked. And you do not need to aks it, just use the specialized ToggleButton events "Checked" and "Unchecked".
You should try using StoryBorads (http://msdn.microsoft.com/en-us/library/ms742868(v=vs.110).aspx) for this type of animation.
I am trying to do an animation for the Splashscreen in windows phone 8. I've completed the animation for an object to bounce. But after completing the animation it should immediately switch to the next page. How to do this task?
//MainPage.xaml
<phone:PhoneApplicationPage.Resources>
<Storyboard x:Name="Storyboard1">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" Storyboard.TargetName="arc">
<EasingDoubleKeyFrame KeyTime="0" Value="-555">
<EasingDoubleKeyFrame.EasingFunction>
<BounceEase EasingMode="EaseOut"/>
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
<DiscreteDoubleKeyFrame KeyTime="0:0:5" Value="-150"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</phone:PhoneApplicationPage.Resources>
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<es:Arc x:Name="arc" ArcThickness="20" ArcThicknessUnit="Pixel" EndAngle="360" HorizontalAlignment="Left" Height="100" Margin="174,369.5,0,0" Stretch="None" Stroke="Black" StartAngle="0" UseLayoutRounding="False" VerticalAlignment="Top" Width="100" RenderTransformOrigin="0.5,0.5" Loaded="arc_Loaded">
<es:Arc.RenderTransform>
<CompositeTransform/>
</es:Arc.RenderTransform>
<es:Arc.Fill>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF3B9E5B" Offset="0"/>
<GradientStop Color="#FF8D2727" Offset="1"/>
</LinearGradientBrush>
</es:Arc.Fill>
</es:Arc>
</Grid>
Heres the solution to it But I guess you need to share more about the problem if this doesnot help
<Storyboard x:Name="StoryboardTest" Completed="Storyboard_Completed">
//What ever animation you want to do
</Storyboard>
And in the cs file:
private void Storyboard_Completed(object sender, EventArgs e)
{
NavigationService.Navigate(new Uri("/SecondPage.xaml", UriKind.Relative));
}
For a demo on animating splash screen go to this link
progress bar splash screen and apply your animation accordingly.
You can handle the Storyboard's Completed event.
Storyboard myStoryboard = Resources["Storyboard1"] as Storyboard;
if(myStoryboard != null)
{
myStoryboard.Completed += (s,e) =>
{
NavigationService.Navigate(new Uri("/NextPage.xaml", UriKind.Relative));
};
myStoryboard.Begin();
}
You can navigate to the next page in Completed event of the sotryboard.
<Storyboard x:Name="Storyboard1" Completed="Storyboard_Completed_1">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" Storyboard.TargetName="arc">
<EasingDoubleKeyFrame KeyTime="0" Value="-555">
<EasingDoubleKeyFrame.EasingFunction>
<BounceEase EasingMode="EaseOut"/>
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
<DiscreteDoubleKeyFrame KeyTime="0:0:5" Value="-150"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
And in the code behind:
private void Storyboard_Completed_1(object sender, EventArgs e)
{
// Do whatever you wanted
}
This is XAML code till now
<Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
x:Class="Flip_Panel.MainWindow"
x:Name="Window"
Title="MainWindow"
Width="750"
Height="550"
Loaded="Window_Loaded">
<StackPanel x:Name="Panel">
<Grid Margin="10"
x:Name="Flip"
Height="480"
Width="750">
<StackPanel x:Name="Front">
<Image x:Name="Vinodh_Object"></Image>
</StackPanel>
<StackPanel x:Name="Back"
Height="480"
Width="750">
<Image x:Name="Thilak_Object"></Image>
</StackPanel>
</Grid>
<Button x:Name="FlipButton"
Width="100"
Height="25"
Content="Flip to Back"
HorizontalAlignment="Center"
Margin="0,-50,0,0"></Button>
<Button x:Name="FlipButton1"
Width="100"
Height="25"
Content="Flip to Front"
HorizontalAlignment="Center"
Margin="0,-50,0,0"></Button>
</StackPanel>
</Window>
Now When the first click event occurs I want the panel to flip and then when I again after clicking I want the panel to flip again to show the first image ?
How do i proceed from here on ?
Thanks
I use something that gives the impression of flipping. You'll want to add your own variables names but this might help you get started.
<Storyboard Name="sbFlip"
x:Key="sbFlip">
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00"
Storyboard.TargetName="frontSideContainer"
Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleY)">
<SplineDoubleKeyFrame KeyTime="00:00:00.2"
Value="0" />
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00.2"
Storyboard.TargetName="backPanel"
Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleY)">
<SplineDoubleKeyFrame KeyTime="00:00:00.3"
Value="1" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Name="sbReverse"
x:Key="sbReverse">
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00"
Storyboard.TargetName="backPanel"
Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleY)">
<SplineDoubleKeyFrame KeyTime="00:00:00.2"
Value="0" />
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00.2"
Storyboard.TargetName="frontSideContainer"
Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleY)">
<SplineDoubleKeyFrame KeyTime="00:00:00.3"
Value="1" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
Effectively it's changing the height of one panel and bringing into view another. It will give you a flip effect.
If you want to execute this is C# you could use something like the following:
public void Flip()
{
if (!Reversed)
{
Storyboard sbFlip = Resources["sbFlip"] as Storyboard;
sbFlip.Begin();
Reversed = true;
}
else
{
Reversed = false;
Storyboard sbReverse = Resources["sbReverse"] as Storyboard;
sbReverse.Begin();
}
}
I would like to have an item's width shrink on a click of a button.
Right now I have two objects basically, when you click the button on objectA, a storyboard starts that rotates it around the x-axis and collapses it. Then it shows objectB by setting it's visibility to visible and rotates it around into view.
All I want to add is setting the width smaller while the storyboard is happening to objectA and objectB and then setting it back to normal at the end of the storyboard.
I tried setting the Thickness but I got a compile-time error complaining that it was readonly.
<ObjectAnimationUsingKeyFrames
BeginTime="00:00:00"
Storyboard.TargetName="objectA"
Storyboard.TargetProperty="(UIElement.Margin)">
<DiscreteObjectKeyFrame KeyTime="00:00:00">
<DiscreteObjectKeyFrame.Value>
<Thickness Left="10" Right="10"/>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
I have a simple layout for now...
Here is my UI XAML:
<StackPanel>
<Border x:Name="objectA" BorderBrush="Blue" BorderThickness="1" Height="100" Width="100">
<StackPanel>
<TextBox Margin="10"></TextBox>
<Button Width="50" x:Name="btn1" Content="Flip" Click="btn1_Click"/>
</StackPanel>
<Border.Projection>
<PlaneProjection RotationX="0"></PlaneProjection>
</Border.Projection>
</Border>
<Border Visibility="Collapsed" x:Name="objectB" BorderBrush="Red" BorderThickness="1" Height="100" Width="100">
<StackPanel>
<TextBox Margin="10"></TextBox>
<Button Width="50" x:Name="btn2" Content="Flip" Click="btn2_Click"/>
</StackPanel>
<Border.Projection>
<PlaneProjection RotationX="90"></PlaneProjection>
</Border.Projection>
</Border>
Here is the storyboard...
<Storyboard x:Name="Storyboardtest">
<DoubleAnimation BeginTime="00:00:00"
Storyboard.TargetName="objectA"
Storyboard.TargetProperty="(UIElement.Projection).(RotationX)"
From="0" To="-90">
</DoubleAnimation>
<ObjectAnimationUsingKeyFrames
BeginTime="00:00:01"
Storyboard.TargetName="objectA"
Storyboard.TargetProperty="(UIElement.Visibility)">
<DiscreteObjectKeyFrame KeyTime="00:00:00">
<DiscreteObjectKeyFrame.Value>
<Visibility>Collapsed</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames
BeginTime="00:00:01"
Storyboard.TargetName="objectB"
Storyboard.TargetProperty="(UIElement.Visibility)">
<DiscreteObjectKeyFrame KeyTime="00:00:00">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<DoubleAnimation BeginTime="00:00:01"
Storyboard.TargetName="objectB"
Storyboard.TargetProperty="(UIElement.Projection).(RotationX)"
From="90" To="0">
</DoubleAnimation>
</Storyboard>
If it is just the visual width you want to affect, add the following to your storyboard. It will give the appearance of the controls moving into the distance and back as it flips:
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleX)" Storyboard.TargetName="objectA">
<EasingDoubleKeyFrame KeyTime="0" Value="1"/>
<EasingDoubleKeyFrame KeyTime="0:0:1" Value="0.5"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleX)" Storyboard.TargetName="objectB">
<EasingDoubleKeyFrame KeyTime="0" Value="1"/>
<EasingDoubleKeyFrame KeyTime="0:0:1" Value="0.5"/>
<EasingDoubleKeyFrame KeyTime="0:0:2" Value="1"/>
</DoubleAnimationUsingKeyFrames>
you will also need to add the following as I used Expression blend to add the animation and it adds any required elements automatically:
<Border x:Name="objectA" BorderBrush="Blue" BorderThickness="1" Height="100" Width="100" RenderTransformOrigin="0.5,0.5">
<Border.RenderTransform>
<CompositeTransform/>
</Border.RenderTransform>
[Snip]
<Border Visibility="Collapsed" x:Name="objectB" BorderBrush="Red" BorderThickness="1" Height="100" Width="100" RenderTransformOrigin="0.5,0.5">
<Border.RenderTransform>
<CompositeTransform/>
</Border.RenderTransform>
The problem is that both the Width and Margin properties are not DependencyProperties so they can not be animated. On workaround method to accomplish this involves adding some custom DependencyProperties to your user control code-behind which can be hooked up to the storyboard and can in turn manipulate the actual properties of the objects.
For example you could add this DependencyProperty to your UserControl which basically allow the setting of the Width property of object A:
public static readonly DependencyProperty ObjectWidthProperty = DependencyProperty.Register(
"ObjectWidth",
typeof(double),
typeof(MainPage),
new PropertyMetadata(50.0, new PropertyChangedCallback(OnObjectWidthChanged)));
public double ObjectWidth
{
get { return (double)GetValue(ObjectWidthProperty); }
set { SetValue(ObjectWidthProperty, value); }
}
private static void OnObjectWidthChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
{
((MainPage)d).OnObjectWidthChanged(e);
}
private void OnObjectWidthChanged(DependencyPropertyChangedEventArgs e)
{
this.objectA.Width = this.ObjectWidth;
}
You could then add the following to your storyboard which would animate the width of objectA from 50 pixels down to 0:
<DoubleAnimation BeginTime="00:00:00"
Storyboard.TargetName="MyControl"
Storyboard.TargetProperty="ObjectWidth"
From="50" To="0"/>
The would also require you to add x:Name="MyControl" to your top-level UserControl. It's a little bit hacky, but it works to animate some of the underlying properties of elements that don't happen to be DependencyPropertys.