SketchFlow/TabControl에서 (선택된) TabItem을 트리거 상태로 사용

Question

컨텍스트 : 새로운 Sketchflow/Silverlight 프로젝트. Expression Blend 4 (Ultimate)

다음 코드가 있습니다. 2 개의 TabItem이있는 TabControl이 있습니다. 나는 또한 상태 변화에 대한 빠른 시각적 인 2 개의 "callout"(커다란 버블 것들)을 가지고있다.

VisualStateGroup을 만들고 그 아래에 States에 추가했습니다. (프로젝트를 실행 한 후) NAVIGATE 창에서 수동으로 호출하면 상태가 예상대로 작동합니다. 콜 아웃 1과 콜 아웃 2는 불투명도를 플립 (100 %에서 10 % 사이)합니다. 저는 주립 대학의 기본 방식과 그것이 어떻게 작동 하는지를 알고 있습니다.

그러나 트리거 이벤트를 TabItem에 추가하면 트리거가 정상적으로 보이지만 작동하지 않습니다. 다음은 베어 본 (bare bone)까지 벗겨진 예제입니다.

내가 EventName을 = "MouseLeftButtonDown" 및 EventName을 = 시도 행운과 "를 클릭하십시오."

또한 ObjectAnimationUsingKeyFrames 태그를 주석 처리 했으므로 여기에는 행운이 없습니다.

아무도보고 싶지 않습니다.

기본적으로 상태 변경을 트리거하기 위해 TabItem을 가져올 (선택하는) 수 없습니다.

감사합니다.

----------- START XAML 코드

<UserControl 
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
xmlns:data="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk" 
xmlns:System="clr-namespace:System;assembly=mscorlib" 
xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity" 
xmlns:pi="http://schemas.microsoft.com/prototyping/2010/interactivity" 
xmlns:ed="http://schemas.microsoft.com/expression/2010/drawing" 
    x:Class="MyProject.MyScreen" 
    Width="640" Height="480" mc:Ignorable="d"> 

    <Grid x:Name="LayoutRoot" Background="White"> 

       <VisualStateManager.VisualStateGroups> 
      <VisualStateGroup x:Name="VisibleTabs"> 
       <VisualState x:Name="Tab1VisualState"> 
        <Storyboard> 
         <DoubleAnimation Duration="0" To="1.0" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="callout1" d:IsOptimized="True"/> 
         <DoubleAnimation Duration="0" To="0.1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="callout2" d:IsOptimized="True"/> 

         <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(TabControl.SelectedIndex)" Storyboard.TargetName="tabControl"> 
          <DiscreteObjectKeyFrame KeyTime="0"> 
           <DiscreteObjectKeyFrame.Value> 
            <System:Int32>0</System:Int32> 
           </DiscreteObjectKeyFrame.Value> 
          </DiscreteObjectKeyFrame> 
         </ObjectAnimationUsingKeyFrames> 


        </Storyboard> 
       </VisualState> 
       <VisualState x:Name="Tab2VisualState"> 
        <Storyboard> 

         <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(TabControl.SelectedIndex)" Storyboard.TargetName="tabControl"> 
          <DiscreteObjectKeyFrame KeyTime="0"> 
           <DiscreteObjectKeyFrame.Value> 
            <System:Int32>1</System:Int32> 
           </DiscreteObjectKeyFrame.Value> 
          </DiscreteObjectKeyFrame> 
         </ObjectAnimationUsingKeyFrames> 

         <DoubleAnimation Duration="0" To="0.1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="callout1" d:IsOptimized="True"/> 
         <DoubleAnimation Duration="0" To="1.0" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="callout2" d:IsOptimized="True"/> 


        </Storyboard> 
       </VisualState> 
      </VisualStateGroup> 
     </VisualStateManager.VisualStateGroups> 


     <data:TabControl x:Name="tabControl" Height="150" Margin="41,0,215,50" VerticalAlignment="Bottom" SelectedIndex="0"> 
      <data:TabItem Header="Tab Number One" Height="24" VerticalAlignment="Bottom"> 
       <i:Interaction.Triggers> 
        <i:EventTrigger EventName="MouseLeftButtonDown"> 
         <pi:ActivateStateAction TargetState="Tab1VisualState"/> 
        </i:EventTrigger> 
       </i:Interaction.Triggers> 

      </data:TabItem> 
      <data:TabItem Header="Tab Number Two"> 
       <i:Interaction.Triggers> 
        <i:EventTrigger EventName="MouseLeftButtonDown"> 
         <pi:ActivateStateAction TargetState="Tab2VisualState"/> 
        </i:EventTrigger> 
       </i:Interaction.Triggers> 

      </data:TabItem> 
     </data:TabControl> 

     <ed:Callout x:Name="callout1" AnchorPoint="0,1.25" CalloutStyle="Oval" Content="Tab1 Rocks" Foreground="{StaticResource BaseForeground-Sketch}" Fill="{StaticResource BaseBackground-Sketch}" FontSize="{StaticResource SizeDouble-Sketch}" FontFamily="{StaticResource FontFamily-Sketch}" ed:GeometryEffect.GeometryEffect="Sketch" HorizontalAlignment="Left" Height="100" Margin="0,84,0,0" Stroke="{StaticResource BaseBorder-Sketch}" StrokeThickness="2" VerticalAlignment="Top" Width="200" Opacity="1.0"/> 
     <ed:Callout x:Name="callout2" AnchorPoint="0,1.25" CalloutStyle="Oval" Content="Tab2 Rocks" Foreground="{StaticResource BaseForeground-Sketch}" Fill="{StaticResource BaseBackground-Sketch}" FontSize="{StaticResource SizeDouble-Sketch}" FontFamily="{StaticResource FontFamily-Sketch}" ed:GeometryEffect.GeometryEffect="Sketch" HorizontalAlignment="Left" Height="100" Margin="200,84,0,0" Stroke="{StaticResource BaseBorder-Sketch}" StrokeThickness="2" VerticalAlignment="Top" Width="200" Opacity="0.1"/>  


    </Grid> 
