Erweiterte Programmierung


Zeichnungen per Shapes anzuzeigen, ist seitens WPF ein aufwändiger Prozess, weil es Ableitungen von FrameworkElement sind. Der Einsatz von Shapes ist dann empfehlenswert, wenn Sie mit Triggern Ihre Zeichnung dynamisieren möchten. Wenn Zeichnungen nur statisch angezeigt werden sollen, empfehlen wir den Einsatz von leichtgewichtigen Drawings. Drawings werden mittels DrawingBrushes dargestellt. Mehr dazu können Sie in hier nachlesen.

DrawingBrushes wiederum können als WPF-Resource in ResourceDictionaries abgelegt werden. Somit muss eine DrawingBrush nur einmal mit dem XAML-Parser geladen werden und danach ist der Zugriff sehr performant. Mit Blend oder Microsoft Expression Design erstellte Grafiken können Sie auch als Resource bzw. Drawing exportieren und in der iPlus-Entwicklungsumgebung einfügen.

Menüpunkt in Blend: "Extras->Pinselresource erstellen->DrawingBrush-Resource erstellen".
Menüpunkt in Expression Design: "File->Export...->XAML WPF Resource Dictionary".

DrawingBrushes speichern Sie in iPlus als normale XAML-Designs (Kategorie DULayout/Teilansicht) mit dem Kennzeichen "WPF-Resource". Achten Sie darauf, dass das Wurzelelement im XAML-Code die  DrawingBrush ist:

 


Bilder vom Typ JPEG, PNG und BMP speichern Sie in der iPlus-Entwicklungsumgebung als Design der Kategorie Bitmap ab.

Bilder können bei WPF auf zwei unterschiedlichen Arten angezeigt werden:

  1. Mit dem Steuerelement "Image". Verwenden Sie in iPlus die Klasse VBImage, die eine Ableitung von Image ist.
  2. Als ImageBrush in der Fill-Eigenschaft von Shapes oder Background-Property der Border-Klasse.

Images können ebenfalls wie DrawingBrushes als WPF-Resource in ResourceDictionaries abgelegt werden. Die Vorteile sind geringerer Speicherverbrauch und schnellere Darstellung von Bildern.


Drawings und Images werden im Werkzeugfenster unter Images angezeigt, die Sie per "Drag & Drop" auf die Zeichenfläche ziehen können (2) (3):

 

Wechseln Sie in den XAML-Editor. Es wurde folgender Code generiert:

 

Verwendung von DrawingBrush (2)

Im obigen Beispiel wurde "CycloneMot" in der Entwicklungsumgebung als DrawingBrush mit dem Kennzeichen "WPF-Resource" gespeichert. Deswegen wurde die VBBorder-Klasse verwendet und die Background-Property gesetzt, die vom Typ Brush ist. Die Background-Property wird jedoch über die iPlus-Markupextensionklasse "gip.core.layoutengine.VBStaticResource" gesetzt, die eine Ableitung von StaticResource ist.

 

VBStaticResource-Markupextension

Das Besondere an VBStaticResouce ist, dass der Resourcen-Schlüssel (ResourceKey) eine Datenbank-ACUrl ist, die auf einen Datensatz in der ACClassDesign-Tabelle verweist, wo der XAML-Code für eine DrawingBrush oder eine Bitmap gespeichert ist. Nachdem die DrawingBrush oder Bitmap aus der Datenbank geladen wurde, wird das Objekt sofort in die Resource-Dictionary der Anwendung eingetragen. Der Resourcen-Schlüssel, bleibt die Datenbank-ACUrl weil sie eindeutig ist. Beim nächsten Zugriff auf dieselbe Resource wird kein Datenbankzugriff mehr gemacht, weil sie im globalen Resource-Dictionary schon vorhanden ist!

 

Verwendung von Images (3)

