如何用兩個UserControl中的一個使用局部變量填充MainWindow

Question

我對WPF或C＃並不陌生，但我對MVVM和ViewModel情況並不陌生。

我一直在經歷MVVM和綁定的基礎知識，我需要完成，但我仍然 與xaml細節絆倒。

我的最終目標是創建一個空白的MainWindow.xaml視圖，並使用兩個UserControl.xaml視圖中的一個視圖進行填充。

我有2個簡單的UserControl視圖：MainView.xaml和OptionalView.xaml。

<UserControl x:Class="TestViewSwap.MainView" 
     ...> 
<Grid> 
    <TextBlock Text="Main View" /> 
</Grid> 

<UserControl x:Class="TestViewSwap.OptionalView" 
     ...> 
<Grid> 
    <TextBlock Text="Optional View" /> 
</Grid> 

而一個MainWindow.xaml

<Window x:Class="TestViewSwap.MainWindow" 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    Title="MainWindow" Height="350" Width="525"> 

    <ContentControl Content="{Binding CurrentView}" /> 
</Window> 

我知道CurrentView需要在代碼中設置的背後要麼OptionalView或的MainView 取決於什麼我選擇，但我還不知道的是...什麼類型的CurrentView 0123需要或者需要在文件後面加什麼代碼？

Answer 1

CurrentView應該是您的MainWindowViewModel或Window.xaml上Datacontext的任何類的屬性。爲每個視圖定義一個數據模板。數據模板可以包含視圖或指向用戶控件。將CurrentView分配給視圖模型以切換視圖。下面是一些代碼：

MainWindowViewModel

public class MainWindowViewModel : ViewModel 
{ 
    object currentView; 

    public MainWindowViewModel() 
    { 
    CurrentView = new OptionalView(); 
    SwitchViewCommand = new RelayCommand(SwitchView); 
    } 

    public object CurrentView 
    { 
    get { return this.currentView; } 
    set 
    { 
     this.currentView = value; 
     NotifyPropertyChanged("CurrentView"); 
    } 
    } 

    public RelayCommand SwitchViewCommand { get; set; } 

    void SwitchView() 
    { 
    if (CurrentView is OptionalView) 
     CurrentView = new SettingsView(); 
    else 
     CurrentView = new OptionalView(); 
    } 
} 

public class OptionalView { } 

public partial class SettingsView { } 

主窗口

<Window x:Class="WpfLab.Views.MainWindow" 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    xmlns:views="clr-namespace:WpfLab.Views" 
    xmlns:vm="clr-namespace:WpfLab.ViewModels" 
    Title="MainWindow" 
    Width="525" 
    Height="350"> 
<Window.Resources> 
    <DataTemplate DataType="{x:Type vm:OptionalView}"> 
     <Border Background="Red" /> 
    </DataTemplate> 

    <DataTemplate DataType="{x:Type vm:SettingsView}"> 
     <views:SettingsView /> 
    </DataTemplate> 
</Window.Resources> 
<Grid> 
    <Grid.RowDefinitions> 
     <RowDefinition Height="*" /> 
     <RowDefinition Height="Auto" /> 
    </Grid.RowDefinitions> 
    <ContentControl Content="{Binding CurrentView}" /> 
    <Button Grid.Row="1" 
      Command="{Binding SwitchViewCommand}" 
      Content="SwitchView" /> 
</Grid> 

設置查看

<UserControl x:Class="WpfLab.Views.SettingsView" 
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
     d:DesignHeight="300" 
     d:DesignWidth="300" 
     mc:Ignorable="d"> 
<Border Background="Green" />