Scrollbars in einer WPF-Anwendung mit XAML verändern

console-example

Einleitung

Einer unserer Kunden hat mit SQLWindows eine .Net-Anwendung erstellt, die unter anderem auch auf Geräten mit „Touch“-Bedienung zum Einsatz kommt. Grundsätzlich, so wurde uns berichtet, funktioniere die Lösung auch wie geplant. Allerdings stellte sich bei der Fingerbedienung heraus, dass insbesondere die Standardbreite des (horizontalen und vertikalen) Rollbalkens eines Grids sehr schmal ist und daher bei der Fingerbedienung Schwierigkeiten beim Umgang mit diesem Bedienelement auftauchen können. Die Frage, die uns gestellt wurde, lautete daher: „Ist es möglich, den (automatisch eingeblendeten) Rollbalken in einem Grid in einer SQLWindows .Net-Anwendung zu verbreitern“. Der Kunde formulierte auch seine Vermutung: „Ist doch eine WPF-Anwendung. Das müsste doch mit XAML gehen, oder?“

SchmaleScrollbar

Lösungsansatz

Die Vermutung unseres Kunden war richtig, aber damit war selbstverständlich noch keine Lösung gefunden. Die Herausforderung bestand in der Umgestaltung des komplexesten Controls, dass Gupta Technologies in SQLWindows ausliefert: dem Grid. Der erste Gedanke war daher, das Grid umzugestalten. Dieser Gedanke wurde aber schnell verworfen, da der XAML-Code für das Grid während der Laufzeit und eben nicht beim Design erstellt wird. Zudem ist das Grid äußerst komplex und eine technische Dokumentation speziell der Umsetzung des Grids in XAML liegt uns leider nicht vor.
Allerdings, so die zweite Überlegung, wird vermutlich der Scrollbar, der im Grid angezeigt wird, wenn der Platz horizontal oder vertikal nicht ausreicht, um den Inhalt anzuzeigen, auf der Basis des Microsoft .Net Scrollbars aufgebaut sein. Sollte es nicht möglich sein, grundsätzlich das Aussehen des Scrollbars für die Touch-Bedienung für die ganze Anwendung durch Hinzufügung des entsprechenden XAML-Codes „umzugestalten“, dann wäre durch diese Vorgehensweise das Problem grundsätzlich für die gesamte Anwendung im Fall der Touch-Bedienung gelöst.

Lösung
Die Lösung des vom Kunden beschriebenen Problems bestand aus zwei Teilschritten:

  1. Entwicklung und Test des entsprechenden XAML-Codes für die Umgestaltung des Scrollbars und
  2. Das korrekte Deployment dieser Datei in der Entwicklungsumgebung

Umgestaltung („Perestroika“)

Die Vorgehensweise bei der Umgestaltung des Scrollbars bestand darin, den dem Gupta-Control zugrundeliegenden Microsoft .Net Control „Scrollbar“ umzugestalten. Damit ist gemeint, dass kein benannter Style — also kein Key-Attribut — definiert wurde, sondern ein Style, der sich auf das Microsoft Scrollbar bezieht (TargetType: {x:Type ScrollBar}). Der Vorteil dieser Vorgehensweise besteht darin, dass die Style-Definition grundsätzlich gilt und der Entwickler daher keine Zuordnung bei den einzelnen Controls im Attribut XAML-Style vornehmen muss.

<Application
xmlns=“http://schemas.microsoft.com/winfx/2006/xaml/presentation“
xmlns:x=“http://schemas.microsoft.com/winfx/2006/xaml“>
<Application.Resources>
<Style x:Key=“{x:Type ScrollBar}“ TargetType=“{x:Type ScrollBar}“>
<Style.Triggers>
<Trigger Property=“Orientation“ Value=“Horizontal“>
<Setter Property=“Width“ Value=“Auto“/>
<Setter Property=“Height“ Value=“40″ />
</Trigger>
<Trigger Property=“Orientation“ Value=“Vertical“>
<Setter Property=“Width“ Value=“40″/>
<Setter Property=“Height“ Value=“Auto“ />
</Trigger>
</Style.Triggers>
</Style>
</Application.Resources>
</Application>

Das Aussehen des Scrollbars des Grids wird in der ganzen Anwendung durch eine Neudefinition des Styles
des (Microsoft .Net) Scrollbars erreicht.

