SketchFlow /在TabControl中使用（選定）TabItem觸發狀態

上下文：一個新的Sketchflow/Silverlight項目。 Expression Blend 4（Ultimate）SketchFlow /在TabControl中使用（選定）TabItem觸發狀態

我有以下代碼。我有一個TabControl與2 TabItem的。我也有2個「標註」（大泡泡的東西）作爲狀態變化的快速視覺。

我創建了一個VisualStateGroup並添加到它下面的狀態。當我從NAVIGATE窗口手動調用這些（我運行該項目後），這些狀態按預期工作。 callout1和callout2觸發它們的不透明度（在100％和10％之間）。所以我對State的基本理解以及它們是如何工作的。

但是，當我添加一個觸發器事件到TabItem，觸發器看起來不錯，但不起作用。下面是一個簡單的例子，直到光禿禿的骨頭。

我試圖事件名稱= 「的MouseLeftButtonDown」和事件名稱= 「點擊」沒有運氣。

我還評論了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>

來源

2011-02-09 granadaCoder

一些想法，但沒有明確的：

這可能是stateActions需要被告知視覺狀態的位置（注意圍繞此代碼應該有通常的< />，但如果包含這些代碼，代碼根本不會顯示）
```
pi:ActivateStateAction TargetState="Tab2VisualState" TargetObject="{Binding ElementName=LayoutRoot}" 
```
你可以嘗試GoToStateAction而不是（我知道這是混合的方式，而不是SketchFlow的，但他們都非常相似）
嘗試ControlStoryBoardAction作爲觸發，爲此，你需要將你的名字的故事板。

如果以上任何一項工作都不會有助於縮小問題的範圍，但從根本上說，您的代碼看起來很合理。

來源

2011-02-09 23:45:43 Andrew

感謝您的提示。查克的回答讓我再次滾動，所以我不必去調查，但我很欣賞這些提示。 – granadaCoder 2011-02-10 17:42:35

以下是一個簡單的觸發器，您可以使用該觸發器基於選項卡選擇來觸發操作。將此添加到您的項目中，編譯並將behvior的觸發器設置爲此觸發器類型的實例。該行爲必須附加到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>

來源

2011-02-10 14:51:11

哇，我不會想到這一點.....直到奶牛回家。謝謝十億。 – granadaCoder 2011-02-10 15:08:41

SketchFlow /在TabControl中使用（選定）TabItem觸發狀態

回答

相關問題