如何使用数据模板将视图与视图模型相关联时，如何将视图从一个视图转换为另一个视图

我将发布我的源代码，然后解释我的问题。如何使用数据模板将视图与视图模型相关联时，如何将视图从一个视图转换为另一个视图

这就是我想要的过渡发生

<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>

窗口这是相关联的视图模型

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相关联。这一切都按预期工作。当点击按钮时，视图改变，数据绑定工作，一切正常。

我现在喜欢做的是在视图改变时使用动画。

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

希望你能帮助我。

问候

帕斯卡

附：如果我对数据模板的处理方法没有意义，并且采用这种方法不可能进行动画处理，那么我可以将其他最佳实践从onw视图更改为另一个。我使用的解决方案是由karl shifflet的wpf demo app取得的，但我不知道这是否是我尝试做的事情的正确解决方案。

来源

2010-08-16 obivandamme

没有足够的时间来写出完整的答案，所以这里是一个快速总结：关键点是使用[BoT]（https://github.com/thinkpixellab/bot）库的过渡（样本文件可以是发现[这里]（https://github.com/thinkpixellab/bot/blob/master/Demo/Wpf/TransitionPresenter/TransitionPresenterPage.xaml））。看一下'TransitionPresenter'控件，它具有'Content'属性，所以你只需要选择一个渐变过渡并将'Content'绑定到你的'MyContent' VM属性。当然，我还没有尝试过，但似乎并不困难。 – Snowbear 2011-06-06 08:58:31

-1

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

来源

2011-08-01 10:03:20 obivandamme

记住你的解决方案的胆量？我正在做类似的事情，努力维护MVVM，同时引发我想要的行为。 – 2011-09-15 10:41:16

<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>

来源

2011-06-06 08:37:55 Bathineni

，这使MVVM的垃圾 – Snowbear 2011-06-06 08:51:29

如何使用数据模板将视图与视图模型相关联时，如何将视图从一个视图转换为另一个视图

回答

相关问题