我一直在尝试解决以下问题: 在 Expression Blend 3 中为不同视觉状态创建自定义动画(更改网格上多个元素的大小/不透明度)时,它会在网格本身而不是控件样式中创建视觉状态组,并将其定义为 CustomVisualStateManager。
<Grid x:Name="LayoutRoot" Background="White" Height="500" HorizontalAlignment="Left" VerticalAlignment="Top" Width="500">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="MyVisualStateGroup">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="00:00:00.3000000">
<VisualTransition.GeneratedEasingFunction>
<CircleEase EasingMode="EaseIn"/>
</VisualTransition.GeneratedEasingFunction>
</VisualTransition>
</VisualStateGroup.Transitions>
<VisualState x:Name="State1"/>
<VisualState x:Name="State2">
<Storyboard>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="myBox" Storyboard.TargetProperty="(FrameworkElement.Height)">
<EasingDoubleKeyFrame KeyTime="00:00:00" Value="360"/>
<!-- omitting other storyboard animations here for clarity -->
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<VisualStateManager.CustomVisualStateManager>
<ic:ExtendedVisualStateManager/>
</VisualStateManager.CustomVisualStateManager>
<!-- omitting other grid elements here for clarity -->
</Grid>
这对我来说没问题,但问题是,当我尝试时,我无法在代码隐藏中切换状态
VisualStateManager.GoToState(this, "State1", true);
什么也没有发生,因为控件本身没有定义这些视觉状态,如
VisualStateManager.GetVisualStateGroups(this);
如果我尝试
VisualStateManager.GetVisualStateGroups(LayoutRoot);
它准确地显示了我所需要的。但我无法将 LayoutRoot 传递给 VisualStateManager,因为它需要 Control 类型的参数,而 Grid 则不需要。 我的问题是 - 我如何在代码隐藏中访问/更改此 CustomVisualStateManager 的状态?
最佳答案
当您启用 FluidLayout 时,CustomVisualStateManager 就会出现。除非您的项目中涉及布局变形(即您尝试使用状态从一种布局平滑地动画到另一种布局),否则您可以将其关闭。自定义 VSM 的存在不应对 VSM 的使用产生任何影响。
视觉状态标记始终位于顶级容器内,因此这是完全正常的。顺便说一句,这可能只是您的示例中的拼写错误,但您显示的代码实际上尝试设置一个其中没有任何内容的状态,因此这可能不是所需的结果。
否则,在 UserControl 上调用 VisualStateManager.GoToState 应该可以工作。这是我刚刚制作的一个有效的示例:
这是一个简单的 Silverlight 示例应用程序,带有一个主页和一个我添加到主页的用户控件。主页非常简单:
<UserControl
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:SLStateTest"
x:Class="SLStateTest.MainPage"
Width="640" Height="480">
<Grid x:Name="LayoutRoot" Background="White">
<local:UserControl1 x:Name="TestControl" Height="100" HorizontalAlignment="Left" Margin="24,32,0,0" VerticalAlignment="Top" Width="100"/>
<Button Height="40" HorizontalAlignment="Left" Margin="192,32,0,0" VerticalAlignment="Top" Width="104" Content="State 1" Click="OnClick"/>
<Button Height="40" HorizontalAlignment="Left" Margin="192,76,0,0" VerticalAlignment="Top" Width="104" Content="State 2" Click="OnClickState2"/>
</Grid></UserControl>
有一个我的用户控件的实例和两个按钮。我们稍后将了解这些按钮的作用。首先我们看一下UserControl(UserControl1):
<UserControl
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
xmlns:ic="clr-namespace:Microsoft.Expression.Interactivity.Core;assembly=Microsoft.Expression.Interactions"
x:Class="SLStateTest.UserControl1"
d:DesignWidth="280" d:DesignHeight="264">
<Grid x:Name="LayoutRoot" Background="#FF6FFE22">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="Test" ic:ExtendedVisualStateManager.UseFluidLayout="True">
<VisualState x:Name="State1">
<Storyboard>
<ColorAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="LayoutRoot" Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)">
<EasingColorKeyFrame KeyTime="00:00:00" Value="#FF003AFF"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="State2">
<Storyboard>
<ColorAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="LayoutRoot" Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)">
<EasingColorKeyFrame KeyTime="00:00:00" Value="#FFFF0202"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<VisualStateManager.CustomVisualStateManager>
<ic:ExtendedVisualStateManager/>
</VisualStateManager.CustomVisualStateManager>
</Grid></UserControl>
正如您所看到的,一个视觉状态组中定义了两种视觉状态,它们只是在用户控件的布局根上设置了一种颜色。
主页上的两个按钮连接到如下所示的事件处理程序:
private void OnClick(object sender, System.Windows.RoutedEventArgs e)
{
// TODO: Add event handler implementation here.
VisualStateManager.GoToState(TestControl, "State1", true);
}
private void OnClickState2(object sender, System.Windows.RoutedEventArgs e)
{
// TODO: Add event handler implementation here.
TestControl.SetState();
}
第一个仅在页面上的 UserControl 上调用 VisualStateManager.GoToState。第二个调用用户控件一侧的函数来执行相同的操作。我只是使用这两种方法来表明这两个选项都可用 - 您可以从 UC 的外部或内部调用 VSM.GoToState。用户控件的 SetState() 方法如下所示:
public void SetState()
{
VisualStateManager.GoToState(this, "State2", true);
}
当您运行应用程序时,用户控件将首先显示其基本状态,即绿色。当您按下 State 1 按钮时,它会进入 State1,这会通过从外部调用 VSM.GoToState() 将 UC 设置为蓝色。当您按下状态 2 按钮时,通过从内部调用 VSM,它会切换为红色。
从您发布的代码片段中,除了我在开头提到的一个问题之外,我看不出出了什么问题。不过,我的小样本可能会帮助您了解您的情况有何不同。
希望有帮助...
关于c# - Silverlight:在代码隐藏中切换 CustomVisualStateManager 的 VisualStates,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/1783328/