有这么一个用户控件，我想让他的右侧是一个可以左右平移的卡片

下面是我是用的两组动画，一组让选定的这个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的按钮）就回不去了,想问一下到底是为什么，有什么解决方法（不要改动触发器类型，单纯的事件触发器不能满足将来的需求）

小郎君520

下面的JS代码如何用JQ实现在当前页弹出可关闭窗口

4条回答

为你推荐