ie-fix

Creating custom page layouts with absolutely positioned elements

Both, screen and page layouts in FrontFace for Public Displays are created using the XAML markup language (see section "8.18 Creating Custom Templates" of the user manual for details). Most page layouts that are included with FrontFace for Public Displays can adapt themselves dynamically to the actual screen resolution and screen orientation. However, it is also possible to create custom page layouts that are designed specifically for a given screen resolution. The advantage of these layouts is that they are very easy to create. The basic approach for creating page layouts with absolutely positioned containers is based on the "Canvas" element of the XAML language which allows placing other elements by defining their exact position and size in pixels.

In order to create a custom "canvas layout", simply create a new empty text file (UTF-8) and paste in the following code template and save it in the "Page Layouts" folder of your project as ".xaml" file:

<?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>

 

Click here to download this file: CanvasLayoutTemplate.xaml

The layout consists of two major sections: The Border element named "PART_1" represents the background container which can e.g. hold a wallpaper image or video. In the foreground, there is a Canvas element that defines the size of the screen by the "Height" and "Width" attributes (1920x1080 pixels in this example). Inside the Canvas element, you can create as many Border elements as you need which need to be named using the "PART_x" scheme. Every Border element has a "Height" and a "Width" attribute which defines the size of the container and also a "Canvas.Top" and a "Canvas.Left" attribute which is used to define the positon of the container within the Canvas area. The origin (0,0) is the upper left corner of the Canvas element. E.g. if you want to place a 400x500 pixel container in the upper left corner auf the screen, you have to create a border element that has these attributes set: Canvas.Left="0", Canvas.Top="0", Width="400", Height="500"

Please also notice the Viewbox element which wraps the Canvas element. This is required since the layout has a fixed size. Within the Display Assistant the layout needs to be resized to allow assigning content elements such as images, videos, etc. to the containers within the content editor area which is significantly smaller. On the target screen, the Viewbox well have no effect since the screen resolution should match the given size of the Canvas element.

Summary: By using the "canvas layout" approach, you can create custom page layouts for FrontFace for Public Displays where you can easily define the exact position of containers that hold elements like images, video, Websites, plugins, etc. – the only downside of this approach is that fact that every canvas layout is specifically designed for a given screen resolution / orientation and that it cannot adapt itself dynamically to other screen resolution as the included page layouts of FrontFace for Public Displays do.

Last modified: 2017-03-02 10:07
Back to Top ▲