XAML-Tipp: XAML-Anwendungen mit CSS stylen- entwickler.de

Ein neues Open-Source-Projekt lässt die Herzen der Webentwickler, die sich mit der XAML-Entwicklung auseinandersetzen müssen, gleich höherschlagen. Denn XamlCSS ermöglicht das Verwenden von CSS (Cascading Style Sheets) innerhalb einer XAML-Anwendung. Obwohl ich mich persönlich bei XAML und der Webentwicklung zuhause fühle, würde ich bei einer ernsthaften Geschäftsanwendung vor dem Einsatz dieser Erweiterung abraten. Der Grund dafür ist, dass der technologische Mix die Wartbarkeit erschwert und andere Entwickler aus dem Team dazu zwingt, tiefere CSS-Kenntnisse haben zu müssen. Darüber hinaus ist die Performance bei nativen XAML-Styles erheblich besser. Allerdings gefällt mir aus technologischer Sicht die Umsetzung, weshalb ich sie in meiner Kolumne nicht vorenthalten möchte.

XAML: XAML-Anwendungen mit CSS stylen

XamlCSS unterstützt folgende XAML-Anwendungen: WPF, Universal-Windows-Apps und Xamarin Forms. Besondere Features sind:

Support für alle CSS-Selektoren
Entfernen und Nachladen von Styles
Erkennen von neuen Elementen zur Laufzeit
Support für Data Binding
Support für Static und Dynamic Resources
Das Setzen simpler Eigenschaften nach CSS-Standards: Foreground, Font Size, Font Style, uvm.

Die Erweiterung wird einfach über NuGet mit XamlCSS gesucht und installiert. Bei diesem kleinen Beispiel wird ein neues WPF-Projekt angelegt und XamlCSS.WPF über NuGet installiert. In Listing 1 steht der XAML-Code für das einfache MainWindow-Fenster, das einen Button und den dazugehörigen CSS-Style enthält. Das Wichtigste ist erst einmal das Schreiben der beiden XAML Namespaces. Anschließend können die CSS-Styles wie normale XAML-Styles über die Ressourcen instanziiert und verwendet werden. Das ermöglicht die StyleSheet-Klasse. Sie benötigt, wie bei Ressourcen üblich, einen Schlüssel. Deren Content-Eigenschaft erhält dann den gewünschten CSS-Code. Leider bietet natürlich der Visual-Studio-XAML-Editor kein IntelliSense für CSS. Für das Data Binding dieser Ressource wird das CSS Style Sheet Attached Property bereitgestellt. Das waren auch schon alle nötigen Schritte. Beim Starten der Anwendung wird der Button mittig und mit weißer Schrift auf blauem Hintergrund dargestellt (Abb. 1).

Listing 1: CSS-Style innerhalb einer WPF-Anwendung nutzen

<Window x:Class="WpfCssSample.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:css="clr-namespace:XamlCSS;assembly=XamlCSS"
  xmlns:cssWpf="clr-namespace:XamlCSS.WPF;assembly=XamlCSS.WPF"
  mc:Ignorable="d"
  Title="MainWindow" Height="350" Width="525">
    <Window.Resources>
      <css:StyleSheet x:Key="InternalStyle">
        <css:StyleSheet.Content>
          Button {
            Width: 100;
            Height: 40;
            Background: blue;
            Foreground: white;
          }
        </css:StyleSheet.Content>
      </css:StyleSheet>
    </Window.Resources>
    <Grid cssWpf:Css.StyleSheet="{DynamicResource InternalStyle}">
      <Button>Klick mich!</Button>
    </Grid>
</Window>

Abb. 1: CSS-Style, der innerhalb einer WPF-Anwendung genutzt wird

Windows Developer

Dieser Artikel ist im Windows Developer erschienen. Windows Developer informiert umfassend und herstellerneutral über neue Trends und Möglichkeiten der Software- und Systementwicklung rund um Microsoft-Technologien.

Natürlich können Sie den Windows Developer über den entwickler.kiosk auch digital im Browser oder auf Ihren Android- und iOS-Devices lesen. Außerdem ist der Windows Developer weiterhin als Print-Magazin im Abonnement erhältlich.