tabcontrol - 在要触发状态的TabControl中,sketchflow/使用( 选定) TabItem

  显示原文与译文双语对照的内容
100 3

上下文:一个新的sketchflow/silverlight项目。表达式混合 4 ( 最终)

我有 below 代码。我有一个带有 2的TabControl我也有 2"标注"( 大气泡物),快速地看到状态变化。

我创建了一个VisualStateGroup并添加到它下面的状态。当我从 NAVIGATE ( 在我运行项目之后),手动调用这些命令时,状态就像预期的那样。callout1和callout2翻转它们的不透明度( 100%和 10%之间) 。所以我对它们的工作原理有基本的理解和理解。

但是,当我向TabItem添加触发器事件时,触发器看起来很好,但无法正常工作。下面是一个剥离的示例,向下到裸骨骼。

我尝试了 eventname="连续 MouseLeftButtonDown"和 eventname="单击"。

我还注释了ObjectAnimationUsingKeyFrames标签,没有什么幸运的地方。

谁都知道我在找什么?

基本上,我无法获取( 选择) 触发状态更改。

谢谢。

-----------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>
时间:原作者:0个回答

150 0

下面是一个简单的触发器,可以根据标签选择来触发动作。将这个添加到项目,编译,并将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>
原作者:
110 2

一些想法,但没有明确的含义:

可以能是stateActions需要告诉VisualStates位置( 注意该代码周围应该有通常的</>,但是代码不会显示) 。

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

我知道,我知道这是混合方式,而不是 sketchflow,但它们是非常相似

尝试 ControlStoryBoardAction 作为触发器,为此你将需要命名你的Storyboard 。

如果上面没有这些工作,这可以能有助于缩小问题,但从根本上说,代码。

原作者:
...