如何在 MVVM 中实现具有选定详细信息的列表

Question

我有一个使用 MVVM 和 Prism 的 Silverlight 项目。

我关注了http://www.telerik.com/help/silverlight/patterns-and-practices-eventtocommand-prism.html

我在网格中选择了一行，调试器点击了我设置 Detail 对象的预期方法 (SelectPerson)。但是我认为我对细节对象（PersonDetail）的绑定表达式是错误的。

这是我的 ViewModel：

using System;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Ink;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using System.Collections.ObjectModel;
using Telerik.Windows.Controls;
using Telerik.Windows.Controls.GridView;


namespace RadControlsSilverlight
{
    public class PersonViewModel
    {
        public ObservableCollection<PersonInfo> GridItems { get; set; }
        public PersonInfo PersonDetail { get; set; }
        public DelegateCommand SelectPersonCommand { get; set; }

        public PersonViewModel()
        {
            SetupData();
            SelectPersonCommand = new DelegateCommand(SelectPerson);
        }


        public void SelectPerson(object obj)
        {
            Telerik.Windows.Controls.SelectionChangeEventArgs e = obj as Telerik.Windows.Controls.SelectionChangeEventArgs;
            PersonInfo person = (PersonInfo)e.AddedItems[0];

            PersonDetail = person;

        }



        public void SetupData()
        {
            Random rnd = new Random();

            GridItems = new ObservableCollection<PersonInfo>();

            for (int i = 0; i < 100; i++)
            {
                PersonInfo edi = new PersonInfo();
                edi.ID = i;
                edi.Name = "Name " + i.ToString();
                edi.Date = DateTime.Today.AddDays(i);
                edi.IsAvailable = (i % 3 == 0 ? true : false);

                GridItems.Add(edi);
            }

        }
    }
}

这里是视图

<UserControl x:Class="RadControlsSilverlight.PersonList"
    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"
    mc:Ignorable="d"
              xmlns:prismcommands="clr-namespace:RadControlsSilverlight.PrismCommands"

              xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"

      xmlns:local="clr-namespace:RadControlsSilverlight"
    d:DesignHeight="300" d:DesignWidth="400">

    <UserControl.Resources>
        <local:PersonViewModel x:Key="xVM" />
    </UserControl.Resources>

    <Grid x:Name="LayoutRoot"
          Background="White"
          DataContext="{StaticResource xVM}">
        <Grid.ColumnDefinitions>
            <ColumnDefinition />
            <ColumnDefinition />
        </Grid.ColumnDefinitions>

        <telerik:RadGridView x:Name="xRadGridView"
                             ItemsSource="{Binding GridItems, Mode=TwoWay}"


                             prismcommands:SelectionChangedCommand.Command="{Binding SelectPersonCommand}"

                             >

        </telerik:RadGridView>
        <telerik:RadDataForm x:Name="DataForm1"
                             Grid.Column="1"
                              CurrentItem="{Binding PersonDetail, Mode=TwoWay}"
                             Header="Person Detail"/>

    </Grid>
</UserControl>

要在 DataForm 中显示被选中的单个 PersonInfo 对象，我需要进行哪些更改？

Answer 1

您缺少通知 UI 要更新然后重新绑定的 PersonDetail 的事件。您可以通过在 PRISM 中实现 NotificationObject 来实现。

public class PersonViewModel : NotificationObject
{
    private PersonInfo _personDetail;
    public PersonInfo PersonDetail
    {
        get { return _personDetail; }
        set
        {
            if(_personDetail != value)
            {
                _personDetail = value;
                //Notify UI of update
                RaisePropertyChanged(() => PersonDetail);               
            }
        }
    }           
}