SketchFlow / Использование (Выбранный) TabItem в TabControl to Trigger State - PullRequest
Новая
       26

SketchFlow / Использование (Выбранный) TabItem в TabControl to Trigger State

0 голосов
/ 10 февраля 2011

Контекст: новый проект Sketchflow / Silverlight.Expression Blend 4 (Ultimate)

У меня есть код ниже.У меня есть TabControl с 2 TabItem's.У меня также есть 2 «выноски» (большие пузыри) для быстрого визуального изменения состояния.

Я создал VisualStateGroup и добавил в него состояния.Когда я вызываю их вручную из окна NAVIGATE (после запуска проекта), состояния работают как положено.callout1 и callout2 триггер их непрозрачность (между 100% и 10%).Таким образом, у меня есть базовое понимание состояний и их работы.

Однако, когда я добавляю событие триггера в TabItem, триггер выглядит хорошо, но не работает.Ниже приведен раздетый пример, вплоть до самых костей.

Я попробовал EventName = "MouseLeftButtonDown" и EventName = "Click" без удачи.

Я также закомментировал теги ObjectAnimationUsingKeyFrames, нети там удачи.

Кто-нибудь видит, чего мне не хватает?

В принципе, я не могу получить (выбрать) TabItem для запуска изменения состояния.

Спасибо.

----------- НАЧАТЬ КОД 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>

Ответы [ 2 ]

2 голосов
/ 10 февраля 2011

Вот простой триггер, который можно использовать для запуска действий на основе выбора вкладки. Добавьте это в свой проект, скомпилируйте и установите триггер behvior на экземпляр этого типа триггера. Поведение должно быть привязано к самому TabControl. Затем установите TabIndex триггера на индекс, который вы хотите запустить действие. Триггер прослушивает событие изменения выбора элемента управления табуляции и сопоставляет его с указанным вами значением 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>
0 голосов
/ 10 февраля 2011

Несколько идей, но ничего определенного:

  1. Возможно, что stateActions нужно сообщить о расположении визуальных состояний (обратите внимание, что вокруг этого кода должно быть обычное </>, но код вообще не будет отображаться, если я включу их) 1005 * 

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

  2. вместо этого вы можете попробовать GoToStateAction (я знаю, что это способ смешивания, а не рисования, но они очень похожи)

  3. попробуйте ControlStoryBoardAction в качестве триггера, для этого вам нужно будет назвать свои раскадровки.

Если ничего из вышеперечисленного не сработает, это может помочь сузить проблему, но в целом ваш код выглядит здравым.

...