Durch diesen Style wird das Aussehen des Scrollbars — in diesem Beispiel lediglich in Bezug auf
seine Breite — umdefiniert.

Deployment

Der zweite Schritt der Lösung besteht darin, die Datei unter dem richtigen Namen abzuspeichern und an der Stelle abzulegen, wo der .Net Compiler von SQLWindows derartige XAML-Dateien erwartet. Dieser Schritt ist zunächst ein bisschen knifflig, wenn man sich bisher noch nicht mit der XAML-Funktionalität und deren Umsetzung in SQLWindows beschäftigt hat1. Zunächst aber das Einfache: Die Style-Definition des Scrollbars wird unter dem Namen App.Xaml abgespeichert. Die Datei App-xaml2 muss jetzt in ein spezielles Unterverzeichnis der Source Code-Datei gelegt werden.

Das Verzeichnis, in das die Datei App.xaml gelegt werden muss, existiert standardmäßig nicht. Der einfachste Weg, die notwendige Verzeichnisstruktur für die Quellcode-Datei anzulegen, besteht darin, im Hauptcode der SQLWindows-Anwendung ein Top-Level-Window in der Source-Code-Sicht zu markieren und aus dem Kontextmenü unter XAML die Option Edit auszuwählen. Der jetzt erschienene KAXAML-Editor kann sofort beendet werden. Durch den Aufruf von KAXAML im Edit-Modus wurden bereits die notwendigen (Unter-)Verzeichnisse erstellt.

Wenn jetzt beispielsweise mit dem Windows-Explorer in das Verzeichnis gewechselt wird, in der die SQLWindows Quellcode-Datei liegt, dann fällt dort das neue Verzeichnis .xaml auf. Im Verzeichnis unter .xaml liegt wiederum ein Verzeichnis, dessen Name der Name der Quellcode-Datei ist. In diesem Verzeichnis liegt eine Datei, die durch unser Arbeiten mit KAXAML angelegt wurde. Diese Datei sollte sofort gelöscht werden. Danach kann die App.xaml, die die Umgestaltung des Scrollbars enthält, in dieses Verzeichnis kopiert werden.
Das war’s …

Fazit

Innerhalb von kurzer Zeit — um genau zu sein, waren es drei Stunden für Planung, Umsetzung, Test und Dokumentation — konnte der Scrollbar des Grids in einer SQLWindows .Net-Anwendung nach den Anforderungen des Kunden umgestaltet werden. Der entwickelte Lösungsvorschlag beantwortet die Frage des Kunden. Tatsächlich ergeben sich aber in der Praxis weitere Fragen, wie beispielsweise „ich will nur eine .Net-Anwendung haben. Sie soll sich aber unterscheiden, wenn sie auf einem Touch-PC abläuft oder auf einem „normalen“ PC. Geht das auch?“ Selbstverständlich geht das auch, aber es sprengt den Rahmen dieses Papiers. In einem solchen Fall würde mit dynamischen Ressourcen gearbeitet werden, die nur in dem definierten Fall während der Laufzeit dazu gebunden würden. Aber das ist eine andere Frage …

Es könnte sich auch ergeben, dass die Form und die Größe von Pushbuttons in einer Touch-Anwendung angepasst werden müssen. Dieses Problem lässt sich analog zur beschriebenen Vorgehensweise lösen.

1 Die Vorgehensweise wird in dem Manuskript SQLWindows & XAML ausführlich ab Seite 42 beschrieben.
2 In einem produktiven Projekt würde man vermutlich die einzelnen Style-Definitionen in eigenen XAML-Dateien ablegen und diese durch Verwendung von MergeDictionaries in der App.xaml-Datei für die Anwendung zusammen führen.


Consulting zu Webservices mit Team Developer .NET 6.2

einkaufswagen-device-tablet-support-team

Zielsetzung Workshop:

Einrichten von mit dem Team Developer .NET 6.2 erstellten Webservices auf einem Internet Information Server (IIS) 7.5 ohne und mit SSL Zertifizierung.

