2

我拒绝 View 中的故事板

  <Storyboard x:Key="ExpandAdd" >
            <ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="AddUsers" Storyboard.TargetProperty="(UIElement.Visibility)">
                <DiscreteObjectKeyFrame KeyTime="00:00:00" Value="{x:Static Visibility.Collapsed}"/>
                <DiscreteObjectKeyFrame KeyTime="00:00:00.3000000" Value="{x:Static Visibility.Visible}"/>
            </ObjectAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="DetailBorder" Storyboard.TargetProperty="(UIElement.Opacity)">
                <SplineDoubleKeyFrame KeyTime="00:00:00" Value="1"/>
                <SplineDoubleKeyFrame KeyTime="00:00:00.3000000" Value="0.4"/>
            </DoubleAnimationUsingKeyFrames>
            <BooleanAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="DetailBorder" Storyboard.TargetProperty="(UIElement.IsEnabled)">
                <DiscreteBooleanKeyFrame KeyTime="00:00:00" Value="False"/>
            </BooleanAnimationUsingKeyFrames>
        </Storyboard>

我有一个按钮并绑定到一个 relaycommand 。

<Button x:Name="AddUserButton"  Content="اضافه">
   <i:Interaction.Triggers>
      <i:EventTrigger EventName="Click">
        <cmd:EventToCommand Command="{Binding AddUsers}"/>
      </i:EventTrigger>
   </i:Interaction.Triggers>
</Button>

我想在执行 RelayCommand(AddUsers) 时播放故事板。

4

5 回答 5

5

您不应该Storyboard从您的ViewModel. 它完全违背了目的MVVM。

您可以将情节提要应用于在Button.LostMouseCapture事件调用命令后引发的Click事件 -

<Button x:Name="AddUserButton"  Content="اضافه">
   <i:Interaction.Triggers>
      <i:EventTrigger EventName="Click">
        <cmd:EventToCommand Command="{Binding AddUsers}"/>
      </i:EventTrigger>
   </i:Interaction.Triggers>
   <Button.Triggers>
       <EventTrigger RoutedEvent="Button.LostMouseCapture">
            <BeginStoryboard Storyboard="{StaticResource ExpandAdd}">
       </EventTrigger>
   </Button.Triggers>
</Button>
于 2013-07-21T07:49:45.327 回答
5

实际上，通过使用绑定到 ViewModel 中的属性的 DataTrigger，这相对容易做到，从而从 MV 触发 Storyboard，同时仍然保持关注点分离。这是一个非常简短的示例，其中 Storyboard 会根据 VM 中的布尔值更改为 True 来增大图像的大小。

<Image
    Grid.Row="0" 
    x:Name="LockImage"
    Source="/StoryboardManagerExample;component/Resources/LockedPadlock.png" 
    Width="50"
    RenderTransformOrigin="0.5,0.5">

    <Image.RenderTransform>
        <TransformGroup>
            <ScaleTransform x:Name="ptScale" ScaleX="1" ScaleY="1"/>
            <SkewTransform />
            <RotateTransform />
            <TranslateTransform />
        </TransformGroup>
    </Image.RenderTransform>

    <Image.Style>
        <Style>
            <Style.Triggers>
                <DataTrigger
                    Binding="{Binding RunStoryboard}" Value="True">
                    <DataTrigger.EnterActions>
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimation
                                Storyboard.TargetProperty="Width"
                                From="50"
                                To="100"
                                Duration="0:0:1"
                                RepeatBehavior="1x"
                                AutoReverse="True"
                                />

                            </Storyboard>
                        </BeginStoryboard>
                    </DataTrigger.EnterActions>
                </DataTrigger>
            </Style.Triggers>
        </Style>
    </Image.Style>
</Image>
于 2014-12-04T14:42:34.847 回答
1

只要您指定了 x:Name，您就可以从代码隐藏中调用 Storyboard。但是，您需要实现 button_click 事件处理程序，而不是 ViewModel 的命令。

如果您使用的是 MVVM，那么您应该真正遵守 ViewModel 不应该“了解”视图细节的原则。

于 2013-07-21T07:17:15.500 回答
0

请不要从视图模型触发情节提要。如果你这样做了，那么拥有视图模型就没有意义了。

在视图后面的代码中实现中继命令的任何代码，然后如果需要，您可以调用视图模型来执行特定于视图模型的任何操作。当您从视图后面的代码中引用情节提要时，您可以只按名称引用它。

于 2013-07-21T07:12:36.997 回答
0

对于 UWP：您可以在其中定义情节提要VisualStates并通过更改 ViewModel 中的属性来运行它。如果您将IsRefreshWorking属性更改为true动画开始。

使用 IsTrueTrigger 定义 VisualState：

    <VisualStateManager.VisualStateGroups>
       <VisualStateGroup x:Name="RefreshProgressVisualStates">
          <VisualState x:Name="NotWorkingVisualState" />
          <VisualState x:Name="WorkingVisualState">
             <Storyboard  AutoReverse="False" RepeatBehavior="Forever">
                <DoubleAnimation Duration="0:0:1" To="360" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.Rotation)" Storyboard.TargetName="RefreshIcon" />
             </Storyboard>
             <VisualState.StateTriggers>
                <StateTrigger  IsActive="{x:Bind ViewModel.IsRefreshWorking, Mode=OneWay}" />
             </VisualState.StateTriggers>
          </VisualState>
       </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>

带动画的 AppBarButton：

<AppBarButton>
  <AppBarButton.Icon>
     <SymbolIcon x:Name="RefreshIcon"  Symbol="Refresh" RenderTransformOrigin="0.5,0.5" >
         <SymbolIcon.RenderTransform>
            <CompositeTransform/>
         </SymbolIcon.RenderTransform>
      </SymbolIcon>
  </AppBarButton.Icon>
</AppBarButton>
于 2018-06-10T17:33:30.283 回答