尝试淡入一个元素并同时淡出另一个元素时出现错误 Xaml 情节提要
本文关键字:元素 另一个 错误 Xaml 淡出 淡入 一个 | 更新日期: 2023-09-27 18:34:32
我希望最终确定应用程序的外观和感觉,并且很难将过渡动画应用于一个非常基本的问题。
附上您可以找到我正在努力的代码。我已经注释掉了我在开发和原型设计中使用的设置器。它们的工作方式与我所期望的一样。
情节提要过渡不以任何方式或形式工作。仅添加一个故事板过渡与所有或任何 setter 相结合"有效",因为我没有收到任何运行时错误,但过渡根本没有出现。
我想知道我是否完全误解了故事板的工作原理。
我得到的错误是:
Multiple animations in the same containing Storyboard cannot target the same property on a single element.
这是简化的代码:
<Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup>
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0:0:1"/>
</VisualStateGroup.Transitions>
<VisualState x:Name="StateA">
<!--<VisualState.Setters>
<Setter Target="FirstElement.Visibility" Value="Visible" />
<Setter Target="SecondElement.Visibility" Value="Collapsed" />
</VisualState.Setters>-->
<Storyboard>
<PopOutThemeAnimation TargetName="SecondElement"/>
<PopInThemeAnimation TargetName="FirstElement"/>
</Storyboard>
</VisualState>
<VisualState x:Name="StateB">
<!-- <VisualState.Setters>
<Setter Target="FirstElement.Visibility" Value="Collapsed" />
<Setter Target="SecondElement.Visibility" Value="Visible" />
</VisualState.Setters>-->
<Storyboard>
<PopOutThemeAnimation TargetName="FirstElement"/>
<PopInThemeAnimation TargetName="SecondElement"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Rectangle Name="FirstElement"
Fill="Blue"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Width="200"
Height="200"
DoubleTapped="GoToStateB" />
<Rectangle Name="SecondElement"
Fill="Red"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Width="200"
Height="200"
DoubleTapped="GoToStateA" />
</Grid>
使用以下简单的代码隐藏:
private void GoToStateA(object sender, DoubleTappedRoutedEventArgs e)
{
// do something
VisualStateManager.GoToState(this, "StateA", true);
}
private void GoToStateB(object sender, DoubleTappedRoutedEventArgs e)
{
// do something else
VisualStateManager.GoToState(this, "StateB", true);
}
编辑:JustinXL指出的"解决方案"是需要删除以下Xaml元素并且运行时错误消失:
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0:0:1"/>
</VisualStateGroup.Transitions>
我不太清楚为什么会这样(真正的错误或只是一个晦涩的设计陷阱(。
实际上更简单的解决方案是完全删除VisualStateGroup
中的Transitions
。
另请注意,我添加了IsHitTestVisible
更改,以便FirstElement
能够接收点击。
<VisualStateManager.VisualStateGroups>
<VisualStateGroup>
<VisualState x:Name="StateA">
<VisualState.Setters>
<Setter Target="SecondElement.(UIElement.IsHitTestVisible)"
Value="False" />
</VisualState.Setters>
<Storyboard>
<PopOutThemeAnimation TargetName="SecondElement" />
<PopInThemeAnimation TargetName="FirstElement" />
</Storyboard>
</VisualState>
<VisualState x:Name="StateB">
<Storyboard>
<PopOutThemeAnimation TargetName="FirstElement" />
<PopInThemeAnimation TargetName="SecondElement" />
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
事实证明,答案是情节提要必须位于 VisualTransition 中,而不是在 VisualState 本身中,尽管事实上您可以将动画情节提要置于视觉状态。
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="VisualStateGroup">
<VisualStateGroup.Transitions>
<VisualTransition To="StateA">
<VisualTransition.Storyboard>
<Storyboard>
<PopOutThemeAnimation TargetName="SecondElement"/>
<PopInThemeAnimation TargetName="FirstElement"/>
</Storyboard>
</VisualTransition.Storyboard>
</VisualTransition>
<VisualTransition To="StateB">
<VisualTransition.Storyboard>
<Storyboard>
<PopOutThemeAnimation TargetName="FirstElement"/>
<PopInThemeAnimation TargetName="SecondElement"/>
</Storyboard>
</VisualTransition.Storyboard>
</VisualTransition>
</VisualStateGroup.Transitions>
<VisualState x:Name="StateA">
<VisualState.Setters>
<Setter Target="FirstElement.Visibility" Value="Visible" />
<Setter Target="SecondElement.Visibility" Value="Collapsed" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="StateB">
<VisualState.Setters>
<Setter Target="FirstElement.Visibility" Value="Collapsed" />
<Setter Target="SecondElement.Visibility" Value="Visible" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>