Markieren Sie das Kontrollkästchen Englisch, um die englische Version dieses Artikels anzuzeigen. Sie können den englischen Text auch in einem Popup-Fenster einblenden, indem Sie den Mauszeiger über den Text bewegen.
Übersetzung
Englisch

Verwenden der portablen Klassenbibliothek mit Model-View-View Model

.NET Framework (current version)
 

Sie können .NET Framework Portable Klassenbibliothek verwenden, um das Muster MVVM (Model-View-View Model (MVVM) zu implementieren und Assemblys auf mehreren Plattformen freigegeben.

MVVM ist ein Anwendungsmuster, das die Benutzeroberfläche von der zugrunde liegenden Geschäftslogik isoliert. Sie können die Modell- und Ansichtsmodellklassen in einem Portable KlassenbibliothekVisual Studio 2012- Projekt implementieren und dann Ansichten erstellen, die für unterschiedliche Plattformen angepasst sind. Dieser Ansatz ermöglicht Ihnen, das Datenmodell und die Geschäftslogik nur einmal schreiben und verwendet diesen Code in .NET Framework, von Silverlight, Windows Phone und Windows 8.x Store - Apps, wie in der folgenden Abbildung gezeigt.

Übertragbar mit MMM-Diagramm

Dieses Thema bietet keine allgemeinen Informationen über das MVVM-Muster. Es enthält nur Informationen darüber, wie Portable Klassenbibliothek zum Implementieren von MVVM verwendet wird. Weitere Informationen über MVVM, finden Sie unter MVVM Schnellstart in der MSDN Library.

Zum Implementieren von MVVM erstellen Sie in der Regel das Modell und das Ansichtsmodell in einem Portable Klassenbibliothek-Projekt, da ein Portable Klassenbibliothek-Projekt nur auf portable Projekte verweisen kann. Das Modell und das Ansichtsmodell können sich im gleichen Projekt oder in verschiedenen Projekten befinden. Wenn Sie verschiedene Projekte verwenden, fügen Sie einen Verweis vom Ansichtsmodellprojekt zum Modellprojekt hinzu.

Nachdem Sie das Modellprojekt und das Ansichtsmodellprojekt kompiliert haben, verweisen Sie in der App, in der sich die Ansicht befindet, auf die entsprechenden Assemblys. Wenn die Ansicht nur mit dem Ansichtsmodell interagiert, müssen Sie nur auf die Assembly verweisen, die das Ansichtsmodell enthält.

Im folgenden Beispiel wird eine vereinfachte Modellklasse gezeigt, die sich in einem Portable Klassenbibliothek-Projekt befinden kann.

using System;

namespace SimpleMVVM.Model
{  
    public class Customer
    {
        public int CustomerID
        {
            get; 
            set;   
        }

        public string FullName
        {
            get;
            set;
        }

        public string Phone
        {
            get; 
            set;
        }
    }
}

Das folgende Beispiel zeigt eine einfache Möglichkeit zum Füllen, Abrufen und Aktualisieren der Daten in einem Portable Klassenbibliothek-Projekt. In einer realen App rufen Sie die Daten aus einer Quelle wie einem Windows Communication Foundation (WCF)-Dienst ab.

using System;
using System.Collections.Generic;
using System.Linq;

namespace SimpleMVVM.Model
{
    public class CustomerRepository
    {
        private List<Customer> _customers;

        public CustomerRepository()
        {
            _customers = new List<Customer>
            {
                new Customer(){ CustomerID = 1, FullName="Dana Birkby", Phone="394-555-0181"},
                new Customer(){ CustomerID = 2, FullName="Adriana Giorgi", Phone="117-555-0119"},
                new Customer(){ CustomerID = 3, FullName="Wei Yu", Phone="798-555-0118"}
            };
        }

        public List<Customer> GetCustomers()
        {
            return _customers;
        }

        public void UpdateCustomer(Customer SelectedCustomer)
        {
            Customer customerToChange = _customers.Single(c => c.CustomerID == SelectedCustomer.CustomerID);
            customerToChange = SelectedCustomer;
        }
    }
}

Beim Implementieren des MVVM-Musters wird häufig eine Basisklasse für Ansichtsmodelle hinzugefügt. Das folgende Beispiel zeigt eine Basisklasse.

using System;
using System.ComponentModel;

namespace SimpleMVVM.ViewModel
{
    public abstract class ViewModelBase : INotifyPropertyChanged
    {
        public event PropertyChangedEventHandler PropertyChanged;

        protected virtual void OnPropertyChanged(string propName)
        {
            if (PropertyChanged != null)
            {
                PropertyChanged(this, new PropertyChangedEventArgs(propName));
            }
        }
    }
}

Mit dem MVVM-Muster wird häufig eine Implementierung der ICommand-Schnittstelle verwendet. Im folgenden Beispiel wird eine Implementierung der ICommand-Schnittstelle veranschaulicht.

using System;
using System.Windows.Input;

namespace SimpleMVVM.ViewModel
{
    public class RelayCommand : ICommand
    {
        private readonly Action _handler;
        private bool _isEnabled;

        public RelayCommand(Action handler)
        {
            _handler = handler;
        }

        public bool IsEnabled
        {
            get { return _isEnabled; }
            set
            {
                if (value != _isEnabled)
                {
                    _isEnabled = value;
                    if (CanExecuteChanged != null)
                    {
                        CanExecuteChanged(this, EventArgs.Empty);
                    }
                }
            }
        }

        public bool CanExecute(object parameter)
        {
            return IsEnabled;
        }

        public event EventHandler CanExecuteChanged;

        public void Execute(object parameter)
        {
            _handler();
        }
    }
}

Im folgenden Beispiel wird ein vereinfachtes Ansichtsmodell gezeigt.

using System;
using System.Collections.Generic;
using SimpleMVVM.Model;

namespace SimpleMVVM.ViewModel
{
    public class CustomerViewModel : ViewModelBase
    {
        private List<Customer> _customers;
        private Customer _currentCustomer;
        private CustomerRepository _repository;

        public CustomerViewModel()
        {
            _repository = new CustomerRepository();
            _customers = _repository.GetCustomers();

            WireCommands();
        }

        private void WireCommands()
        {
            UpdateCustomerCommand = new RelayCommand(UpdateCustomer);
        }

        public RelayCommand UpdateCustomerCommand
        {
            get;
            private set;
        }

        public List<Customer> Customers
        {
            get { return _customers; }
            set { _customers = value; }
        }

        public Customer CurrentCustomer
        {
            get
            {
                return _currentCustomer;
            }

            set
            {
                if (_currentCustomer != value)
                {
                    _currentCustomer = value;
                    OnPropertyChanged("CurrentCustomer");
                    UpdateCustomerCommand.IsEnabled = true;
                }
            }
        }

        public void UpdateCustomer()
        {
            _repository.UpdateCustomer(CurrentCustomer);
        }
    }
}

Sie können von einer .NET Framework 4.5-App, einer App im Windows 8.x Store, einer Silverlight-App oder Windows Phone 7.5-App auf die Assembly verweisen, die das Modellprojekt und das Ansichtsmodellprojekt enthält. Anschließend erstellen Sie eine Ansicht, die mit dem Ansichtsmodell interagiert. Im folgenden Beispiel wird eine vereinfachte WPF (Windows Presentation Foundation)-App gezeigt, die Daten aus dem Ansichtsmodell abfragt und aktualisiert. Sie können in Silverlight-Apps, Windows Phone-Apps oder Apps im Windows 8.x Store ähnliche Ansichten erstellen.

<Window x:Class="SimpleWPF.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:viewModels="clr-namespace:SimpleMVVM.ViewModel;assembly=SimpleMVVM.ViewModel"
        Title="MainWindow" Height="350" Width="525">
    <Window.Resources>
        <viewModels:MainPageViewModel x:Key="ViewModel" />
    </Window.Resources>
    <Grid DataContext="{Binding Source={StaticResource ViewModel}}">
        <Grid.ColumnDefinitions>
            <ColumnDefinition></ColumnDefinition>
            <ColumnDefinition></ColumnDefinition>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"></RowDefinition>
            <RowDefinition Height="Auto"></RowDefinition>
            <RowDefinition Height="Auto"></RowDefinition>
            <RowDefinition Height="Auto"></RowDefinition>
            <RowDefinition Height="Auto"></RowDefinition>
        </Grid.RowDefinitions>
        <TextBlock Height="23" Margin="5" HorizontalAlignment="Right" Grid.Column="0" Grid.Row="0" Name="textBlock2" 
                   Text="Select a Customer:" VerticalAlignment="Top" />
        <ComboBox Height="23" HorizontalAlignment="Left" Grid.Column="1" Grid.Row="0" Name="CustomersComboBox" VerticalAlignment="Top" Width="173" 
                  DisplayMemberPath="FullName" SelectedItem="{Binding Path=CurrentCustomer, Mode=TwoWay}" ItemsSource="{Binding Path=Customers}" />
        <TextBlock Height="23" Margin="5" HorizontalAlignment="Right" Grid.Column="0" Grid.Row="1" Name="textBlock4" Text="Customer ID" />
        <TextBlock Height="23" Margin="5" HorizontalAlignment="Right" Grid.Column="0" Grid.Row="2" Name="textBlock5" Text="Name" />
        <TextBlock Height="23" Margin="5" HorizontalAlignment="Right" Grid.Column="0" Grid.Row="3" Name="textBlock9" Text="Phone" />
        <TextBlock Height="23" HorizontalAlignment="Left" Grid.Column="1" Grid.Row="1" Name="CustomerIDTextBlock" 
                   Text="{Binding ElementName=CustomersComboBox, Path=SelectedItem.CustomerID}" />
        <TextBox Height="23" HorizontalAlignment="Left" Grid.Column="1" Grid.Row="2" Width="219" 
                 Text="{Binding Path=CurrentCustomer.FullName, Mode=TwoWay}" />
        <TextBox Height="23" HorizontalAlignment="Left" Grid.Column="1" Grid.Row="3" Width="219" 
                 Text="{Binding Path=CurrentCustomer.Phone, Mode=TwoWay}" />
        <Button
            Command="{Binding UpdateCustomerCommand}"
            Content="Update" Height="23" HorizontalAlignment="Right" Grid.Column="0" Grid.Row="4" 
            Name="UpdateButton" VerticalAlignment="Top" Width="75" />
    </Grid>
</Window>
Anzeigen: