使用数据模板将视图与视图模型关联时,如何设置从一个视图到另一个视图的转换动画

时间:2010-08-16 15:04:34

标签: wpf animation mvvm mvvm-light transition

我将发布我目前的源代码并在此之后解释我的问题。

这是我希望转换发生的窗口

<Window x:Class="MyApp.MainView"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MyApp" Height="600" Width="800">
<StackPanel>
    <Button Content="View1" Command="{Binding View1Command}"/>
    <Button COntent="View2" Command="{Binding View2Command}"/>
    <ContentControl Content="{Binding MyContent}"/>
</StackPanel>

这是相关的View-Model

public class MainViewModel
{
    public RelayCommand View1Command{ get; private set;}
    public RelayCommand View2Command{ get; private set;}

    //INotifyPropertyChanged is implemented of course
    public ViewModelBase MyContent { get; set;}

    public MainViewModel()
    {
        View1Command = new RelayCommand(() => { MyContent = new ViewModel1();});
        View2Command = new RelayCommand(() => { MyContent = new ViewModel2();});
    }
}

在app.xaml中,我使用数据模板将ViewModel1与View1和ViewModel2与View2相关联。这一切都按预期工作。单击按钮时,视图会更改,数据绑定工作正常,一切正常。

我现在要做的是在视图发生变化时使用动画。

我需要做些什么来设置两个视图之间的过渡动​​画,让我们说新视图的淡入淡出动画。旧视图消失,新视图在一秒钟内消失。

希望你能帮助我。

最好的问候

帕斯卡

P.S。如果我使用数据模板的方法没有意义,并且使用该方法无法进行动画,那么我愿意将其他最佳实践从onw视图更改为另一个视图。我使用的解决方案来自karl shifflet的wpf演示应用程序,但我不知道这是否是我试图做的事情的正确解决方案。

2 个答案:

答案 0 :(得分:0)

<Window.Resources>
<Storyboard x:Key="OnClick1">
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="CC1">
                <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="1"/>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="CC2">
                <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="0"/>
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>
        <Storyboard x:Key="OnClick2">
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="CC1">
                <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="CC2">
                <EasingDoubleKeyFrame KeyTime="0" Value="1"/>
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>
</Window.Resources>
<Window.Triggers>       
        <EventTrigger RoutedEvent="ButtonBase.Click" SourceName="button">
            <BeginStoryboard x:Name="OnClick1_BeginStoryboard" Storyboard="{StaticResource OnClick1}"/>
            <BeginStoryboard x:Name="OnClick2_BeginStoryboard" Storyboard="{StaticResource OnClick2}"/>
        </EventTrigger>
    </Window.Triggers>
    <StackPanel> 
            <Button x:Name="button" Content="View1" Command="{Binding View1Command}"/>  
            <Button Content="View2" Command="{Binding View2Command}"/> 
            <Grid>
                <ContentControl Name="CC1" Opacity="1" Content="{Binding MyContent}"/> 
                <ContentControl Name="CC2" Opacity="0" Content="{Binding MyContent}"/> 
            </Grid>
            </StackPanel>

答案 1 :(得分:-1)

我通过使用视图模型定位器将视图绑定到viewmodel和视觉状态管理器进行转换来改变我的转换方法。