Der Kunde hatte die Grundlagen zur Erstellung eines Webservices mit dem Team Developer 6.2 bereits in einem vorhergehenden Workshop erlernt.
In diesem Workshop sollte die Installation des Webservices auf einem Rechner mit Windows Server 2008 R2 und einem IIS 7.5 erklärt und nachvollzogen werden. Da für den produktiven Betrieb das SSL-Protokoll als Transportsicherheit verwendet werden soll, wurde neben der Installation eines einfachen ungesicherten Webservices auch die Installation eines SSL-gesicherten Webservices demonstriert. Dabei kamen sowohl selbst signierte Zertifikate zum Einsatz als auch eins von der Firma erstandenes Zertifikat, welches bereits im Exchange Server eingesetzt wurde.

Um den SSL-Webservice von einer mit dem Team Developer Win32 erstellten Anwendung nutzen zu können, sollte die Konsumierung eines SSL-Webservices ebenfalls erklärt und nachvollzogen werden.

Ergebnis:

Die Installation von ungesicherten Webservices verlief problemlos. Die der Installation eines SSL gesicherten Webservices mit dem firmeneigenen Zertifikat zeigte anfangs Fehlermeldungen über fehlende Dienste. Als dieses Zertifikat gegen ein selbst signiertes Zertifikat ersetzt wurde, konnte der SSL-Webservice erfolgreich installiert werden. Es stellte sich heraus, dass das firmeneigene Zertifikat nicht ordnungsgemäß installiert war. Die Deinstallation sowie der folgende Import mit anschließender Speicherung im Zertifikatsspeicher und die Zuweisung dieses Zertifikates an den SSL Webservice brachten keine Probleme mehr hervor.

Die Konsumierung des Webservices mit einer TD Win32-Anwendung zeigte keine Probleme mehr.


Besuchen Sie uns auf der Gupta DevCon in Berlin

social-media-md-consulting-tablet-screen-apple-imac-iphone-md-consulting

Besuchen Sie doch MD Consulting auf der diesjährigen Entwicklerkonferenz von Gupta Technologies am 23. und 24. Oktober in Berlin. MD Consulting wird, wie jedes Jahr, die DevCon als Aussteller begleiten.

Der erste Tag wird ganz unter dem Zeichen der neuen Versionen stehen:

Team Developer Sessions:

  • New GUI features in Team Developer 6.3
  • New Reporting in Team Developer 6.3 and TD Mobile
  • Team Developer 6.3 and new SQLBase 11.7 drivers
  • Prepare your Team Developer code for TD Mobile projects

SQLBase Sessions:

  • SQLBase 12.0 – multi-threading
  • SQLBase 12.0 and TD Mobile
  • New, easy to use database clients
  • Performance Tuning in SQLBase

Am zweiten Tag konzentrieren wir uns auf den TD Mobile:

TD Mobile Sessions:

  • What’s New in TD Mobile 1.1 and TD Mobile 1.2
  • Building Data Driven Apps without Coding (SQL Databases, NoSQL Databases, data operations and data connections)
  • Creating location-aware applications in TD Mobile (GPS, map control)
  • Using native device features (accelerometer, signature capture, orientation system bind, bar code scanning)

Seit fast einem Jahr ist TD Mobile auf dem Markt verfügbar. Zahlreiche Kunden haben sich bereits mit der neuen Entwicklungsumgebung vertraut machen können. Weitere werden sicherlich bald folgen, wenn die Vorzüge des Produkts bekannter werden.
Im folgenden Text wird lediglich die Einstiegsseite einer mobilen Anwendung beschrieben, so wie sie auf der Roadshow von MD Consulting im November 2014 an verschiedenen Orten in Deutschland, Österreich und der Schweiz vorgestellt und erläutert wird.

Die Anwendung wurde mit TD Mobile Version 1.1.1 entwickelt. Sie wird auf einem Webserver bei MD Consulting verschlüsselt bereitgestellt. Die nachfolgende Abbildung zeigt die Startseite. Mit der ersten Seite der Beispielanwendung wird demonstriert, wie  einfach ein „Mashup“ mit TD Mobile implementiert werden kann: Es werden Inhalte aus unterschiedlichen Datenbanken, aus dem eigenen Account von Twitter und (öffentlichen) Webservices auf der Seite zusammengeführt.

meinMDConsulting_Screenshot