Im obigen Beispiel wurde "BGSteel" in der Entwicklungsumgebung als JPEG-Bitmap gespeichert. Deswegen wurde die VBImage-Klasse verwendet (Ableitung von Image) und die Source-Property, die vom Typ ImageSource ist auch per VBStaticResource gesetzt.

 

Verwendung als ImageBrush (1)

Das Beispiel (1) im Bild oben wurde manuell im XAML-Editor eingeben, weil es kein Werkzeug im Designer dafür gibt. Die Fill-Eigenschaft wird durch die Dekalaration einer ImageBrush gesetzt. Auch hier wird die ImageSource per VBStaticResource geladen.

 

 

Die Businessobjects-Klasse hat ein Design mit dem ACIdentifier "AppResourceDict". Dieses Design ist ein ResourceDictionary die viele diverse Styles beinhaltet. Beim Startvorgang, wird kurz vor der Anzeige des Hauptfensters, diese ResourceDictionary in die globale ResourceDictionary der Anwendung geladen. Dieses "AppResourceDict"-Design können Sie in der Entwicklungsumgebung mit Ihren eigenen Styles erweitern um das "Look and Feel" der gesamten Anwendung anpassen zu können.

 

Styles einer Steuerelement-Klasse global anpassen

Falls Sie den Style von einem Steuerelement global einstellen möchten, dann müssen Sie die "TargetType" und die "BasedOn" Eigenschaft mit der "x:Type"-Markupextension setzen:

<Style TargetType="{x:Type vb:VBTextBlock}" BasedOn="{x:Type vb:VBTextBlock}">
<Style.Setters>
<Setter Property="FontSize" Value="16" />
<Setter Property="FontWeight" Value="Bold" />
<Setter Property="Foreground" Value="#FFFF0000" />
</Style.Setters>
</Style>

 

Einen benannten Style definieren

Falls Sie in Ihren Designs gelegentlich einen bestimmten Style benötigen, dann definieren Sie den Style per "x:Key"-Attribut in der "AppResourceDict" :

<Style x:Key="globalStyleHeadlineText" 
TargetType="{x:Type vb:VBTextBlock}" BasedOn="{x:Type vb:VBTextBlock}">

<Style.Setters>
<Setter Property="FontSize" Value="16" />
<Setter Property="FontWeight" Value="Bold" />
<Setter Property="Foreground" Value="#FFFF0000" />
</Style.Setters>
</Style>

In Ihren Designs referenzieren Sie diesen Style per StaticResource:

 <vb:VBTextBlock VBContent="SelectedOutPointConfig\ACCaption" 
Style="{vb:VBStaticResource globalStyleHeadlineText}" />

 

Optimierung für Touchscreens

Wenn Ihre mit iPlus erstellte Anwendung auch auf Touchscreens bedient werden soll, dann müssen bestimmte Steuerelemente größer dargestellt werden. Umgekehrt, wenn kein Touchscreen verwendet wird, dann wären die vergrößerten Steuerelemente ggf. unpraktisch, weil viel Bildfläche verloren geht. Damit Sie jedoch nicht zwei unterschiedliche Designs programmieren müssen, stellt iPlus in der globalen ResourceDictionary die boolsche Eigenschaft "TouchScreenMode" zur Verfügung. Diese Eigenschaft ist wahr, wenn der Anwender im Loginfenster die Checkbox "Touchscreen" aktiviert hat.

Sie müssen dann lediglich in Ihren Designs per StaticResource auf diesen Wert zugreifen. Im folgenden Beispiel wird dies mit DataTriggern bewerkstelligt:

Im ersten Datatrigger wurde die minimale Zeilenhöhe für Datagrids definiert. Alle untergeordneten Datagrids stellen Ihre Datenzeilen mit mindestens 60pixel dar, damit der Anwender die Zeilen besser mit dem Finger treffen kann.

Im zweiten Datatrigger sollen die Buttons mit 60 pixel Höhe dargestellt werden.