0

目前，我正在做一些实验。我当前的场景：我有一个 StoryBoard 在 2 个 UserControl 之间进行转换（例如，它缩小了当前的 UserControl，然后增长了另一个）。

我想要做的是将 2 个用户控件定义为 XAML 的一部分，键为“当前”和“下一个”。Current 应该绑定到当前查看的 UserControl。Next 应该在转换之前绑定，因此 StoryBoard 知道要转换到哪个元素。这就是我卡住的地方：完全使用 XAML，如何解决这个问题？

我有一个简单的 StoryBoard，它是 ItemsControl 的资源，以及两个 UserControl 项：

<ItemsControl.Resources>
  <Storyboard x:Key="TransitionStoryboard">
    <!-- Shrink this one. -->
    <DoubleAnimation Storyboard.Target="{Binding Current}" Storyboard.TargetProperty="Width" To="0" Duration="0:0:1"/>
    <!--Grow the next.-->
    <DoubleAnimation Storyboard.Target="{Binding Next}" Storyboard.TargetProperty="Width" To="100" BeginTime="0:0:1" Duration="0:0:1"/>
  </Storyboard>

  <UserControl x:Key="Current"/>
  <UserControl x:Key="Next" Width="0"/>
</ItemsControl.Resources>

所以，当我定义一个属于 ItemsControl 的新 UserControl 时（像这样）：

<my:Control1 x:Name="ControlOne"/>

如何将“当前”用户控件顶部设置为 ControlOne？那么，当我想过渡时，如何将一个设置为“下一步”？触发后如何更改这些？

谢谢

4

1 回答 1

2

这是一团糟。您似乎完全误解了如何使用静态资源。

为了实现你想要做的事情，你应该首先决定什么会触发动画。理想情况下，它应该是DependencyProperty您的控件上的一些，或者是您的视图模型（实现INotifyPropertyChanged）上的一个属性。例如，您可以声明一个IsSelected属性。然后你应该创建一个样式，当控件被选中时触发“增长”动画，当控件失去选择时触发“收缩”动画。例如：

 <Style TargetType="Control" x:Key="FancyStyle">
     <Style.Triggers>
         <DataTrigger Binding={Binding IsSelected} Value="True">
             <DataTrigger.EnterActions>
                  <BeginStoryboard Storyboard="{StaticResource YourGrowAnim}"/>
             </DataTrigger.EnterActions>
             <DataTrigger.ExitActions>
                  <BeginStoryboard Storyboard="{StaticResource YourShrinkAnim}"/>
             </DataTrigger.ExitActions>
         </DataTrigger>
     </Style.Triggers>
 </Style>

然后您应该将该样式分配给每个控件，您希望以这种方式进行动画处理并在 IsSelected 属性之间设置过渡。您也可以EventTrigger改用动画并将动画绑定到事件（例如，您可以在控件获得/失去焦点时触发这些动画）。

您还应该修复您的“成长”动画，它很可能不起作用。

于 2013-09-27T11:13:16.440 回答