Question

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>

Answer 1

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>