Geek Answers Handbook

Silverlight storyboard shrink panel

I would like the width of the element to decrease at the click of a button.

Now I have two objects basically, when you press the button on object A, the storyboard starts, which rotates it around the x axis and collapses it. Then he shows the object B, setting the visibility visible and turning it into the field of view.

All I want to add is to set the width smaller while the storyboard happens to objects A and objectB, and then return to normal at the end of the storyboard.

I tried to set the thickness, but I had a compile-time error complaining that it had just been read.

<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 now have a simple layout ...

Here is my XAML UI:

 <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>
+4
source share
2 answers

If this is just the visual width you want to affect, add the following to your storyboard. This will give the appearance of control moving a distance and back when 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, since I used the Expression mix to add animation and automatically add any required elements:

  <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>
+5
source

The problem is that the Width and Margin properties are not DependencyProperties, so they cannot be animated. In the workaround method, for this you need to add some custom DependencyProperties to your custom control code, after which you can connect to the storyboard and, in turn, manage the actual properties of the objects.

For example, you can add this DependencyProperty to your UserControl, which basically allows you to set 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 can then add the following to your storyboard, which will animate the width of object A from 50 pixels to 0:

 <DoubleAnimation BeginTime="00:00:00" Storyboard.TargetName="MyControl" Storyboard.TargetProperty="ObjectWidth" From="50" To="0"/>

You will also need to add x: Name = "MyControl" to your top-level UserControl. It is a bit hacked, but it works to revitalize some of the basic properties of elements that are not DependencyPropertys.

0
source

More articles:


All Articles