SketchFlow/使用TabControl中的(选定)TabItem触发状态 [英] SketchFlow / Using (Selected) TabItem in TabControl to Trigger State
问题描述
上下文: 一个新的Sketchflow/Silverlight项目. Expression Blend 4(终极版)
Context: A new Sketchflow / Silverlight project. Expression Blend 4 (Ultimate)
我有以下代码. 我有一个带有2 TabItem的TabControl. 我还有2个标注"(大气泡)，可以快速查看状态变化.
I have the below code. I have a TabControl with 2 TabItem's. I also have 2 "callout" (big bubble things) as quick visual on the state change.
我创建了一个VisualStateGroup，并将其添加到其下的状态中. 当我从NAVIGATE窗口中手动调用它们时(运行项目后)，状态将按预期工作. callout1和callout2触发器的不透明度(介于100％和10％之间). 因此，我对国家及其工作原理有基本的了解.
I created a VisualStateGroup and added to States under it. When I manually invoke these from the NAVIGATE window (after I run the project), the states work as expected. callout1 and callout2 flip flop their opacities (between 100% and 10%). So I have a basic understanding of State's and how they work.
但是，当我将触发事件添加到TabItem时，触发看起来不错，但不起作用. 下面是一个剥离的示例，一直到裸露的骨头.
However, when I add a trigger event to the TabItem, the trigger looks good, but does not work. Below is a stripped example, down to the bare bones.
我尝试过 EventName ="MouseLeftButtonDown" 和 EventName ="Click" 没有运气.
I tried EventName="MouseLeftButtonDown" and EventName="Click" with no luck.
我还注释掉了ObjectAnimationUsingKeyFrames标签，那里也没有运气.
I also commented out the ObjectAnimationUsingKeyFrames tags, no luck there as well.
有人看到我想念的东西吗?
Anybody see what I'm missing?
基本上，我无法(选择)一个TabItem来触发状态更改.
Basically, I cannot get (selecting) a TabItem to trigger a State change.
谢谢.
-----------开始XAML代码
-----------START XAML CODE
<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>
推荐答案
这是一个简单的触发器，可用于基于选项卡选择来触发操作.将此添加到您的项目，编译，并将行为的触发器设置为此触发器类型的实例.该行为必须附加到TabControl本身.然后将触发器的TabIndex设置为要触发操作的索引.触发器侦听tab控件的选择更改事件，并将其与您提供的TabIndex值进行匹配.
Here is a simple trigger you can use to trigger actions based on tab selection. Add this to your project, compile, and set the trigger of the behvior to an instance of this trigger type. The behavior has to be attached to the TabControl itself. Then set the TabIndex of the trigger to the index you want to trigger the action. The trigger listens to the selection changed event of the tabcontrol and matches that against the TabIndex value you supply.
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>
这篇关于SketchFlow/使用TabControl中的(选定)TabItem触发状态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
