WP7的VisualState改變編程

Question

我試圖創建一個圖像，當它感動，一個小的彈出出現。當你再次觸摸它（或在外面的任何地方）時，它應該消失。
我創建了彈出式，和一些視覺狀態轉換爲隱藏和摺疊

<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> 

我試圖用混合來測試這一點，並能正常工作，例如，添加一個按鈕，創建一個EventTrigger：

<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> 

最後，我以編程方式嘗試做多eventtrigger做同樣的事情，但也有一些邏輯：

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; 
        } 
      } 
     } 

我嘗試了VisualStateManager和ExtendedVisualStateManager方法GoToState和GoToElementState，但都無濟於事。這些方法總是返回false，屏幕上沒有任何變化。我究竟做錯了什麼？？

Answer 1

我相信你調試的代碼，所以你知道，控制到達在ManipulationStarted處理程序。

命中率。到MSDN VisualStateManager.GoToState文檔： 「如果Statename的不控制的ControlTemplate中存在，GotoState函數不執行任何操作，並返回false。」

從上面的代碼，我無法判斷什麼是LayoutRoot和這些國家是否真正被界定在這一要素上。 （A面備註：彈出不可視樹，在某些情況下可以解釋上述行爲的一些操作）

在另一方面，我不明白你爲什麼在這種情況下使用的XAML。在我看來，你可以在代碼中更簡單。 （不約的表現說話。）：

1. 代碼

2. 創建2個故事板從在ManipulationStarted處理程序需要運行它們。

如果您不知道如何在代碼中使用Storyboard，請在此my article處查找示例。