Skip to content
Menu
Menu

Knowledge Base

KB110019 | ELVISPAGE VS CANVAS UND HINTERGRUNDGRAFIKEN

KB110019 | ELVISPAGE VS CANVAS UND HINTERGRUNDGRAFIKEN

Produkt: Elvis 3
Version: ab 3.2
Stand: 2015-02-26

Zusammenfassung

Download PDF

Häufig kommt die Frage auf, wie denn nun ein Hintergrundbild in Elvis 3 eingebunden werden kann. Um die Frage zu beantworten muss zunächst der Unterschied zwischen ElvisPage und Canvas geklärt werden, was wir in diesem Dokument somit ebenfalls behandeln.

Die Begriffe

ElvisPage

Die ElvisPage ist die Grundlage jeder Bedienseite. Die ElvisPage legt fest, was in der Visualisierung gezeigt wird. Die Eigenschaften der ElvisPage erreichen Sie durch langsames Heranfahren der Maus von außen an den Seitenrahmen. Wird dieser blau und fett angezeigt, reicht ein Klick und die Eigenschaften der ElvisPage werden angezeigt.

Canvas

Das Canvas liegt innerhalb der ElvisPage und enthält alle Bedienelemente. Klicken Sie in eine Bedienseite hinein, erreichen Sie automatisch die Eigenschaften für das Canvas.

Was bedeutet das für die Projektierung?

In der Projektierung ist also die ElvisPage nur und ausschließlich als Aufnahme für das Canvas und die darin enthaltenen Steuerelemente gedacht. Einstellungen, die die allgemeine Seitengröße betreffen, werden im PageMaster vorgenommen, Hintergrundfarben, die alle Seiten betreffen in den Ressourcen.

Im Canvas aber werden die Steuerelemente abgelegt, Hintergrundgrafiken eingebunden und die Bedienseite mit Bindungen zum Leben erweckt.

In den folgenden Abbildungen sind die Auswirkungen zu erkennen, wenn ein Canvas innerhalb der ElvisPage verschoben bzw. über den Rand der ElvisPage hinaus erweitert wird. In Abbildung 1 werden alle im Projekt erstellten Steuerelemente sichtbar sein. In Abbildung 2 wird innerhalb der Bedienstation ein nicht gefüllter Rand (weiß) an der linken und oberen Seite entstehen. Der zu bedienende Teil wird abgeschnitten. Der ColorSelector und der Button Licht 4 werden nicht vollständig angezeigt, der Slider im unteren Bereich wird auf der Bedienseite gar nicht angezeigt.

ElvisPageCanvasOverlap

Abbildung 1 | ElvisPage und Canvas liegen übereinander, in der Laufzeit sind alle Controls sichtbar

ElvisPageCanvasShifted

Abbildung 2 | ElvisPage und Canvas liegen ebenfalls übereinander, das Canvas wird aber nur im Bereich der ElvisPage zur Laufzeit sichtbar

Vermeiden Sie, das Canvas außerhalb der ElvisPage zu positionieren! Im Normalfall bleibt der Bereich außerhalb der ElvisPage für den Benutzer unsichtbar und nicht bedienbar.

Hintergrundgrafiken in eine Bedienseite einfügen

Grundlage

Zur Verwendung von Grafiken müssen diese zunächst einmal in Elvis importiert werden. Das ist über die ClientLib oder die Ressourcen im jeweiligen Client Projekt zu machen. Die Ablage in der ClientLib lässt die Nutzung in allen Client Projekten der Projekt Mappe zu, die Ablage im Client Projekt (Terminal, Elvis Web oder Elvis Mobile) nur im jeweiligen Projekt.

Vorbereitung

Importiert wird im Client Projekt oder in die ClientLib jeweils in den Ordner Ressources.

Durch einen Rechtsklick mit der Maus auf den Ordner öffnet sich das Kontextmenü, in dem der Punkt Hinzufügen -> Grafik hinzufügen auszuwählen ist. Die Grafik kann jetzt aus dem Dateisystem ausgewählt werden. In einem weiteren Dialog wird noch die Möglichkeit gegeben, die Ressource für das Projekt umzubenennen und für die Benutzung als Button-Bild vorzubereiten. Nach Bestätigung mit OK steht die Ressource im Projekt zur Verfügung.

Hintergrundgrafik einfügen

Die Grafik wird nun per Drag&Drop in die Bedienseite hinein gezogen. Dabei wird nun unterschieden, welcher Grafiktyp in das Canvas eingebunden wird.

jpg, png und gif Dateien

Werden diese Formate direkt auf das Canvas gezogen, binden sie sich als Hintergrundgrafik des Canvas ein. Die Skalierung erfolgt automatisch und das Bild erscheint in der Größe des Canvas.

xaml Dateien

Werden xaml Grafiken aus den Ressourcen auf die Seite gezogen, wird ein Bild auf das Canvas gelegt. Dieses besteht nun nicht als ausgesprochener Hintergrund. Um dem Problem der Überlagerung von Button zu entgehen, werden Images automatisch mit dem Z-Index -1 eingefügt. Die so eingefügte Grafik kann nun über die Eigenschaften in Größe und Ausrichtung angepasst werden.

Dabei ist darauf zu achten, dass die Grafik in das Canvas eingebunden wird. Anschließend kann die Grafik an die Größe des Canvas angepasst werden. Dies ist am einfachsten über die Eigenschaft  Allgemein -> Strech -> Fill zu erreichen.

Achten Sie dabei unbedingt darauf, die Canvasgröße nicht zu verändern, sondern nur die Größe der hinein gezogenen Grafik.

Support Area

KB110019 | ELVISPAGE VS CANVAS UND HINTERGRUNDGRAFIKEN

Knowledge Base

Hier finden Sie Antworten, Problemlösungen und Beispiele zu unseren Produkten.
KB110019 | ELVISPAGE VS CANVAS UND HINTERGRUNDGRAFIKEN

Case Studies

Erfolgreich im Einsatz: Praxisbeispiele unserer Produkte und Individualentwicklungen.
KB110019 | ELVISPAGE VS CANVAS UND HINTERGRUNDGRAFIKEN

Support

Beschreiben Sie ihr Anliegen über unser Supportformular.
KB110019 | ELVISPAGE VS CANVAS UND HINTERGRUNDGRAFIKEN

Lizenzregistrierung

Registrieren Sie ihre Elvis-Lizenz!

IT GmbH · An der Kaufleite 12 · D-90562 Kalchreuth

KB110019 | ELVISPAGE VS CANVAS UND HINTERGRUNDGRAFIKEN

BÜRO
Telefon: +49 911 5183490
E-Mail: info@it-gmbh.de

VERTRIEB
Telefon: +49 911 5183490
E-Mail: vertrieb@it-gmbh.de

partner-knx

© Copyright 2023. IT GmbH | designed by Appear Online