WPF:使用MvvmLight切換界面

在網上搜了一下切換用戶控件的方法，發現幾乎都沒有使用MVVM思想，我在閱讀MaterialDesignToolkit項目源碼時，發現該項目采用了MVVM思想來切換界面，根據其代碼，寫了一個小Demo,實現了界面切換，大家可以參考一下。

1. 項目構成
   使用Nuget命令安裝MvvmLight包:
   Install-Package MvvmLight -Version 5.4.1.1
   建立Demo,效果如下圖：
   
2. MainWindow.xaml代碼，使用參數綁定，將要顯示的界面集合綁定至ListBox的ItemsSource中，要顯示的界面綁定至SelectedItem中，ContentControl控件用來顯示用戶界面，將用戶控件綁定到ContentControl.Content屬性上。

        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"
        xmlns:local="clr-namespace:ChangeFrm"
        xmlns:demo="clr-namespace:ChangeFrm.Model"
        DataContext="{Binding Main,Source={StaticResource Locator}}"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="4*"/>
        </Grid.ColumnDefinitions>
        <ListBox Grid.Column="0"  SelectedItem="{Binding SelectedItem}" ItemsSource="{Binding ListDemo}">
            <ListBox.ItemTemplate>
                <DataTemplate DataType="demo:DemoItemModel">
                    <TextBlock Text="{Binding NameStr}"/>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>
        <ContentControl Grid.Column="1" Content="{Binding SelectedItem.ViewContent}"/>
    </Grid>
</Window>

3. MainViewModel.代碼
   進行參數的初始化，每個界面的初始化都在MainViewModel中進行，然后每個View和ViewModel的綁定也在MainViewModel中，這就實現了界面和代碼的分離

using ChangeFrm.View;
using GalaSoft.MvvmLight;
using System.Collections.ObjectModel;

namespace ChangeFrm.ViewModel
{
    public class MainViewModel : ViewModelBase
    {
        /// <summary>
        /// Initializes a new instance of the MainViewModel class.
        /// </summary>
        public MainViewModel()
        {
            MainInit();
        }

        /// <summary>
        /// 初始化函數
        /// </summary>
        private void MainInit()
        {
            ListDemo = new ObservableCollection<DemoItemModel>() {
                new DemoItemModel()
                {
                    NameStr = "第一個",
                    ViewContent= new FirstControl(){ DataContext =  new FirstViewModel()}
                },
                new DemoItemModel()
                {
                    NameStr = "第二個",
                    ViewContent = new SecondControl(){ DataContext = new SecondViewModel()}
                },
                new DemoItemModel()
                {
                    NameStr = "第三個",
                    ViewContent = new ThirdControl(){ DataContext = new ThirdViewModel()}
                }
            };
        }

        private ObservableCollection<DemoItemModel> _ListDemo;
        /// <summary>
        /// 界面集合
        /// </summary>
        public ObservableCollection<DemoItemModel> ListDemo
        {
            get { return _ListDemo; }
            set { _ListDemo = value; RaisePropertyChanged(() => ListDemo); }
        }


        private DemoItemModel _SelectedItem;
        /// <summary>
        /// 選擇的項
        /// </summary>
        public DemoItemModel SelectedItem
        {
            get { return _SelectedItem; }
            set { _SelectedItem = value; RaisePropertyChanged(() => SelectedItem); }
        }
    }
}

4. DemoItemModel.cs代碼
   主要存放每個界面的Content。

using GalaSoft.MvvmLight;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace ChangeFrm.Model
{
    public class DemoItemModel:ViewModelBase
    {
        private object _ViewContent;



        private string _NameStr;
        /// <summary>
        /// 名稱
        /// </summary>
        public string NameStr
        {
            get { return _NameStr; }
            set { _NameStr = value; RaisePropertyChanged(() => NameStr); }
        }


        /// <summary>
        /// 內容
        /// </summary>
        public object ViewContent
        {
            get { return _ViewContent; }
            set { _ViewContent = value; RaisePropertyChanged(() => ViewContent); }
        }

    }
}

5. 結果顯示
   點擊切換不同界面，效果如下
   

使用MVVM思想實現了界面切換