Question

我在Blend for VS2013中创建了一个滑动面板。使用两个按钮，我可以滑入和滑出面板。我想用一个按钮来做这件事。我试过从代码后面调用VisualStateManager.GoToState没有任何运气。我在这里缺少什么？

<Window
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions" 
        xmlns:ee="http://schemas.microsoft.com/expression/2010/effects" 
        xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity" 
        x:Class="WpfApplication1.MainWindow"
        Title="MainWindow" Height="350" Width="525">
    <Window.Triggers>
        <EventTrigger RoutedEvent="FrameworkElement.Loaded"/>
    </Window.Triggers>
    <Grid>
        <VisualStateManager.CustomVisualStateManager>
            <ei:ExtendedVisualStateManager/>
        </VisualStateManager.CustomVisualStateManager>
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="SlidingPanel">
                <VisualStateGroup.Transitions>
                    <VisualTransition GeneratedDuration="0" To="SlidePanelOut">
                        <ei:ExtendedVisualStateManager.TransitionEffect>
                            <ee:SlideInTransitionEffect SlideDirection="RightToLeft"/>
                        </ei:ExtendedVisualStateManager.TransitionEffect>
                    </VisualTransition>
                    <VisualTransition GeneratedDuration="0" To="SlidePanelIn">
                        <ei:ExtendedVisualStateManager.TransitionEffect>
                            <ee:SlideInTransitionEffect/>
                        </ei:ExtendedVisualStateManager.TransitionEffect>
                    </VisualTransition>
                </VisualStateGroup.Transitions>
                <VisualState x:Name="SlidePanelOut">
                    <Storyboard>
                        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="MyStackPanel">
                            <EasingDoubleKeyFrame KeyTime="0:0:1" Value="0"/>
                        </DoubleAnimationUsingKeyFrames>
                        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)" Storyboard.TargetName="MyStackPanel">
                            <EasingDoubleKeyFrame KeyTime="0:0:1" Value="0"/>
                        </DoubleAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
                <VisualState x:Name="SlidePanelIn">
                    <Storyboard>
                        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="MyStackPanel">
                            <EasingDoubleKeyFrame KeyTime="0:0:1" Value="100"/>
                        </DoubleAnimationUsingKeyFrames>
                        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)" Storyboard.TargetName="MyStackPanel">
                            <EasingDoubleKeyFrame KeyTime="0:0:1" Value="0"/>
                        </DoubleAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="20" />
        </Grid.ColumnDefinitions>
        <Button x:Name="button" Content="Button" Margin="0,0,397,283" >
            <i:Interaction.Triggers>
                <i:EventTrigger EventName="Click" SourceName="button">
                    <ei:GoToStateAction StateName="SlidePanelIn"/>
                </i:EventTrigger>
                <i:EventTrigger EventName="Click">
                    <ei:ChangePropertyAction/>
                </i:EventTrigger>
            </i:Interaction.Triggers>
        </Button>
        <Button x:Name="button1" Content="Button" HorizontalAlignment="Left" VerticalAlignment="Top" Width="75" Margin="160,0,0,0" Height="37" Click="button1_Click">
            <!--<i:Interaction.Triggers>
                <i:EventTrigger EventName="Click" SourceName="button1">
                    <ei:GoToStateAction StateName="SlidePanelOut"/>
                </i:EventTrigger>
            </i:Interaction.Triggers>-->
        </Button>
        <StackPanel x:Name="MyStackPanel" HorizontalAlignment="Left" Height="278" VerticalAlignment="Top" Width="100" Background="#FFDC1717" RenderTransformOrigin="0.5,0.5" Margin="-100,42,0,0">
            <StackPanel.RenderTransform>
                <TransformGroup>
                    <ScaleTransform/>
                    <SkewTransform/>
                    <RotateTransform/>
                    <TranslateTransform/>
                </TransformGroup>
            </StackPanel.RenderTransform>
            <Button Content="Button"/>
            <Button Content="Button"/>
            <Button Content="Button"/>
        </StackPanel>
    </Grid>
</Window>

        private void button1_Click(object sender, RoutedEventArgs e)
        {
            VisualState vs = SlidingPanel.CurrentState;
            if (vs.Name == "SlidePanelIn")
            {
                VisualStateManager.GoToState(MyStackPanel, SlidePanelOut.Name, true);
            }
        }

任何和所有帮助表示赞赏！

TIA，道格

Answer 1

如果您使用ToggleButton作为单Button，则可以简化操作。然后，您可以使用Checked和Unchecked事件触发对VisualTransition州的更改：

<ToggleButton x:Name="button" Content="Button" Margin="0,0,397,283" >
    <i:Interaction.Triggers>
        <i:EventTrigger EventName="Checked" SourceName="button">
            <ei:GoToStateAction StateName="SlidePanelIn"/>
        </i:EventTrigger>
        <i:EventTrigger EventName="Unchecked">
            <ei:GoToStateAction StateName="SlidePanelOut"/>
        </i:EventTrigger>
    </i:Interaction.Triggers>
</ToggleButton>

从后面的代码启动VisualTransition

1 个答案: