c# - Silverlight Storyboard中的收缩面板

Question

我希望通过单击按钮缩小项目的宽度。

现在我基本上有两个对象，当您单击 objectA 上的按钮时， Storyboard将启动并围绕 x 轴旋转并折叠它。然后它通过将其可见性设置为可见来显示 objectB 并将其旋转到 View 中。

我想添加的是在 Storyboard 发生在 objectA 和 objectB 时将宽度设置得更小，然后在 Storyboard 结束时将其设置回正常值。

我尝试设置厚度，但出现编译时错误，提示它是只读的。

<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>

我现在有一个简单的布局...

这是我的 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>

这是 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

如果您只想影响视觉宽度，请将以下内容添加到 Storyboard中。它将给出控件在翻转时向远处移动并向后移动的外观:

    <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>

您还需要添加以下内容，因为我使用 Expression blend 添加动画，它会自动添加任何需要的元素:

    <Border x:Name="objectA" BorderBrush="Blue" BorderThickness="1" Height="100" Width="100" RenderTransformOrigin="0.5,0.5">
        <Border.RenderTransform>
            <CompositeTransform/>
        </Border.RenderTransform>

[截图]

    <Border Visibility="Collapsed" x:Name="objectB" BorderBrush="Red" BorderThickness="1" Height="100" Width="100" RenderTransformOrigin="0.5,0.5">
        <Border.RenderTransform>
            <CompositeTransform/>
        </Border.RenderTransform>