Kolumne XAML Expertise: WPF und Windows-Apps

XAML-Tipp: Oberfläche aus ViewModel generieren mit XAML Power Toys
Keine Kommentare

In der Kolumne „XAML Expertise“ präsentiert Gregor Biswanger Top-How-tos zum Thema XAML. Einsteiger und Fortgeschrittene XAML-Experten sollen hier durch geballtes Wissen gesättigt werden. Heute gibt es folgende Expertise: „XAML: Oberfläche aus ViewModel generieren mit XAML Power Toys“.

XAML: Oberfläche aus ViewModel generieren mit XAML Power Toys

Eine neue Erweiterung für Visual Studio 2015 lässt die Herzen der XAML-Entwickler höher schlagen: XAML Power Toys. Dieses ermöglicht durch einen Wizard das Generieren von Oberflächen anhand von ViewModels oder Datenklassen. So kann mit nur wenigen Klicks einiges an Zeit gespart werden. Bei den Oberflächen handelt es sich um einfache Formularoberflächen. Aktuell unterstützen die XAML Power Toys WPF- und Xamarin-Projekte. An der Unterstützung von Windows-Apps wird gerade gearbeitet. Die Erweiterung selbst wurde von Karl Shifflett entwickelt und ist Open Source auf GitHub verfügbar. Installiert wird sie über Visual Studio im Menü Tools | Extensions & Updates oder direkt über die Visual Studio Gallery.

Als kleines Beispiel verwenden wir ein MainWindowViewModel mit zwei Eigenschaften. Ziel ist die Generierung einer Formularoberfläche, sodass neue Personen eingetragen werden können. Nachdem das ViewModel aus Listing 1 angelegt wurde, muss zunächst das Projekt neu gebuildet werden, damit die XAML Power Toys die neue Implementierung in der aktuellen Assembly finden können. Als nächster Schritt wird das ViewModel in der MainWindow.xaml unter Ressources angelegt. Mit einem Rechtsklick im XAML-Editor können die XAML Power Toys ganz unten im Kontextmenü gestartet werden. Es öffnet sich ein Wizard-Dialog.

Dieser benötigt die ViewModelInstanz auf der linken Seite für die aktuelle Oberfläche. Weiter geht es mit einem Klick auf den „Next“-Button rechts unten. Daraufhin folgt der Part, bei dem sich die gewünschte Oberfläche zusammenklicken lässt. So sieht man links alle Eigenschaften aus dem ViewModel.

In unserem Fall möchten wir aus dem Name– und E-Mail-Property ein Formular erstellen. So wird von der linken Seite das gewünschte Property mittels Drag and Drop auf die rechte Seite geschoben (Abb. 1). Zusätzliche Eigenschaften können hier nun festgelegt werden. Wie zum Beispiel der Binding Mode, das gewünschte Steuerelement, Value Converter, Labelanzeige etc. Der Wizard wird anschließend mit Betätigen der Buttons „Next“ und „Generate UI beendet. Innerhalb der MainWindow.xaml wurde nun der nötige XAML-Code für ein Formular eingefügt. Der generierte Code wird in Listing 2 gezeigt und die fertige Oberfläche in Abbildung 2.

Abb. 1: Auswahl der gewünschten Daten aus dem ViewModel

Abb. 1: Auswahl der gewünschten Daten aus dem ViewModel

Abb. 2: WPF-Anwendung mit generierter Formularoberfläche

Zugegeben, die Oberfläche ist sehr leichtgewichtig, benötigt aber dennoch einige Anpassungen fürs eigene Design. Dann gehen XAML-Entwickler für gewöhnlich in eine ganz andere Richtung: Erst wird die Oberfläche entworfen, daraus entsteht ein ViewModel. Dennoch kann man für einfache Formularoberflächen einiges an Zeit sparen. In der Praxis konnten wir gerade unter Xamarin in den Genuss kommen, die XAML Power Toys erfolgreich einzusetzen. Auf dem Blog der XAML Power Toys gibt es noch zahlreiche Videoanleitungen, die ich euch auf jeden Fall empfehle.

public class MainWindowViewModel
{
  public string Name { get; set; }

  public string EMail { get; set; }

  public MainWindowViewModel()
  {
  }
}
<Window
  x:Class="WpfApplication.MainWindowView"
  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:local="clr-namespace:WpfApplication"
  xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  Title="MainWindow"
  Width="525"
  Height="350"
  mc:Ignorable="d">
  <Window.Resources>
    <local:MainWindowViewModel x:Key="ViewModel" />
  </Window.Resources>

  <Grid DataContext="{StaticResource ViewModel}">
    <Grid>
      <Grid.ColumnDefinitions>
        <ColumnDefinition Width="85"/>
        <ColumnDefinition Width="*"/>
      </Grid.ColumnDefinitions>
      <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="Auto"/>
      </Grid.RowDefinitions>

      <Label Content="Name" />
      <TextBox Text="{Binding Path=Name, Mode=TwoWay, ValidatesOnDataErrors=True, ValidatesOnNotifyDataErrors=True, ValidatesOnExceptions=True}" Grid.Column="1" Grid.Row="0" />
      <Label Content="E Mail" Grid.Row="1" />
      <TextBox Text="{Binding Path=EMail, Mode=TwoWay, ValidatesOnDataErrors=True, ValidatesOnNotifyDataErrors=True, ValidatesOnExceptions=True}" Grid.Column="1" Grid.Row="1" />
    </Grid>
  </Grid>
</Window>

BASTA! 2021

Neuerungen in .NET 6.0 – das eine .NET, sie alle zu beherrschen

mit Dr. Holger Schwichtenberg (DOTNET-DOKTOR)

C# Workshop: — was kommt Neues mit C# 10 und .NET 6?

mit Rainer Stropek (timecockpit.com)

Funktionaler Code mit C# 9

Oliver Sturm (DevExpress)

 

Unsere Redaktion empfiehlt:

Relevante Beiträge

Abonnieren
Benachrichtige mich bei
guest
0 Comments
Inline Feedbacks
View all comments
X
- Gib Deinen Standort ein -
- or -