.NET MAUI - Problem beim Einbinden einer Resource aus andere Assembly

Eigentlich war der Fehler sehr dämlich von mir, aber ich bin wegen der mir unbekannten Fehlermeldung nicht auf das gekommen, was eigentlich die Ursache war. Nachdem ich den Fehler Verstand, dachte ich, ich schreibe das mal auf als Blogeintrag. Aber andererseits habe ich auch zu dem Thema im Internet nichts gefunden.

 

Benötigt

• Visual Studio 2022
• Mindestens .NET 7
• .NET MAUI Application
• .NET MAUI Library

 

Was ist das Ziel?

Die Styles für die Steuerelemente, sollen über eine andere Assembly geliefert werden. Damit dies funktioniert, muss in der Application die Resource in der App.xaml eingetragen werden. Für das Beispiel ist in der Assembly eine Resource abgelegt mit einem Color Style, welches mit einem Key Wert gesetzt ist. In der Application soll dann der Style mit StaticResource einsetzbar sein.

 

Umfeld für Style aufbauen

In der Resource ist ein Style zu einem Color angelegt. Hier nehme ich eine Sache vorweg, hier fehlt die Klasse und komme im späteren Schritt wieder darauf zurück.

 

Damit meine Application darauf zugreifen kann, muss die Assembly in die Abhängigkeiten hinzugefügt werden.

Rechte Maustaste auf Dependencies und im Kontext Menü 'Add Project Reference'

Dann aus der Projektübersicht der Solution, die zu verwendende Bibliothek auswählen.

In der Anwendung muss in die Datei App.xaml die Reference händisch eingetragen werden. Automatische Vervollständigung funktioniert an der Stelle nur zum Teil.

Nun der Merge, um hier die Styles einzubinden. Das Unterstreichen zeigt uns an der Stelle ein Problem.

Am Anfang habe ich bereits erwähnt, dass in der Datei CodexzierTheme.xaml die Klasse fehlt.

Also bringen wie die Klasse noch ein.

Der Fehler in der Anwendung aus der Datei App.xaml ist nun weg.

Auf der MainPage.xaml, habe ich ein Rechteck, welches als Hintergrundfarbe den Style aus der Assembly bekommt. Leider lässt sich das nicht über die Autovervollständigung nicht eintragen.

 

Bis hier her, sieht die Sache in Ordnung aus, mit Ausnahme, dass die Ressource hier nicht gefunden wird über IntelliSense. Ich starte die Anwendung mit F5 und direkt nach dem Start erhalte ich bereits meinen Fehler, den ich bereits als Titelbild gewählt habe.

 

Was fehlt?

Eigentlich sollte klar sein, dass hier die Klasse selbst für die Resource fehlt. In WPF, Silverlight, UWP und XAML musste die Klasse nicht mit eingebunden werden. Bei Xamarin habe ich keine Erfahrungswerte.

 

Per Copy und Paste, habe ich meine ResourceDictionary Datei und nur Namentlich angepasst. Was ich zu diesen Punkt nicht wusste, dass im .NET MAUI zur ResourceDictionary ebenfalls eine Partial Klasse zugeordnet wird.

Nach dem ich zum testen eine ResourceDictionary aus dem .NET MAUI-Templates hinzugefügt habe, war schon gleich der unterschied zu sehen.

Nachdem ich dies so übernahm, ging auch der Aufruf über IntelliSense …

… und die Anwendung ließ sich dann starten mit der gewünschten Farbe aus dem Style.

 

Schlusswort

Wenn das auf der Microsoft Seite so steht, dann funktioniert das auch in der Regel. Das wäre mir auch neu gewesen, wenn eine Beschreibung nicht dem entspricht. Aber meine Erfahrung hat mich an der Stelle in die irre geführt. Die Suche über das Internet ergab ähnliche Ergebnisse, aber keines wies darauf, welche Abhängigkeiten im Umfeld notwendig sein sollten, damit das Einbinden von Resourcen aus einer anderen Assembly funktioniert.

