绑定内容控件取决于用户单击按钮

Question

我正在编写一个wpf应用程序并实现了mvvm light工具。 GUI看起来像：

每当用户点击按钮时，它应该更改右侧的内容，标有红色边框。 XAML代码：

<igWpf:XamRibbonWindow x:Class="BackupCustomizing.MainWindow"
        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:ignore="http://www.ignore.com"
        xmlns:ig="http://schemas.infragistics.com/xaml"
        xmlns:views="clr-namespace:BackupCustomizing.Views"
        xmlns:igWpf="http://schemas.infragistics.com/xaml/wpf"
        mc:Ignorable="d ignore"
        Height="400"
        Width="700"
        Title="Backup customizing V0.1"
        DataContext="{Binding Main, Source={StaticResource Locator}}" ResizeMode="NoResize">

    <igWpf:XamRibbonWindow.Resources>
        <DataTemplate DataType="{x:Type views:ServerView}"></DataTemplate>
    </igWpf:XamRibbonWindow.Resources>

    <ig:ThemeManager.Theme>
        <ig:Office2013Theme />
    </ig:ThemeManager.Theme>
    <igWpf:RibbonWindowContentHost x:Name="_content"
                                   Theme="Office2013"
                                   igWpf:RibbonWindowContentHost.ApplicationAccentColor="#0072C6">
        <Grid x:Name="LayoutRoot">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="200"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
            <views:NavigationView Grid.Column="0"/>
            <ContentPresenter Content="{Binding}" Grid.Column="1"/>
        </Grid>

    </igWpf:RibbonWindowContentHost>
</igWpf:XamRibbonWindow>

和背后的代码：

using System.Windows;
using BackupCustomizing.ViewModel;
using Infragistics.Themes;
using Infragistics.Windows.Ribbon;

namespace BackupCustomizing
{
    /// <summary>
    ///     Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : XamRibbonWindow
    {
        /// <summary>
        ///     Initializes a new instance of the MainWindow class.
        /// </summary>
        public MainWindow()
        {
            InitializeComponent();
            Closing += (s, e) => ViewModelLocator.Cleanup();

        }
    }
}

正如您可以看到上面的代码，我试过：

<igWpf:XamRibbonWindow.Resources>
            <DataTemplate DataType="{x:Type views:ServerView}"></DataTemplate>
</igWpf:XamRibbonWindow.Resources>

和内容演示者：

<ContentPresenter Content="{Binding}" Grid.Column="1"/>

在这里我放养了，怎么继续？

ViewModel代码：

using BackupCustomizing.Model;
using GalaSoft.MvvmLight;

namespace BackupCustomizing.ViewModel
{
    /// <summary>
    ///     This class contains properties that the main View can data bind to.
    ///     <para>
    ///         See http://www.galasoft.ch/mvvm
    ///     </para>
    /// </summary>
    public class MainViewModel : ViewModelBase
    {

        private readonly IDataService _dataService;
        private string _welcomeTitle = string.Empty;

        /// <summary>
        ///     Initializes a new instance of the MainViewModel class.
        /// </summary>
        public MainViewModel(IDataService dataService)
        {
            _dataService = dataService;
            _dataService.GetData(
                (item, error) =>
                {

                });
        }
    }
} 

Answer 1

让您的代码以最小的更改工作

    public class MainViewModel : ViewModelBase
    {

        private readonly IDataService _dataService;
        private string _welcomeTitle = string.Empty;
        private ViewModelBase detailsViewModel = null;
        public ViewModelBase DetailsViewModel{
           get { return detailsViewModel;}
           set { detailsViewModel = value; RaisePropertyChanged("DetailsViewModel"); }
        }
        /// <summary>
        ///     Initializes a new instance of the MainViewModel class.
        /// </summary>
        public MainViewModel(IDataService dataService)
        {
            _dataService = dataService;
            _dataService.GetData(
                (item, error) =>
                {
                   detailsViewModel = new ServerViewModel(item); //ViewModel for the ServerView
                });
        }
    }

<igWpf:XamRibbonWindow.Resources>
    <DataTemplate DataType="{x:Type viewModel:ServerViewModel}">
       <views:ServerView />
    </DataTemplate>
</igWpf:XamRibbonWindow.Resources>

<ContentPresenter Content="{Binding DetailsViewModel}" Grid.Column="1"/>

还有其他技术可以做MVVM，我只是用你开始的方法来展示它的方法。这种方法的问题在于它不能很好地扩展到ContentPresenter中的大量视图。