ViewModel에서 StoryBoard를 시작하는 방법은 무엇입니까?

Question

필자는 Telerik 컨트롤을 사용하고 있습니다.

<telerik:RadPanelBarItem Collapsed="RadPanelBarItem_Collapsed" 
            DropPosition="Inside" 
            Header="Searching for Clients" 
            IsExpanded="false" 
            IsTabStop="True" 
            TabNavigation="Once"> 

    <i:Interaction.Triggers> 
     <i:EventTrigger EventName="Expanded"> 
      <i:InvokeCommandAction Command="{Binding ExpandedComand}" /> 
     </i:EventTrigger> 
    </i:Interaction.Triggers> 
</telerik:RadPanelBarItem> 

Expanded 이벤트가 발생할 때마다 ViewModel 내에서 코드를 실행하고 싶습니다. 지금까지는 그렇게 좋았지 만 확장 할 때 애니메이션을 시작해야합니다. 하지만 ViewModel에서는 불가능하지만 뷰에서 실행해야합니다.

ArrowStoryboard.Begin(); 

어떻게해야합니까?

UPDATE :

는 혼란을 야기 보인다 나를 좀 더 정교한 보자. ViewModel에서 뷰 관련 애니메이션을 실행할 필요가 없습니다. 하지만 확장 이벤트에서 두 가지를 실행해야합니다. 1) 애니메이션을 시작하고 2) viewModel에 일련의 코드를 실행합니다.

코드 숨김 광고 코드로 알 수있는 유일한 방법은 다음과 같습니다. DataContext를 ViewModel로 캐스팅하고 Animation 시작 직후 ViewModel에서 해당 메서드를 실행합니다.

감사합니다,

Answer 1

왜 제쳐두고 InvokeCommandAction을 다른 행동 ControlStoryboardAction를 부착하지?

xmlns:eim="clr-namespace:Microsoft.Expression.Interactivity.Media;assembly=Microsoft.Expression.Interactions" 

<i:Interaction.Triggers> 
    <i:EventTrigger EventName="Expanded"> 
     <i:InvokeCommandAction Command="{Binding ExpandedComand}" /> 
     <eim:ControlStoryboardAction Storyboard="{StaticResource YourStoryBoard}"/> 
    </i:EventTrigger> 
</i:Interaction.Triggers> 

UPDATE

그것은 혼합을 사용하여 스타일 내부 애니메이션 이런 종류의 할 일이 많은 사실이 아니다.

기본적으로 여기에서했던 것은 Blend를 사용하여 RadPanelBarItem의 기본 스타일을 생성 한 다음 확장 된 비주얼 상태에서 화살표를 벗어나 영원히 움직이는 애니메이션을 만들었습니다.

정확히 원하는 애니메이션이 아닙니다 (화살표가 오른쪽이 아닌 위로 올라갑니다).하지만 아이디어가 충분할 수 있습니다. 희망이 도움이됩니다. :)

그냥 스타일 이름을 적용하십시오 AnimatedRadPanelBarItemStyle.

