C# WP7 VisualState以编程方式更改

我试图创建一个图像，当它被触摸时，会出现一个小的弹出窗口。当你再次触摸它（或在外面的任何地方）时，它会消失。
我已经创建了弹出窗口，以及一些隐藏和折叠的视觉状态转换

<Grid x:Name="LayoutRoot" Background="Transparent">
    <VisualStateManager.VisualStateGroups>
                <VisualStateGroup x:Name="PopupVisibility">
                    <VisualState x:Name="PopupVisible">
                        <Storyboard>
                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="PopupControl">
                                <DiscreteObjectKeyFrame KeyTime="0">
                                    <DiscreteObjectKeyFrame.Value>
                                        <Visibility>Visible</Visibility>
                                    </DiscreteObjectKeyFrame.Value>
                                </DiscreteObjectKeyFrame>
                            </ObjectAnimationUsingKeyFrames>
                            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="PopupControl">
                                <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
                                <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="1"/>
                            </DoubleAnimationUsingKeyFrames>
                            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleX)" Storyboard.TargetName="PopupControl">
                                <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
                                <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="1"/>
                            </DoubleAnimationUsingKeyFrames>
                            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleY)" Storyboard.TargetName="PopupControl">
                                <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
                                <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="1"/>
                            </DoubleAnimationUsingKeyFrames>
                        </Storyboard>
                    </VisualState>
                    <VisualState x:Name="PopupCollapsed">
                        <Storyboard>
                            <DoubleAnimation Duration="0:0:0.5" To="0" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleX)" Storyboard.TargetName="PopupControl" d:IsOptimized="True"/>
                            <DoubleAnimation Duration="0:0:0.5" To="0" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleY)" Storyboard.TargetName="PopupControl" d:IsOptimized="True"/>
                            <DoubleAnimation Duration="0:0:0.5" To="0" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="PopupControl" d:IsOptimized="True"/>
                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="PopupControl">
                                <DiscreteObjectKeyFrame KeyTime="0:0:0.5">
                                    <DiscreteObjectKeyFrame.Value>
                                        <Visibility>Visible</Visibility>
                                    </DiscreteObjectKeyFrame.Value>
                                </DiscreteObjectKeyFrame>
                                <DiscreteObjectKeyFrame KeyTime="0:0:0.7">
                                    <DiscreteObjectKeyFrame.Value>
                                        <Visibility>Collapsed</Visibility>
                                    </DiscreteObjectKeyFrame.Value>
                                </DiscreteObjectKeyFrame>
                            </ObjectAnimationUsingKeyFrames>
                        </Storyboard>
                    </VisualState>
                </VisualStateGroup>
            </VisualStateManager.VisualStateGroups>

<Button Content="Text" HorizontalAlignment="Right" Margin="0,0,12,-37" Width="152" Background="#00C06B6B" Height="75" VerticalAlignment="Bottom" Visibility="Visible">
            <Custom:Interaction.Triggers>
                <Custom:EventTrigger EventName="Click">
                    <ic:GoToStateAction x:Name="GoToStatePopupVisible" StateName="PopupVisible"/>
                </Custom:EventTrigger>
                <Custom:EventTrigger EventName="LostFocus">
                    <ic:GoToStateAction x:Name="LostFocus" StateName="PopupCollapsed"/>
                </Custom:EventTrigger>
            </Custom:Interaction.Triggers>
        </Button>

 <Grid x:Name="PopupControl" Height="241" Margin="39,-28,203,0" Grid.Row="1" VerticalAlignment="Top" RenderTransformOrigin="0.5,0.5">





                <Grid.RenderTransform>
                <CompositeTransform/>
            </Grid.RenderTransform>
            <Rectangle Stroke="Black">
                <Rectangle.Fill>
                    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                        <GradientStop Color="#FF726969" Offset="1"/>
                        <GradientStop Color="White"/>
                    </LinearGradientBrush>
                </Rectangle.Fill>
            </Rectangle>
            <TextBlock TextWrapping="Wrap" Text="TextBlock" d:LayoutOverrides="Width" Foreground="#FF1D0E0E" Margin="5"/>
        </Grid>
<Image HorizontalAlignment="Right" Height="100" Margin="0,-38,37,0" Grid.Row="1" VerticalAlignment="Top" Width="100" Source="Images/pushpin.jpg" ManipulationStarted="Image_ManipulationStarted">
        </Image>

</Grid>

---

我尝试了VisualStateManager和ExtendedVisualStateManager方法GoToState和GoToElementState，但都没有成功。这些方法总是返回false，并且屏幕上没有任何更改。我做错了什么？？？

我假设您调试了代码，这样您就知道控件可以访问操纵启动处理程序

根据msdn VisualStateManager.gostate文档： 如果控件的ControlTemplate中不存在stateName，则GoToState不执行任何操作并返回false