Links

Resource dictionaries - .NET MAUI | Microsoft Learn

Control Style Template mit gleichen Inhalt und unterschieden

Manchmal sind Lösungen so einfach, dass man sie in der Komplexität nicht mehr sieht. So hatte ich tatsächlich eine Menge XAML Code schreiben müssen, die sich praktisch immer wiederholten. Die Premisse war, dass eigentlich nur ein Wert anders war im Template. Die beschriebenen Trigger und Style Aufbauten im Template sind in den meisten fällen identisch für ein Steuerelement. Eine andere Lösung wäre den Aufbau per Behind Code zu schreiben, aber das war tatsächlich die aufwendigere Lösung. Aufwendig, weil mehr code entstehen würde als nötigt.

Umgebung

• WPF, UWP oder XAML Anwendung

Verschieden und doch gleich

Beide Buttons, sollen die gleichen überschriebenen Animationen erhalten. Der Butten bekommt ein Path Objekt, um die Darstellung für jeden Button zu individualisieren. Dabei soll kein Redundanter Code entstehen.

Los geht’s

Der Ordnung halber, wird der Style in eine eigene Resourcendatei geschrieben. Falls Ihr ein Xaml Path Objekt braucht, gibt es auf dem folgenden Link eine Seite mit vielen verschienden Icons.

Modern UI Icons

Material Design Icons

Ausgangslage
In diesem Beispiel verwende ich das File-Icon und ein Folder-Icon. Im folgenden XAML wird zunächst gezeigt, wie zwei Styles die fast identisch sind und sich nur in dem eingesetzten Path Control unterscheiden.
Der XAML Auszug kommt aus 'ButtonWithRepeadTemplate.xaml' (Leider lies sich das nicht vernüfitg hier im Blog abbilden, mit ausnahme eines Bildes). Die orange markierten Zeilen, sind die Stellen die sich unterscheiden und grün sind die Teile, dessen Inhalt gleich sind. (Ellipse habe ich nicht mit einbezogen)

Die Lösung ist nahezu offensichtlich, dass dieser Aufbau selbst als Basis Style festegelgt werden kann. Da es sich um einen Wert handelt, kann über die nicht verwendete DependencyProperty 'Content' später die eigentliche Zieländerungen eingesetzt werden. Das sieht dann im folgendem XAML Code aus.
BLAU: Da kann ein Path Element gesetzt werden mit einer Default Zeichnung.
GRÜN: Der Teil, der später nicht ein zweites mal geschrieben werden muss. Wobei hier angemerkt werden muss, dass auch der Teil in der 'Viewbox' nur in der Basis besteht.

Kommen wir zu den Ziel Button Styles, die als Basis Style (BaseOn) von 'ButtonTemplateBase' verwenden. Durch zuweisung eines Path Element in Content, wird das Aussehen in form eines Icon festgelegt. Also der Teil, der wirklich sich unterscheidet.

Ausprobieren
Mit diesen neunen Button Styles geht das Zuweisen auf der Windows.xaml (oder andere View) weiter, um dort die Resource einzubetten und dessen Styles auf die Ziel Buttons festzulegen.

Fertig
Und so sollte das Ergebnis aussen. Beide Buttons sollte die gleichen Trigger Effekte haben.

Zum Schluss

Wie ich bereits am Anfang geschrieben habe, ist die Lösung simpel und sehr überschaubar. Selbst wenn deutlich mehr Wpf Steuerelemente mit dem gleichen Style Grundaufbau kommen, bleibt die Übersicht. 

Aber wie sieht es aus, wenn sich zwei Inhalte im Template unterscheiden? Kurz gesagt, das geht. Aber dazu gehe ich in einem späteren Blogpost darauf ein.

Beispiel Code
Github - ExampleWpfTemplateWithOneDifferentContent