<LinearGradientBrush x:Key="ControlItem_Background_Normal" EndPoint="0.5,1" StartPoint="0.5,0"> 
     <GradientStop Color="White"/> 
     <GradientStop Color="Gainsboro" Offset="0.43"/> 
     <GradientStop Color="#FFADADAD" Offset="0.44"/> 
     <GradientStop Color="#FFD4D4D4" Offset="1"/> 
    </LinearGradientBrush> 
    <SolidColorBrush x:Key="ControlItem_OuterBorder_Normal" Color="#FF848484"/> 
    <SolidColorBrush x:Key="ControlForeground_Normal" Color="#FF000000"/> 
    <SolidColorBrush x:Key="ControlItem_InnerBorder_Normal" Color="#FFFFFFFF"/> 
    <SolidColorBrush x:Key="ControlItem_OuterBorder_MouseOver" Color="#FFFFC92B"/> 
    <SolidColorBrush x:Key="ControlItem_InnerBorder_MouseOver" Color="#FFFFFFFF"/> 
    <LinearGradientBrush x:Key="ControlItem_Background_MouseOver" EndPoint="0.5,1" StartPoint="0.5,0"> 
     <GradientStop Color="#FFFFFBA3" Offset="1"/> 
     <GradientStop Color="#FFFFFBDA" Offset="0"/> 
     <GradientStop Color="#FFFFD25A" Offset="0.43"/> 
     <GradientStop Color="#FFFEEBAE" Offset="0.42"/> 
    </LinearGradientBrush> 
    <LinearGradientBrush x:Key="ControlItem_OuterBorder_Selected" EndPoint="0.5,1" StartPoint="0.5,0"> 
     <GradientStop Color="#FF282828"/> 
     <GradientStop Color="#FF5F5F5F" Offset="1"/> 
    </LinearGradientBrush> 
    <LinearGradientBrush x:Key="ControlItem_InnerBorder_Selected" EndPoint="0.5,1" StartPoint="0.5,0"> 
     <GradientStop Color="#FFB69A78"/> 
     <GradientStop Color="#FFFFE17A" Offset="0.126"/> 
    </LinearGradientBrush> 
    <LinearGradientBrush x:Key="ControlItem_Background_Selected" EndPoint="0.5,1" StartPoint="0.5,0"> 
     <GradientStop Color="#FFFFD74E" Offset="0.996"/> 
     <GradientStop Color="#FFFFDCAB" Offset="0.17"/> 
     <GradientStop Color="#FFFFB062" Offset="0.57"/> 
     <GradientStop Color="#FFFFD18F" Offset="0.56"/> 
     <GradientStop Color="#FFFFBA74"/> 
    </LinearGradientBrush> 
    <SolidColorBrush x:Key="ControlOuterBorder_Disabled" Color="#FF989898"/> 
    <SolidColorBrush x:Key="ControlInnerBorder_Disabled" Color="Transparent"/> 
    <SolidColorBrush x:Key="ControlBackground_Disabled" Color="#FFE0E0E0"/> 
    <SolidColorBrush x:Key="ControlElement_Normal" Color="#FF000000"/> 
    <SolidColorBrush x:Key="FocusBrushBlack" Color="#FF000000"/> 
    <ControlTemplate x:Key="PanelBarItemTopLevelTemplate" TargetType="telerik:RadPanelBarItem"> 
     <Grid x:Name="RootElement"> 
      <Grid.RowDefinitions> 
       <RowDefinition Height="Auto"/> 
       <RowDefinition Height="*"/> 
      </Grid.RowDefinitions> 
      <VisualStateManager.VisualStateGroups> 
       <VisualStateGroup x:Name="CommonStates"> 
        <VisualState x:Name="Normal"/> 
        <VisualState x:Name="Disabled"> 
         <Storyboard> 
          <DoubleAnimation Duration="0" To="0" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="NormalVisual"/> 
          <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="DisabledVisual"/> 
          <DoubleAnimation Duration="0" To="0.5" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="Header"/> 
          <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="arrow"> 
           <DiscreteObjectKeyFrame KeyTime="0"> 
            <DiscreteObjectKeyFrame.Value> 
             <Visibility>Collapsed</Visibility> 
            </DiscreteObjectKeyFrame.Value> 
           </DiscreteObjectKeyFrame> 
          </ObjectAnimationUsingKeyFrames> 
         </Storyboard> 
        </VisualState> 
        <VisualState x:Name="MouseOver"> 
         <Storyboard> 
          <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="MouseOverVisual"/> 
         </Storyboard> 
        </VisualState> 
        <VisualState x:Name="MouseOut"/> 
       </VisualStateGroup> 
       <VisualStateGroup x:Name="SelectionStates"> 
        <VisualState x:Name="Unselected"/> 
        <VisualState x:Name="Selected"> 
         <Storyboard> 
          <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="SelectVisual"/> 
         </Storyboard> 
        </VisualState> 
       </VisualStateGroup> 
       <VisualStateGroup x:Name="ExpandStates"> 
        <VisualState x:Name="Expanded"> 
         <Storyboard RepeatBehavior="Forever"> 
          <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="ItemsContainer"> 
           <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/> 
          </ObjectAnimationUsingKeyFrames> 
          <DoubleAnimation Duration="0:0:0.2" From="0.0" To="1.0" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="ItemsContainer"/> 
          <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" Storyboard.TargetName="arrow"> 
           <EasingDoubleKeyFrame KeyTime="0:0:1" Value="-6"/> 
           <EasingDoubleKeyFrame KeyTime="0:0:1.2" Value="0"/> 
           <EasingDoubleKeyFrame KeyTime="0:0:1.4" Value="0"/> 
          </DoubleAnimationUsingKeyFrames> 
          <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.Rotation)" Storyboard.TargetName="arrow"> 
           <EasingDoubleKeyFrame KeyTime="0" Value="180"/> 
           <EasingDoubleKeyFrame KeyTime="0:0:1" Value="180"/> 
           <EasingDoubleKeyFrame KeyTime="0:0:1.2" Value="180"/> 
           <EasingDoubleKeyFrame KeyTime="0:0:1.4" Value="180"/> 
          </DoubleAnimationUsingKeyFrames> 
          <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="arrow"> 
           <EasingDoubleKeyFrame KeyTime="0" Value="1"/> 
           <EasingDoubleKeyFrame KeyTime="0:0:1" Value="0"/> 
           <EasingDoubleKeyFrame KeyTime="0:0:1.2" Value="0"/> 
           <EasingDoubleKeyFrame KeyTime="0:0:1.4" Value="1"/> 
          </DoubleAnimationUsingKeyFrames> 
         </Storyboard> 
        </VisualState> 
        <VisualState x:Name="Collapsed"/> 
       </VisualStateGroup> 
       <VisualStateGroup x:Name="FocusStates"> 
        <VisualState x:Name="Focused"> 
         <Storyboard> 
          <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="FocusVisual"> 
           <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/> 
          </ObjectAnimationUsingKeyFrames> 
         </Storyboard> 
        </VisualState> 
        <VisualState x:Name="Unfocused"> 
         <Storyboard> 
          <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="FocusVisual"> 
           <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/> 
          </ObjectAnimationUsingKeyFrames> 
         </Storyboard> 
        </VisualState> 
       </VisualStateGroup> 
      </VisualStateManager.VisualStateGroups> 
      <Grid x:Name="HeaderRow"> 
       <Grid.ColumnDefinitions> 
        <ColumnDefinition Width="Auto"/> 
        <ColumnDefinition Width="Auto"/> 
        <ColumnDefinition Width="Auto"/> 
        <ColumnDefinition Width="*"/> 
        <ColumnDefinition Width="Auto"/> 
       </Grid.ColumnDefinitions> 
       <Border x:Name="NormalVisual" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Grid.ColumnSpan="5"> 
        <Border BorderBrush="{StaticResource ControlItem_InnerBorder_Normal}" BorderThickness="1" Background="{TemplateBinding Background}"/> 
       </Border> 
       <Border x:Name="MouseOverVisual" BorderBrush="{StaticResource ControlItem_OuterBorder_MouseOver}" BorderThickness="1" Grid.ColumnSpan="5" Opacity="0"> 
        <Border BorderBrush="{StaticResource ControlItem_InnerBorder_MouseOver}" BorderThickness="1" Background="{StaticResource ControlItem_Background_MouseOver}"/> 
       </Border> 
       <Border x:Name="SelectVisual" BorderBrush="{StaticResource ControlItem_OuterBorder_Selected}" BorderThickness="1" Grid.ColumnSpan="5" Opacity="0"> 
        <Border BorderBrush="{StaticResource ControlItem_InnerBorder_Selected}" BorderThickness="1" Background="{StaticResource ControlItem_Background_Selected}"/> 
       </Border> 
       <Border x:Name="DisabledVisual" BorderBrush="{StaticResource ControlOuterBorder_Disabled}" BorderThickness="1" Grid.ColumnSpan="5" Opacity="0"> 
        <Border BorderBrush="{StaticResource ControlInnerBorder_Disabled}" BorderThickness="1" Background="{StaticResource ControlBackground_Disabled}"/> 
       </Border> 
       <Path x:Name="arrow" Grid.Column="5" Data="M 1,1.5 L 4.5,5 L 8,1.5" HorizontalAlignment="Right" Margin="7 0" Opacity="1" RenderTransformOrigin="0.5 0.5" Stretch="None" Stroke="{StaticResource ControlElement_Normal}" StrokeThickness="2" VerticalAlignment="Center"> 
        <Path.RenderTransform> 
         <CompositeTransform Rotation="0"/> 
        </Path.RenderTransform> 
       </Path> 
       <ContentPresenter x:Name="Header" Grid.ColumnSpan="4" ContentTemplate="{TemplateBinding HeaderTemplate}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/> 
       <Rectangle x:Name="FocusVisual" Grid.ColumnSpan="5" Grid.Column="0" IsHitTestVisible="False" Stroke="{StaticResource FocusBrushBlack}" StrokeThickness="1" StrokeDashArray="1 2" Visibility="Collapsed"/> 
      </Grid> 
      <Grid x:Name="ItemsContainer" Grid.Row="1" Visibility="Collapsed"> 
       <telerik:LayoutTransformControl x:Name="transformationRoot"> 
        <ItemsPresenter/> 
       </telerik:LayoutTransformControl> 
      </Grid> 
     </Grid> 
    </ControlTemplate> 
    <SolidColorBrush x:Key="ControlSubItem_OuterBorder_MouseOver" Color="#FFFFC92B"/> 
    <Thickness x:Key="ControlSubItem_OuterBorderThickness">1</Thickness> 
    <SolidColorBrush x:Key="ControlSubItem_InnerBorder_MouseOver" Color="#FFFFFFFF"/> 
    <Thickness x:Key="ControlSubItem_InnerBorderThickness">1</Thickness> 
    <LinearGradientBrush x:Key="ControlSubItem_Background_MouseOver" EndPoint="0.5,1" StartPoint="0.5,0"> 
     <GradientStop Color="#FFFFFBA3" Offset="1"/> 
     <GradientStop Color="#FFFFFBDA" Offset="0"/> 
    </LinearGradientBrush> 
    <CornerRadius x:Key="ControlSubItem_InnerCornerRadius">0</CornerRadius> 
    <CornerRadius x:Key="ControlSubItem_OuterCornerRadius">1</CornerRadius> 
    <SolidColorBrush x:Key="ControlSubItem_OuterBorder_Selected" Color="#FFFFC92B"/> 
    <SolidColorBrush x:Key="ControlSubItem_InnerBorder_Selected" Color="#FFFFFFFF"/> 
    <LinearGradientBrush x:Key="ControlSubItem_Background_Selected" EndPoint="0.5,1" StartPoint="0.5,0"> 
     <GradientStop Color="#FFFCE79F" Offset="1"/> 
     <GradientStop Color="#FFFDD3A8"/> 
    </LinearGradientBrush> 
    <ControlTemplate x:Key="PanelBarItemSecondLevelTemplate" TargetType="telerik:RadPanelBarItem"> 
     <Grid x:Name="RootElement"> 
      <Grid.RowDefinitions> 
       <RowDefinition Height="Auto"/> 
       <RowDefinition Height="*"/> 
      </Grid.RowDefinitions> 
      <VisualStateManager.VisualStateGroups> 
       <VisualStateGroup x:Name="CommonStates"> 
        <VisualState x:Name="Normal"/> 
        <VisualState x:Name="Disabled"> 
         <Storyboard> 
          <DoubleAnimation Duration="0" To="1.0" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="DisabledVisual"/> 
         </Storyboard> 
        </VisualState> 
        <VisualState x:Name="MouseOver"> 
         <Storyboard> 
          <DoubleAnimation Duration="0:0:0.2" To="1.0" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="MouseOverVisual"/> 
         </Storyboard> 
        </VisualState> 
        <VisualState x:Name="MouseOut"> 
         <Storyboard> 
          <DoubleAnimation Duration="0:0:0.2" To="0.0" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="MouseOverVisual"/> 
         </Storyboard> 
        </VisualState> 
       </VisualStateGroup> 
       <VisualStateGroup x:Name="SelectionStates"> 
        <VisualState x:Name="Unselected"/> 
        <VisualState x:Name="Selected"> 
         <Storyboard> 
          <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="SelectionVisual"/> 
         </Storyboard> 
        </VisualState> 
       </VisualStateGroup> 
       <VisualStateGroup x:Name="ExpandStates"> 
        <VisualState x:Name="Expanded"> 
         <Storyboard> 
          <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="ItemsContainer"> 
           <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/> 
          </ObjectAnimationUsingKeyFrames> 
          <DoubleAnimation Duration="0:0:0.2" From="0.0" To="1.0" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="ItemsContainer"/> 
         </Storyboard> 
        </VisualState> 
        <VisualState x:Name="Collapsed"/> 
       </VisualStateGroup> 
       <VisualStateGroup x:Name="FocusStates"> 
        <VisualState x:Name="Focused"> 
         <Storyboard> 
          <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="FocusVisual"> 
           <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/> 
          </ObjectAnimationUsingKeyFrames> 
         </Storyboard> 
        </VisualState> 
        <VisualState x:Name="Unfocused"> 
         <Storyboard> 
          <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="FocusVisual"> 
           <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/> 
          </ObjectAnimationUsingKeyFrames> 
         </Storyboard> 
        </VisualState> 
       </VisualStateGroup> 
      </VisualStateManager.VisualStateGroups> 
      <Grid x:Name="HeaderRow" Background="Transparent"> 
       <Border x:Name="MouseOverVisual" BorderBrush="{StaticResource ControlSubItem_OuterBorder_MouseOver}" BorderThickness="{StaticResource ControlSubItem_OuterBorderThickness}" CornerRadius="{StaticResource ControlSubItem_OuterCornerRadius}" Opacity="0"> 
        <Border BorderBrush="{StaticResource ControlSubItem_InnerBorder_MouseOver}" BorderThickness="{StaticResource ControlSubItem_InnerBorderThickness}" Background="{StaticResource ControlSubItem_Background_MouseOver}" CornerRadius="{StaticResource ControlSubItem_InnerCornerRadius}"/> 
       </Border> 
       <Border x:Name="SelectionVisual" BorderBrush="{StaticResource ControlSubItem_OuterBorder_Selected}" BorderThickness="{StaticResource ControlSubItem_OuterBorderThickness}" CornerRadius="{StaticResource ControlSubItem_OuterCornerRadius}" Opacity="0"> 
        <Border BorderBrush="{StaticResource ControlSubItem_InnerBorder_Selected}" BorderThickness="{StaticResource ControlSubItem_InnerBorderThickness}" Background="{StaticResource ControlSubItem_Background_Selected}" CornerRadius="{StaticResource ControlSubItem_InnerCornerRadius}"/> 
       </Border> 
       <Border x:Name="DisabledVisual" BorderBrush="{StaticResource ControlOuterBorder_Disabled}" BorderThickness="{StaticResource ControlSubItem_OuterBorderThickness}" CornerRadius="{StaticResource ControlSubItem_OuterCornerRadius}" Opacity="0"> 
        <Border BorderBrush="{StaticResource ControlInnerBorder_Disabled}" BorderThickness="{StaticResource ControlSubItem_InnerBorderThickness}" Background="{StaticResource ControlBackground_Disabled}" CornerRadius="{StaticResource ControlSubItem_InnerCornerRadius}"/> 
       </Border> 
       <ContentPresenter x:Name="Header" ContentTemplate="{TemplateBinding HeaderTemplate}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/> 
       <Rectangle x:Name="FocusVisual" IsHitTestVisible="False" RadiusY="2" RadiusX="2" Stroke="{StaticResource FocusBrushBlack}" StrokeThickness="1" StrokeDashArray="1 2" Visibility="Collapsed"/> 
      </Grid> 
      <Grid x:Name="ItemsContainer" Grid.Row="1" Visibility="Collapsed"> 
       <ItemsPresenter/> 
      </Grid> 
     </Grid> 
    </ControlTemplate> 
    <Style x:Key="AnimatedRadPanelBarItemStyle" TargetType="telerik:RadPanelBarItem"> 
     <Setter Property="Background" Value="{StaticResource ControlItem_Background_Normal}"/> 
     <Setter Property="BorderBrush" Value="{StaticResource ControlItem_OuterBorder_Normal}"/> 
     <Setter Property="BorderThickness" Value="1"/> 
     <Setter Property="Foreground" Value="{StaticResource ControlForeground_Normal}"/> 
     <Setter Property="TabNavigation" Value="Once"/> 
     <Setter Property="IsTabStop" Value="True"/> 
     <Setter Property="Template" Value="{StaticResource PanelBarItemTopLevelTemplate}"/> 
     <Setter Property="Padding" Value="3"/> 
     <Setter Property="HorizontalContentAlignment" Value="Stretch"/> 
     <Setter Property="VerticalContentAlignment" Value="Stretch"/> 
     <Setter Property="ChildItemsTemplate" Value="{StaticResource PanelBarItemSecondLevelTemplate}"/> 
     <Setter Property="ItemsPanel"> 
      <Setter.Value> 
       <ItemsPanelTemplate> 
        <telerik:PanelBarPanel/> 
       </ItemsPanelTemplate> 
      </Setter.Value> 
     </Setter> 
    </Style> 

Answer 2

그것은 스토리 보드 뷰 모델과는 아무 상관이 없기 때문에 뷰 모델에서보기 특정 작업을 올리는 나쁜 생각입니다. 당신이하고 싶은 것을 성취 할 수있는 두 가지 방법이 있습니다.

1. 뷰를 ViewModel에 삽입 할 수 있지만 MVVM에서 뷰 및 뷰 모델을 덜 결합하려고하므로이 아이디어가 마음에 들지 않습니다.
2. 메시지 서비스를 사용하여 서로를 알지 못하는 방식으로 View와 ViewModel간에 데이터를 보내고 검색합니다. 내 프로젝트에 MVVMLight를 채택하고 Messenger 클래스를 사용합니다. MVVMLight는 매우 사용하기 쉽습니다.