4

我想通过单击按钮来缩小项目的宽度。

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

我要添加的只是在情节提要发生在 objectA 和 objectB 时将宽度设置得更小，然后在情节提要的末尾将其设置为正常。

我尝试设置厚度，但我收到一个编译时错误，抱怨它是只读的。

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

2 回答 2

5

如果它只是您想要影响的视觉宽度，请将以下内容添加到您的故事板中。当它翻转时，它将呈现控件向远处移动并返回的外观：

    <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>
于 2010-08-18T22:30:55.690 回答
0

问题是 Width 和 Margin 属性都不是 DependencyProperties，因此它们不能被动画化。实现此目的的解决方法包括将一些自定义 DependencyProperties 添加到您的用户控件代码隐藏中，这些代码隐藏可以连接到情节提要，进而可以操纵对象的实际属性。

例如，您可以将此 DependencyProperty 添加到您的 UserControl 中，这基本上允许设置对象 A 的 Width 属性：

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

然后，您可以将以下内容添加到情节提要中，这将使 objectA 的宽度从 50 像素下降到 0：

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

这还需要您将 x:Name="MyControl" 添加到您的顶级 UserControl。这有点 hacky，但它可以为元素的一些底层属性设置动画，这些属性并不碰巧是 DependencyPropertys。

于 2010-08-18T22:32:21.693 回答