How does the graphic design behind the 2nd VGA customer display in RetailVista POS work?

This document describes the technical setup behind the 2nd VGA customer display, particularly how it is graphically designed. 

The 2nd VGA customer display is built on Windows Presentation Foundation and uses XAML files for the design. XAML files can best be explained as an alternative form of HTML, mainly focused on Win32 (non-browser) screens.

NedFox provides a standard set of XAML files within RetailVista POS, but a graphic agency can also design their own files for a different design.

Through an appSetting rule 'XamlResourcesPath' in the .Config file of RetailVista POS, a different file path can be specified where xaml files can be found. If not specified, the default data directory of RetailVista POS is used, which is: C:\ProgramData\NedFox\RetailVistaPosV2\CustomerUI\

That path can easily be accessed through Windows Explorer by going from RetailVista POS to 'Help', 'About RetailVista POS' and clicking on the 'Data directory' button there. The customer screen is built up of a base customer screen in which widgets are loaded. It is possible to offer both the customer screen itself and the widgets separately. If they are not on disk, they are loaded from the application itself. If a file exists on disk, it takes precedence over the files present internally.

The customer screen is internally named CustomerSalesDisplay.xaml. This page loads different widgets to create a complete customer screen. This page can optionally be loaded from disk, in which case the file Sales.xaml is looked at.

Sales.xaml (Intern CustomerSalesDisplay.xaml)

In the base customer screen sales.Xaml is it very important that in the header a correct assembly reference exists to the assembly NedFox.RetailVista POS.UI.Customer. If it is not present as shown below, RetailVista POS will crash upon startup.

d:DesignHeight="384" d:DesignWidth="512" xmlns:my="clr-namespace:NedFox.RetailVistaPos.UI.Customer.Widgets;assembly=NedFox.RetailVistaPos.UI.Customer">

Closed.xaml (Internal CustomerClosedDisplay.xaml)

This page is loaded when the cash register is closed.

Default widgets

As indicated in the previous paragraph, xaml screens use widgets. This is best explained as modules that are loaded on a page. Currently, the following widgets are used from the default GUI design:

SalesWidget.xaml (sales rules)
WeightWidget.xaml (scale process information)
TransactionDetailsWidget.xaml (transaction total information)
PaymentsWidget.xaml (payments)
SalesPromotionalWidget.xaml - Promotion section (display of promo images)
ClockWidget.xaml (clock on screen)

For each widget, it is checked at startup whether a widget exists on disk. If yes, it is loaded, if not, the internal widget from RetailVista POS itself is used.

Resources.xaml

Styles are defined in Resources.xaml, which various .xaml files refer to via the Style element. In Resources.xaml, for example, fonts and sizes can be adjusted. By placing this file externally on disk, the style of a POS environment can be customized.
Promotion images

In the right column, a promotion image can be placed. Currently, the ..\PosImages\ folder is searched for the file Promo.png.

Background image

The file back.png in the ..\PosImages\ folder is used for the screen background. This reference is located in CustomerDisplayControl.xaml en is an internal RetailVista POS product file that is currently not being modified by another .Xaml product file.

Many example materials can be found as binaries in this QA document.