我有一个ItemsControl,通过数据绑定将项目添加到可观察的集合中。每个项目都有一个定义其外观的数据模板。
我试图弄清楚当VisualStateManager将ItemsControl置于特定状态时是否可以对ItemsControl中的每个项应用/触发动画。
下面是一张图片 - 当项目控件进入关闭状态时 - 我希望项目控件中的项目缩小以及隐藏文本并使数字变为可见。这是否可以使用VSM,或者我是否需要在创建每个项目时附加动画,然后在我希望它们改变视觉状态时手动启动它们。
答案 0 :(得分:3)
使用ObjectAnimationUsingKeyFrames可以做到这一点,但是这很难做到,会让你撕掉你的头发,定期让你的视觉工作室崩溃,并且很容易用简单的方式完成它。
简单的方法:
public class TestSwapContentControl : ContentControl
{
object StoredOriginalContent;
public object FullContent
{
get { return (object)GetValue(FullContentProperty); }
set { SetValue(FullContentProperty, value); }
}
// Using a DependencyProperty as the backing store for FullContent. This enables animation, styling, binding, etc...
public static readonly DependencyProperty FullContentProperty =
DependencyProperty.Register(
"FullContent"
, typeof(object)
, typeof(TestSwapContentControl)
, null);
public void SwitchToFullContent()
{
if (FullContent != null)
{
StoredOriginalContent = Content;
Content = FullContent;
}
}
public void SwitchToNormalContent()
{
if(StoredOriginalContent != null)
{
Content = StoredOriginalContent;
}
}
}
然后使用xaml:
<local:TestSwapContentControl x:Name="mySwitch">
<Rectangle Height="50" Width="100" Fill="Black" />
<local:TestSwapContentControl.FullContent>
<StackPanel>
<TextBlock>1</TextBlock>
<TextBlock>2</TextBlock>
<TextBlock>3</TextBlock>
<TextBlock>4</TextBlock>
<Rectangle Height="50" Width="100" Fill="Red" />
</StackPanel>
</local:TestSwapContentControl.FullContent>
</local:TestSwapContentControl>
页面中包含以下cs:
private void Button_Click(object sender, RoutedEventArgs e)
{
if (myTempBool)
{
mySwitch.SwitchToFullContent();
myTempBool = false;
}
else
{
mySwitch.SwitchToNormalContent();
myTempBool = true;
}
}
现在,如果你真的需要让控件完全可以被其他开发人员扩展,那么你需要使用visualstatemenager,但这是一个真正的婊子。如果您不知道如何通过generic.xaml设置可视状态管理器和状态,这里有一个操作指南:
http://scorbs.com/2008/06/11/parts-states-model-with-visualstatemanager-part-1-of/
这是一个有效的例子,但它并不完美,因为我似乎无法直接设置ContentPresenter的内容。
using System.Windows;
using System.Windows.Controls;
namespace SilverlightTestApplication
{
[TemplateVisualState(Name="Normal", GroupName="SizeStates")]
[TemplateVisualState(Name="Expanded", GroupName="SizeStates")]
public class TestVSMControl : ContentControl
{
public object SmallContent
{
get { return (object)GetValue(SmallContentProperty); }
set { SetValue(SmallContentProperty, value); }
}
// Using a DependencyProperty as the backing store for SmallContent. This enables animation, styling, binding, etc...
public static readonly DependencyProperty SmallContentProperty =
DependencyProperty.Register("SmallContent", typeof(object), typeof(TestVSMControl), null);
public object LargeContent
{
get { return (object)GetValue(LargeContentProperty); }
set { SetValue(LargeContentProperty, value); }
}
// Using a DependencyProperty as the backing store for LargeContent. This enables animation, styling, binding, etc...
public static readonly DependencyProperty LargeContentProperty =
DependencyProperty.Register("LargeContent", typeof(object), typeof(TestVSMControl), null);
public bool Pressed
{
get { return (bool)GetValue(PressedProperty); }
set { SetValue(PressedProperty, value); }
}
// Using a DependencyProperty as the backing store for Pressed. This enables animation, styling, binding, etc...
public static readonly DependencyProperty PressedProperty =
DependencyProperty.Register("Pressed", typeof(bool), typeof(TestVSMControl),
new PropertyMetadata(new PropertyChangedCallback(PressedPropertyChanged)));
static void PressedPropertyChanged(DependencyObject sender, DependencyPropertyChangedEventArgs e)
{
var me = sender as TestVSMControl;
me.ChangeState();
}
public TestVSMControl()
{
DefaultStyleKey = typeof(TestVSMControl);
}
void ChangeState()
{
GoToState(true);
}
private void GoToState(bool useTransitions)
{
if (Pressed)
{
VisualStateManager.GoToState(this, "Normal", useTransitions);
}
else
{
VisualStateManager.GoToState(this, "Expanded", useTransitions);
}
}
}
}
在你的generic.xaml中(包括xmlns:vsm =“clr-namespace:System.Windows; assembly = System.Windows”):
<Style TargetType="local:TestVSMControl">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="local:TestVSMControl">
<StackPanel>
<vsm:VisualStateManager.VisualStateGroups>
<vsm:VisualStateGroup x:Name="SizeStates">
<vsm:VisualState x:Name="Normal">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Content" Storyboard.TargetName="myContentPresenter" BeginTime="00:00:00" Duration="00:00:00.0010000" >
<ObjectAnimationUsingKeyFrames.KeyFrames>
<DiscreteObjectKeyFrame KeyTime="0:0:0">
<DiscreteObjectKeyFrame.Value>
<StackPanel>
<TextBlock>Rararasputin</TextBlock>
<Button Content="{TemplateBinding SmallContent}" />
</StackPanel>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames.KeyFrames>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</vsm:VisualState>
<vsm:VisualState x:Name="Expanded">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Content" Storyboard.TargetName="myContentPresenter" BeginTime="00:00:00" Duration="00:00:00.0010000" >
<ObjectAnimationUsingKeyFrames.KeyFrames>
<DiscreteObjectKeyFrame KeyTime="0:0:0" >
<DiscreteObjectKeyFrame.Value>
<StackPanel>
<TextBlock>Other one</TextBlock>
<Button Content="{TemplateBinding LargeContent}" />
</StackPanel>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames.KeyFrames>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</vsm:VisualState>
</vsm:VisualStateGroup>
</vsm:VisualStateManager.VisualStateGroups>
<ContentPresenter x:Name="myContentPresenter" />
</StackPanel>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
以及如何在您的网页中使用:
<local:TestVSMControl x:Name="myVSMControl" Height="200">
<local:TestVSMControl.SmallContent>
<Rectangle Height="50" Width="100" Fill="Red" />
</local:TestVSMControl.SmallContent>
<local:TestVSMControl.LargeContent>
<Rectangle Height="50" Width="100" Fill="Green" />
</local:TestVSMControl.LargeContent>
</local:TestVSMControl>
<Button Content="Swap" x:Name="VSMButton" Click="VSMButton_Click" />
页面中包含以下内容:
private void VSMButton_Click(object sender, RoutedEventArgs e)
{
myVSMControl.Pressed = !myVSMControl.Pressed;
}
答案 1 :(得分:1)
如果您正在谈论Silverlight可视状态管理器,我担心这是不可能的。
VisualStates仅包含Storyboard对象,而Story对象又包含动画。据我所知,你无法用它来改变模板。
我不确定WPF VisualStateManager的功能。