</UserControl> 

Answer 1

몇 가지 아이디어가 있지만 명확한 아무것도 :

1. 그것은 stateActions에 대해 이야기 할 필요가있을 수 있습니다 visualstates의 위치 (이 코드 주위에는 보통 < />가 있어야하지만 코드를 포함하면 코드가 전혀 표시되지 않음)

   pi:ActivateStateAction TargetState="Tab2VisualState" TargetObject="{Binding ElementName=LayoutRoot}" 
   

이 당신이 당신의 스토리 보드의 이름을 지정해야합니다 위해,

2. 트리거로 ControlStoryBoardAction를 시도3210

3. 당신은 (나는 이것이 혼합 방식이 아닌 SketchFlow를 알고 있지만, 그들은 매우 비슷합니다) 대신 GoToStateAction을 시도 할 수 있습니다.

위의 작업을 모두 수행해도 문제가 좁혀지지는 않지만 근본적으로 코드는 소리가납니다.

Answer 2

다음은 탭 선택에 따라 동작을 트리거하는 데 사용할 수있는 간단한 트리거입니다. 이것을 프로젝트에 추가하고, 컴파일하고, 트리거 유형을이 트리거 유형의 인스턴스로 설정하십시오. 동작은 TabControl 자체에 연결해야합니다. 그런 다음 트리거의 TabIndex를 조치를 트리거 할 색인으로 설정하십시오. 트리거는 tabcontrol의 선택 변경 이벤트를 수신하고 사용자가 제공 한 TabIndex 값과 일치시킵니다.

public class TabSelectedTrigger : TriggerBase<TabControl> 
{ 
    public static readonly DependencyProperty TabIndexProperty = DependencyProperty.Register("TabIndex", typeof (int), 
                          typeof (TabSelectedTrigger), 
                          new PropertyMetadata(-1)); 
    public int TabIndex 
    { 
     get { return (int)this.GetValue(TabIndexProperty); } 
     set { this.SetValue(TabIndexProperty, value); } 
    } 


    protected override void OnAttached() 
    { 
     base.OnAttached(); 

     this.AssociatedObject.SelectionChanged += AssociatedObject_SelectionChanged; 
    } 

    void AssociatedObject_SelectionChanged(object sender, SelectionChangedEventArgs e) 
    { 
     if(this.TabIndex == this.AssociatedObject.SelectedIndex) 
     { 
      this.InvokeActions(null); 
     } 
    } 

    protected override void OnDetaching() 
    { 
     base.OnDetaching(); 
     this.AssociatedObject.SelectionChanged -= AssociatedObject_SelectionChanged; 
    } 
} 

사용 예제 : 도움말에 대한

<sdk:TabControl Margin="59,49,67,81"> 
     <i:Interaction.Triggers> 
      <local:TabSelectedTrigger TabIndex="1"> 
       <ei:GoToStateAction StateName="VisualState1"/> 
      </local:TabSelectedTrigger> 
      <local:TabSelectedTrigger TabIndex="0"> 
       <ei:GoToStateAction StateName="VisualState"/> 
      </local:TabSelectedTrigger> 
     </i:Interaction.Triggers> 
     <sdk:TabItem Header="TabItem"> 
      <Grid Background="#FFE5E5E5"/> 
     </sdk:TabItem> 
     <sdk:TabItem Header="TabItem"> 
      <Grid Background="#FFE5E5E5"/> 
     </sdk:TabItem> 
    </sdk:TabControl>