绑定内容控件依赖于用户点击按钮

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 中的大量视图。