有这么一个用户控件,我想让他的右侧是一个可以左右平移的卡片
下面是我是用的两组动画,一组让选定的这个grid向左移动一组向右,现在需要使用数据触发器来控制动画执行
<Storyboard x:Key="ShowRight">
<ThicknessAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Margin)">
<EasingThicknessKeyFrame KeyTime="0" Value="0,0,0,0"/>
<EasingThicknessKeyFrame KeyTime="0:0:0.4" Value="-290,0,0,0"/>
</ThicknessAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="ShowLeft">
<ThicknessAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Margin)">
<EasingThicknessKeyFrame KeyTime="0" Value="-290,0,0,0"/>
<EasingThicknessKeyFrame KeyTime="0:0:0.4" Value="0,0,0,0"/>
</ThicknessAnimationUsingKeyFrames>
</Storyboard>
我在需要控制的Grid中添加了下面这一组数据触发器
<Grid x:Name="CardGrid" Grid.Column="3" Background="White" Width="580" Panel.ZIndex="1">
<Grid.Style>
<Style>
<Style.Triggers>
<DataTrigger Binding="{Binding AnimationModel.CardState}" Value="Left">
<DataTrigger.EnterActions>
<BeginStoryboard Storyboard="{StaticResource ShowLeft}"/>
</DataTrigger.EnterActions>
</DataTrigger>
<DataTrigger Binding="{Binding AnimationModel.CardState}" Value="Right">
<DataTrigger.EnterActions>
<BeginStoryboard Storyboard="{StaticResource ShowRight}"/>
</DataTrigger.EnterActions>
</DataTrigger>
</Style.Triggers>
</Style>
</Grid.Style>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<!--CardLeft-->
<Grid Grid.Column="0">
<Button Content="Edit" Width="100" Command="{Binding DetailCommand}"/>
</Grid>
<!--CardRight-->
<Grid Grid.Column="1" Background="Black">
<Button Content="Back" Width="100" Command="{Binding OutlineCommand}"/>
</Grid>
</Grid>
</Grid>
这里是用于绑定的两组命令:
/// <summary>
/// 显示大纲视图命令
/// </summary>
private RelayCommand _outlineCommand;
public RelayCommand OutlineCommand
{
get
{
return _outlineCommand
?? (_outlineCommand = new RelayCommand(
() =>
{
AnimationModel.CardState = "";
AnimationModel.CardState = "Left";
}));
}
set { _outlineCommand = value; }
}
/// <summary>
/// 显示细节视图命令
/// </summary>
private RelayCommand _detailCommand;
public RelayCommand DetailCommand
{
get
{
return _detailCommand
?? (_detailCommand = new RelayCommand(
() =>
{
AnimationModel.CardState = "";
AnimationModel.CardState = "Right";
}));
}
set { _outlineCommand = value; }
}
但是不知为何只有第一次点击Edit的时候卡片会向左移动,然后再点击Back(Back是放在右侧Grid的按钮)就回不去了,想问一下到底是为什么,有什么解决方法(不要改动触发器类型,单纯的事件触发器不能满足将来的需求)