Kolumne XAML Expertise: WPF und Windows-Apps

XAML-Tipp: Mit XamlFaker Designdaten erzeugen
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: Mit XamlFaker Designdaten erzeugen“.

Der XAML-Designer ist für das Entwerfen der Oberfläche per Drag and Drop nicht unbedingt die beste Wahl. Seine wesentliche Stärke ist die visuelle Vorschau des aktuellen Designs. Dazu bietet Visual Studio eine umfangreiche Data-Sources-Toolbox, die zur Designzeit einige Beispieldaten generieren kann. Über einen Wizard stehen hierbei drei unterschiedliche Quellen zur Auswahl: Datenbank, Web Services oder ganz normale Objektklassen. Nach der Auswahl stehen die Datenfelder aufgelistet im Data-Sources-Fenster. Hier kann man noch einmal Einfluss auf die Beispieldaten nehmen und sie anschließend per Drag and Drop auf die gewünschten Steuerelemente ziehen. Der XAML-Designer geniert hierbei automatisch den nötigen Code und legt ein Data Binding fest.

Wird ein Drag and Drop auf eine freie weiße Fläche durchgeführt, wird sogar das passende Steuerelement mit Data Binding erzeugt. Tatsächlich zeigt sich in der Praxis aber, dass dieses umfangreiche Tooling oft zu viel des Guten ist. So hat der zusätzlich generierte Code in der Code-Behind-Datei einen unangenehmen Beigeschmack, gerade wenn im Projekt auf eine MVVM-Architektur gesetzt wird.

Die kostenlose Library XamlFaker ist hingegen eine leichtgewichtige Lösung, die ohne Wizard und Codegenerierung auskommt. Die Erweiterung kann ganz einfach mit Install-Package XamlFaker über NuGet bezogen werden. Mit XamlFaker sind in jeder XAML-Datei nur noch zwei Attribute anzugeben:

Designer.ViewModelType="{x:Type ViewModels:MainWindowViewModel}"
d:DataContext="{d:DesignInstance Type=ViewModels:MainWindowViewModel}"

Beim ersten Attribut wird festgelegt, dass der Designer die Bindings auflösen kann. Das ist relevant für die IntelliSense von Properties. Beim zweiten Attribut wird ein fiktiver DataContext mit Dummydaten erzeugt. Dabei werden für alle Properties zufällige Daten erzeugt und in der Oberfläche angezeigt; die Daten sind meistens völlig willkürlich, aber gerade für die Designanzeige ideal. Unterstützt werden alle primitiven Datentypen, alle komplexen Properties und Mengen wie ein IEnumerable oder eine ObservableCollection.

Wenn etwas mehr Kontrolle über die Beispieldaten gewünscht wird, ist das in Visual Studio integrierte Data-Sources-Feature zu empfehlen. Andernfalls sorgt XamlFaker für eine schnelle und leichtgewichtige Designzeitlösung ohne unnötige Codegenerierung in der Code-Behind-Datei. In Listing 1 wird eine MainWindow.xaml-Datei mit XamlFaker veranschaulicht. Diese hat nur eine einfache ListView mit einem Data-Template und dem Verweis auf ein ViewModel. Das Ergebnis des XAML-Designers ist in Abbildung 1 zu sehen.

<Window
  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:ViewModels="clr-namespace:WpfDesignDataSample.ViewModels" 
  x:Class="WpfDesignDataSample.MainWindow"
  mc:Ignorable="d"
  Designer.ViewModelType="{x:Type ViewModels:MainWindowViewModel}"
  Title="MainWindow" Height="350" Width="525">
  <Window.Resources>
    <ViewModels:MainWindowViewModel x:Key="ViewModel" />
    <DataTemplate x:Key="CustomersList">
      <StackPanel>
        <TextBlock Text="{Binding Company}" FontWeight="Bold"></TextBlock>
        <TextBlock Text="{Binding Name}"></TextBlock>
      </StackPanel>
    /DataTemplate>
  </Window.Resources>
  <Grid DataContext="{StaticResource ViewModel}" 
    d:DataContext="{d:DesignInstance Type=ViewModels:MainWindowViewModel}">
    <ListView Margin="10,10,10,10" 
      ItemsSource="{Binding Customers}" 
      ItemTemplate="{StaticResource CustomersList}" />
  </Grid>
</Window>
Abb. 1: XamlFaker sorgt für Beispieldaten zur Designzeit

Abb. 1: XamlFaker sorgt für Beispieldaten zur Designzeit

Unsere Redaktion empfiehlt:

Relevante Beiträge

Hinterlasse einen Kommentar

Hinterlasse den ersten Kommentar!

avatar
400
  Subscribe  
Benachrichtige mich zu:
X
- Gib Deinen Standort ein -
- or -