Anhand dieser ersten Seite der Anwendung können eine Vielzahl von Funktionen und Technologien, die mit TD Mobile zur Verfügung gestellt werden, erläutert werden.

  • Unter der Überschrift „Sie planen einen Besuch bei MD Consulting “ werden zwei nach einander sichtbar geschaltete Kombinationsfelder angezeigt, mit der die Auswahl eines Standorts und einer Kategorie an diesem Standort (Hotel, usw.) vorgenommen werden kann. Nach Festlegung der Auswahlkriterien wird auf einer weiteren Seite eine Karte mit den Positionen (und weiteren Angaben) zu den ausgewählten Objekten angezeigt. Mit diesem Beispiel soll gezeigt werden, wie einfach geografische Informationen in eine mobile Anwendung eingebunden werden können.
  • Unter der Überschrift „Noch nicht registriert?“ wird zu einer Seite verzweigt, auf der man nach Eingabe seiner E-Mail-Adresse von der Anwendung per E-Mail den Zugangscode zugeschickt bekommt. Dieses ist ein Beispiel für die in TD Mobile integrierte Mail-Funktionalität (SalMail). Die E-Mails werden über einen SMTP-Server an die eingegebene E-Mail-Adresse versendet.
  • Unter der Überschrift „Wetterinformationen“ wird ein öffentlicher Webservice aufgerufen, um die aktuellen Wetterdaten an einem bestimmten Ort – in diesem Fall vom Hamburger Flughafen – zu ermitteln. Anhand dieses Beispiels wird gezeigt, wie einfach WSDL-basierte Webservices in eine TD-Mobile-Anwendung integriert werden können: der Webservice wird aufgerufen und die zurückgegebene XML-Struktur wird „geparst“, um die „Wetterbestandteile“ zu extrahieren.
  • Unter der Überschrift „Suchen Sie nach einem Seminar?“ wird  auf eine andere mobile Anwendung, die ebenfalls mit TD Mobile entwickelt wurde, verzweigt.
  • Unter der Überschrift „Die letzten Tweets von MD Consulting“ werden die letzten drei Tweets, die von MD Consulting veröffentlicht wurden, unter einander angezeigt. Es wird ein REST-basierter Webservice aufgerufen und die zurückgegebene JSON-Struktur wird in die TD-Mobile-Anwendung integriert.
  • Unter der Überschrift „Die neue Homepage“ wird auf die neue Homepage von MD Consulting verzweigt.
  • Zu allerletzt wird unter der Überschrift „Veranstaltungen“ auch noch der Datenbankzugriff

Die Beispielanwendung, von der hier lediglich die erste Seite erläutert wurde, kann wesentlich mehr. Die Funktionalität zeigen wir Ihnen gern bei uns am Stand.

Sie werden von Gupta dafür sogar mit zusätzlichen 5% Rabatt belohnt.

Und, auf diese brandaktuelle Aktion legt MD Consulting noch einen zusätzlichen Rabatt oben drauf!

  1. So werden aus 5% Hersteller-Rabatt => 20% MD-Rabatt für Sie auf alle Gupta Produkte!  (exkl. EDP und GLS)
  2. So werden aus 10% Hersteller-Rabatt => 25% Rabatt für DevCon-Besucher auf alle Gupta Produkte! (exkl. EDP und GLS)
  3. EDP-Aktion: Kaufe 50, erhalte 60! Sie erhalten 20% mehr Seats!

Diese Aktion ist bis 31. Oktober 2014 gültig.

Sie Sind noch nicht zur DevCon angemeldet? Dann melden Sie sich hier an! Wir freuen uns schon jetzt auf die Gespräche, die wir mit Ihnen während der Konferenz führen werden.

Ihre Ansprechpartnerin, Frau Evelyn Ertel, erreichen Sie telefonisch unter (+49) 08122-9740-0 oder einfach per E-Mail an info@md-consulting.de.

PS: Mit unserer neuen Homepage haben wir auch hier unseren Service verbessert. So sehen Sie in unserem Seminarkalender alle anstehenden Seminare, Trainings und Schulungen in einer übersichtlichen Kalenderansicht und können diese leicht mit Ihrer Terminsituation abgleichen. Selbstverständlich können Sie auch gezielt nach unseren Seminaren oder Produkten suchen. Schauen Sie sich um, nie war es so einfach …