从上面的代码中，我无法判断LayoutRoot是什么，以及状态是否真正定义在该元素上。（旁注：弹出窗口对视觉树进行了一些操作，在某些情况下可以解释上述行为。）

另一方面，我不明白为什么在这种情况下使用Xaml。在我看来，你可以在代码中做得更容易。（更不用说表演了。）：

在代码中创建2个故事板

根据需要从操纵启动处理程序运行它们

---

如果您不知道如何在代码中使用故事板，请看下面的例子。

我假定您调试了代码，以便知道控件可以访问操纵启动处理程序

根据msdn VisualStateManager.gostate文档： 如果控件的ControlTemplate中不存在stateName，则GoToState不执行任何操作并返回false

从上面的代码中，我无法判断LayoutRoot是什么，以及状态是否真正定义在该元素上。（旁注：弹出窗口对视觉树进行了一些操作，在某些情况下可以解释上述行为。）

另一方面，我不明白为什么在这种情况下使用Xaml。在我看来，你可以在代码中做得更容易。（更不用说表演了。）：

在代码中创建2个故事板

根据需要从操纵启动处理程序运行它们

---

如果您不知道如何在代码中使用故事板，请查看以下示例。

hi！谢谢你的评论。我发现通过xaml生成故事板更容易，因为blend为我做了这件事。它可以节省大量工作，并且比通过代码进行编辑更容易。所以我想用代码来做这件事是最后的选择，因为我现在不关心性能。layoutroot是网格，我忘了将其添加到代码示例中。。我会马上更新它，你可以看看它。你验证了msdn声明了吗？在操纵启动处理程序：获取VSM组（VSM.GetVisualStateGroups）中，在返回的列表中查找VisualStateGroup，枚举其状态以查找VisualState。如果您找到它，您最终可以手动运行它的故事板。如果没有，那么整个计划就有问题了。MS只谈到在控件模板中使用可视状态，我不确定。我真的认为，通过手动运行状态更改，可以避免所有这些麻烦。Blend是为设计师设计的，使用代码可以让你更深入地理解，一点也不难。嗨！谢谢你的评论。我发现通过xaml生成故事板更容易，因为blend为我做了这件事。它可以节省大量工作，并且比通过代码进行编辑更容易。所以我想用代码来做这件事是最后的选择，因为我现在不关心性能。layoutroot是网格，我忘了将其添加到代码示例中。。我会马上更新它，你可以看看它。你验证了msdn声明了吗？在操纵启动处理程序：获取VSM组（VSM.GetVisualStateGroups）中，在返回的列表中查找VisualStateGroup，枚举其状态以查找VisualState。如果您找到它，您最终可以手动运行它的故事板。如果没有，那么整个计划就有问题了。MS只谈到在控件模板中使用可视状态，我不确定。我真的认为，通过手动运行状态更改，可以避免所有这些麻烦。Blend是为设计师设计的，使用代码可以让您更深入地理解，一点也不难。

<Button Content="Text" HorizontalAlignment="Right" Margin="0,0,12,-37" Width="152" Background="#00C06B6B" Height="75" VerticalAlignment="Bottom" Visibility="Visible">
            <Custom:Interaction.Triggers>
                <Custom:EventTrigger EventName="Click">
                    <ic:GoToStateAction x:Name="GoToStatePopupVisible" StateName="PopupVisible"/>
                </Custom:EventTrigger>
                <Custom:EventTrigger EventName="LostFocus">
                    <ic:GoToStateAction x:Name="LostFocus" StateName="PopupCollapsed"/>
                </Custom:EventTrigger>
            </Custom:Interaction.Triggers>
        </Button>

(VisualStateManager.GetVisualStateGroups(LayoutRoot)[0] as VisualStateGroup).CurrentStateChanged += new EventHandler<VisualStateChangedEventArgs>(MainPage_CurrentStateChanged);

public string CurrentState { get; set; }

        void MainPage_CurrentStateChanged(object sender, VisualStateChangedEventArgs e)
        {
            CurrentState = e.NewState.Name;
        }

<Image HorizontalAlignment="Right" Height="100" Margin="0,-38,37,0" Grid.Row="1" VerticalAlignment="Top" Width="100" Source="Images/pushpin.jpg" ManipulationStarted="Image_ManipulationStarted">
            </Image>

private void Image_ManipulationStarted(object sender, ManipulationStartedEventArgs e)
        {
            switch (CurrentState)
            {
                case "PopupVisible":
                    {
                        ExtendedVisualStateManager.GoToElementState(LayoutRoot, "PopupCollapsed", true);
                        break;
                    }
                case "PopupCollapsed":
                    {
                        ExtendedVisualStateManager.GoToElementState(LayoutRoot, "PopupVisible", true);
                        break;
                    }
            }
        }