ie-fix

Eigene Seiten-Layouts mit absolut positionierten Elementen erstellen

Sowohl Bildschirm- als auch Seiten-Layouts für FrontFace for Public Displays werden mit Hilfe der XAML-Markupsprache definiert (siehe Kapitel "8.18 Erstellung von eigenen Layouts" im Benutzerhandbuch). Die meisten Layouts, die bei FrontFace for Public Displays mitgeliefert werden, können sich automatisch an beliebige Bildschirmauflösungen und Orientierungen adaptieren. Weiterhin ist es aber auch möglich, komplett eigene Layouts zu gestalten, die speziell für eine vorgegebene Auflösung entworfen worden sind. Der Vorteil dieser Layouts ist, dass sie sich sehr einfach erstellen lassen. Grundsätzlich kommt dabei das sog. „Canvas“-Element der XAML-Sprache zum Einsatz, welches eine absolute, pixelgenaue Position von Elementen ermöglicht.

Um ein solches „Canvas-Layout“ zu erstellen, erzeugen Sie einfach eine neue, leere Textdatei (UTF-8) und fügen den folgenden Code darin ein; dann speichern Sie die Datei mit der Dateiendung „.xaml“ im Verzeichnis „Page Layouts“ Ihres Projektes:

<?xml version="1.0" encoding="utf-8"?>
<Grid xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<!-- Background container: -->
<Border x:Name="PART_1" />
<Viewbox>
<!-- Size of the "canvas": -->
<Canvas Width="1920" Height="1080">
<!-- Containers positioned absolutely within the canvas area: -->
<Border x:Name="PART_2" Canvas.Left="100" Canvas.Top="100" Width="500" Height="300" />
<Border x:Name="PART_3" Canvas.Left="700" Canvas.Top="400" Width="400" Height="300" />
<Border x:Name="PART_4" Canvas.Left="1300" Canvas.Top="700" Width="500" Height="300" />
</Canvas>
</Viewbox>
</Grid>

 

Klicken Sie hier, um diese Datei herunterzuladen: CanvasLayoutTemplate.xaml

Das Layout besteht aus zwei Hauptbestandteilen: Zum einen dient das Border-Element mit dem Namen „PART_1“ als Hintergrundcontainer, in welchen später eine Hintergrundgrafik oder ein Video eingefügt werden können. Im Vordergrund befindet sich ein Canvas-Element, welches die Größe des Bildschirms mit Hilfe der „Height“ und „Width“ Attribute definiert (in diesem Beispiel 1920x1080 Pixel). In dem Canvas-Element können Sie dann die benötigte Anzahl an Border-Elementen hinzufügen, die als Container für die eigentlichen Inhalte wie Bilder, Videos, Websites, etc. dienen und nach dem Schema „PART_x“ benannt werden müssen. Jedes Border-Element verfügt über die Attribute „Height“ und „Width“ mit denen die Breite und Höhe in Pixel angegeben wird. Über die Attribute „Canvas.Top“ und „Canvas.Left“ wird die Position der Border-Elemente auf dem Canvas festgelegt. Dabei befindet sich der Ursprung des Koordinatensystems (0,0) in der linken, oberen Ecke des Canvas-Elements. Wenn Sie also z.B. einen 400x500 Pixel großen Container in der oberen, linken Ecke des Bildschirms positionieren möchten, müssen Sie dem Border-Element folgende Attribute zuweisen: Canvas.Left=“0“, Canvas.Top=“0“, Width=“400“, Height=“500“

Beachten Sie auch das Viewbox-Element, welches erforderlich ist, damit das gesamte Layout im Display Assistant bei Bedarf skaliert werden kann. Da der definierte Anzeigebereich in der Regel größer sein dürfte, als der im Display Assistant für die Zuweisung von Inhalten verfügbare Editor-Beriech, ist das Viewbox-Element hier zwingend erforderlich. Bei der Darstellung auf dem Zielbildschirm hat das Element hingegen keine Bedeutung, da der Bildschirm die gleiche Größe wie das Canvas-Element besitzt.

Zusammenfassung: Mit Hilfe von „Canvas-Layouts“ können Sie sehr einfach eigene Seiten-Layouts erstellen, die für eine vordefinierte Bildschirmauflösung/-orientierung vorgesehen sind. So können Sie Bilder, Videos, Webseiten, Plugins und Texte exakt positionieren. Der einzige Nachteil dieser Layouts ist, dass diese immer speziell für eine vorgegebene Zielauflösung erstellt werden müssen und nicht ohne Weiteres mit anderen Bildschirmauflösungen verwendet werden können, was ansonsten bei den meisten Standard-Layouts von FrontFace for Public Displays problemlos möglich ist.

Letzte Änderung: 02.03.2017 10:07
Nach oben ▲