ViewModel에서 스토리 보드를 재생하는 방법?

Question

이 나는 ​​버튼이 있고 relaycommand에 결합

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

보기

에 storyborad을 defiend.

<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)가 실행될 때 스토리 보드를 재생하고 싶습니다.

Answer 1

ViewModel에서 Storyboard에 액세스하면 안됩니다. 그것은 MVVM의 목적을 완전히 상실합니다.

당신은 당신의 명령을 Click 이벤트에서 호출되는 후 제기됩니다 Button.LostMouseCapture 이벤트에 스토리 보드를 적용 할 수 있습니다 - 사실

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

Answer 2

viewmodel에서 스토리 보드를 트리거하지 마십시오. 당신이 그때하면 viewmodel가있는 아무 점도 없다.

뷰의 코드 숨김 코드를 구현 한 다음 필요한 경우 viewmodel을 호출하여 뷰 모델 전용 인 을 호출 할 수 있습니다. 스토리 보드를 뷰 뒤의 코드에서 참조하면 이름으로 참조 할 수 있습니다.

Answer 3

x : 이름을 지정한 경우 코드 숨김에서 스토리 보드를 호출 할 수 있습니다. 그런 다음에는 ViewModel에 대한 명령이 아닌 button_click 이벤트 핸들러를 구현해야합니다.

MVVM을 사용한다면 ViewModel이 뷰의 세부 사항을 "알지 못한다"는 원칙을 준수해야합니다.

Answer 4

, 이것은의 속성에 바인딩 된 DataTrigger를 사용하여 수행하는 비교적 쉽게 ViewModel을 사용하여 MV에서 스토리 보드를 트리거하면서 관심사의 분리를 유지합니다. 다음은 스토리 보드에서 VM의 bool이 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>