2 Mai 2020

Worklog Seeing# 2: Styling für ModelViewer

Dieses Wochenende ist für mich der ModelViewer von Seeing# wieder in den Fokus gerückt. Grund war ursprünglich, dass ich mehrere Detailinformationen zum geladenen 3D-Modell anzeigen wollte (z. B. Anzahl Polygone). Da ich dazu ein neues Fenster gemacht habe, habe ich bei der Gelegenheit auch das Styling des ModelViewers etwas überarbeitet. Für mich zunächst leichtes Neuland, da ich sonst eines der großen kommerziellen UI-Frameworks für WPF gewohnt bin. Nach etwas Recherche in der OpenSource-Welt und ein paar kleinen Testprojekten bin ich aber sehr positiv überrascht, wie gut und schnell man hier auch mit OpenSource-Komponenten zum Ziel kommt.

Konkret habe ich zunächst damit begonnen, den ModelViewer in verschiedene Unterfenster aufzuteilen. Hierbei kam mir zwar zuerst AvalonDock [1] in den Sinn, fand es dann aber doch etwas „too much“. Die Teilfenster hätte ich lediglich mit jeweils einer GroupBox umschlossen und über ein Grid im Hauptfenster angeordnet. Um die Fenster dennoch verschieben zu können, setze ich GridSplitter an den entsprechenden Stellen ein. Soweit also nicht Besonderes…

Als nächstes dachte ich mir, ein „Dark Theme“ würde dem ModelViewer ganz gut stehen. Hierfür bin ich auf das Projekt „Material Design in XAML“ [2] gestoßen. Insgesamt besteht das Packet lediglich aus zwei Dlls, es lässt sich anhand der Tutorials schnell einrichten und bringt auch eine lange Liste an Vektor-Icons mit (die MaterialIcons von Google [3]).

Das Ergebnis sieht man im Bild oben und kann sich aus meiner Sicht schon sehen lassen. Etwas störend ist noch die Titelleiste des Hauptfensters, aber die ist bekanntlich eine andere Geschichte. Insgesamt bin ich aber sehr zufrieden, wo man hier mit ca. einem halben Tag Arbeit hinkommt. Den Quellcode kann man sich hier [4] anschauen.

Verweise
[1] = https://github.com/xceedsoftware/wpftoolkit/wiki/AvalonDock
[2] = http://materialdesigninxaml.net/
[3] = https://material.io/resources/icons
[4] = https://github.com/RolandKoenig/SeeingSharp2/tree/master/Tools/SeeingSharp.ModelViewer


Schlagwörter: ,
Copyright 2019. All rights reserved.

Verfasst 2. Mai 2020 von Roland in category "Seeing# 2

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.