[英]WP7 VisualState change programmatically
我正在嘗試創建一個圖像,當它被觸摸時,會出現一個小彈出窗口。 當您再次觸摸它(或外面的任何地方)時,它應該會消失。
我創建了彈出窗口,以及一些視覺 state 過渡以隱藏和折疊
<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>
我嘗試使用 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>
然而,當嘗試“真實”的東西時,我需要比這更多的邏輯。 如果我按下圖像並且它是可見的,我希望它過渡到折疊狀態,反之亦然。 所以我保存了我當前的可見性 state
(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 並且屏幕上沒有任何變化。 我究竟做錯了什么??
我假設您調試了代碼,因此您知道控件到達 ManipulationSTarted 處理程序。
會計。 到 msdn VisualStateManager.GoToState 文檔:“如果控件的 ControlTemplate 中不存在 stateName,則 GoToState 不執行任何操作並返回 false。 ”
從上面的代碼中,我無法判斷什么是 LayoutRoot 以及狀態是否真的在該元素處定義。 (附注:Popup 對可視化樹進行了一些操作,在某些情況下可以解釋上述行為。)
另一方面,我不明白你為什么在這種情況下使用 Xaml 。 在我看來,你可以在代碼中更容易地做到這一點。 (更不用說性能了。):
在代碼中創建 2 個故事板
根據需要從 ManipulationStarted 處理程序運行它們。
如果您不知道如何在代碼中使用 Storyboard,請查看我的文章中的示例。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.