如何使用數據模板將視圖與視圖模型相關聯時，如何將視圖從一個視圖轉換爲另一個視圖

Question

我將發佈我的源代碼，然後解釋我的問題。

這就是我想要的過渡發生

<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取得的，但我不知道這是否是我嘗試做的事情的正確解決方案。

Answer 1

我通過使用視圖模型定位器將視圖綁定到viewmodel和視覺狀態管理器進行轉換，改變了我的轉換方法。

Answer 2

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