You can modify interface elements (controls) by changing directly manageable colors – a theme color (ThemeColor) and background color (ThemeBackground) – in the Interface Configuration panel or by adjusting elements globally (all controls of the same type at once) in the Global Elements panel or locally (independently per view) in the Layout Management panel. Changing any control parameter locally is treated with a higher priority than when changing it globally.

Layout.Id

Layout management depends on a number of factors. Primarily, a view must be properly registered (using the RegisterViews method from the ModuleBase class) and a relevant view model for the design mode (DesignViewModel) must be created. It is also necessary to assign an appropriate attribute to controls.

The attribute is Layout.Id and it must be unique within the entire POS application. This is essential to make it possible for a control to be manageable independently. If more than one control has the same ID, changing a property for only one of them will affect them all.

Setting default values for manageable properties

Default control values can be set up in several ways, depending on your needs.

1. Directly, as the attributes of a defined control in the xaml

<TextBlock Foreground="Red"/>

The control above will not be manageable, as the Layout.Id attribute has not been defined for it.

You can also combine this with color schemes and font:

<TextBlock Foreground="{DynamicResource ThemeColor}"/>

The control will only be manageable through the change of a color theme (a font color will be changed).

For a control to be manageable globally in the global interface configuration, it needs to be registered using the RegisterControl method from the ModuleBase class.

For a control to be manageable locally per view where it has been used (layout management), the view must be properly registered (using the RegisterViews method) and the control must have the Layout.Id attribute. When using Layout.Id, default control properties should not be set up directly in the control. If a default value, such as Foreground, is defined before determining Layout.Id, the value will be ignored. In turn, defining Foreground after Layout.Id will make the property unmanageable (it will always be overwritten with the directly set-up value).

Attributes should be set up directly only for unmanageable properties, such as ones that are not required for a control to work properly (e.g., Binding).

2. Control’s global style or local style (using x:Key)

<core:View.Resources>
        <Style TargetType="TextBlock" BasedOn="{StaticResource {x:Type TextBlock}}">
            <Setter Property="Foreground" Value="Red"/>
            <Setter Property="Background" Value="{DynamicResource ThemeBackground}"/>
        </Style>
</core:View.Resources>
..
<TextBlock core:Layout.Id="TextBlockLayoutId" />

The example above illustrates global settings for the style of the font and background color of all TextBlock controls used within the current view <core:View>.

<core:View.Resources>
        <Style x:Key="TextBlockStyle" 
               TargetType="TextBlock" BasedOn="{StaticResource {x:Type TextBlock}}">
            <Setter Property="Foreground" Value="Red"/>
            <Setter Property="Background" Value="{DynamicResource ThemeBackground}"/>
        </Style>
</core:View.Resources>
…
<TextBlock Style="{StaticResource TextBlockStyle}" core:Layout.Id="TextBlockLayoutId" />

The modification above presents how to use styles in order to set up only a selected control.

3. Default attribute defined in ModernUI.xaml according to the definition attribute_type x:Key=”[LayoutId].Default.[type_name]”>[default value]</attribute_type>

ModernUI.xml file

<SolidColorBrush x:Key="TextBlockLayoutId.Default.Foreground" Color="Red"/>

View file

<TextBlock core:Layout.Id="TextBlockLayoutId" />

The prerequisite for the example above to work properly is to register ModernUI.xaml resources of the module in the class registering the module (see the chapter New module in How to create views). In the constructor, it is necessary to call:

LayoutService.RegisterResources(typeof(Module));

This approach involves certain limitations, as it does not allow defining dynamic values and grouping recurrent values under a common name. For instance, it is not correc to use the following code:

<SolidColorBrush x:Key="TextBlockLayoutId.Default.Foreground" 
            Color="{DynamicResource ThemeColor}"/>

In this case, the type Color (System.Windows.Media.Color) and ThemeColor (SolidColorBrush) are incompatible!

Using this method is currently not recommended, except when defining default parameters for DataGrid columns.

Supported properties

The tables below list properties manageable in the interface configuration panel for individual controls available in POS application.

Control type

Property	Name
Supported property [name : type]	Property name in the management panel

FrameworkElement

System.Windows.FrameworkElement

Property	Name
Width : double	Width
Height : double	Height
Margin : Thickness	Margin
HorizontalAlignment : HorizontalAlignment	Align Horizontally
VerticalAlignment : VerticalAlignment	Align Vertically
MaxWidth : double	Max. Width
MaxHeight : double	Max. Height
Grid.Position : string	Area

Control

System.Windows.Controls.Control

Property	Name
Background : Brush	Background
Foreground : Brush	Foreground
FontSize : double	Font Size
FontWeight : FontWeight	Font Weight
FontStyle : FontStyle	Font Style
Padding : Thickness	Padding
Grid.Position : string	Area

Grid

System.Windows.Controls.Grid

Property	Name
Background : Brush	Background
Margin : Thickness	Margin
Visibility: Visibility	Visibility
Width: double	Width
Height: double	Height
Grid.Position : string	Area

Comarch.POS.Presentation.Core.Controls.Grid
: System.Windows.Controls.Grid

Property	Name
ColumnDefinition : string	Columns
RowDefinition : string	Rows

Border

System.Windows.Controls.Border

Property	Name
Visibility : Visibility	Visibility
Background : Brush	Background

ScrollViewer

System.Windows.Controls.ScrollViewer
: System.Windows.Controls.Control

Property	Name
VerticalScrollBarVisibility : ScrollBarVisibility	Vertical Scroll Bar
HorizontalSchrollBarVisibility : ScrollBarVisibility	Horizontal Scroll Bar
Width: double	Width
Height : double	Height

Comarch.POS.Presentation.Core.Controls.ScrollViewer
: System.Windows.Controls.ScrollViewer

Property	Name

Separator

System.Windows.Controls.Separator
: System.Windows.FrameworkElement

Property	Name
Background : Brush	Background

TextBlock

System.Windows.Controls.TextBlock
: System.Windows.FrameworkElement

Property	Name
Background : Brush	Background
Foreground : Brush	Foreground
FontSize : double	Font Size
FontWeight : FontWeight	Font Weight
FontStyle : FontStyle	Font Style
Padding : Thickness	Padding
TextAlignment : TextAlignment	Align Text
Visibility : Visibility	Visibility
TextWrapping : TextWrapping	Wrap Text

DoubleColorTextBlock

Comarch.POS.Presentation.Core.Controls.DoubleColorTextBlock
: System.Windows.FrameworkElement

Property	Name
FirstForeground : Brush	Foreground 1
SecondForeground : Brush	Foreground 2
Background : Brush	Background
FontSize : double	Font Size
FontWeight : FontWeight	Font Weight
FontStyle : FontStyle	Font Style
Padding : Thickness	Padding
Visibility : Visibility	Visibility

ErrorTextBlock

Comarch.POS.Presentation.Core.Controls.ErrorTextBlock
: System.Windows.Controls.TextBlock

Property	Name

TextBox

Comarch.WPF.Controls.TextBox
: System.Windows.FrameworkElement,
System.Windows.Controls.Control

Property	Name
BorderThickness : Thickness	Border
BorderBrush : Brush	Border Color
FocusedBorderBrush : Brush	Border Color (Focus)
ErrorColor : Brush	Error Color
HintForeground : Brush	Hint Foreground
Hint: string	Hint Foreground

Comarch.POS.Presentation.Core.Controls.TextBox
: Comarch.WPF.Controls.TextBox

Property	Name

Underline

Comarch.WPF.Controls.Underline
: System.Windows.FrameworkElement

Property	Name
Stroke : Brush	Color
StrokeThickness : Thickness	Thickness

Comarch.POS.Presentation.Core.Controls.Underline
: Comarch.WPF.Controls.Underline

Property	Name

ColumnDefinition

System.Windows.Controls.ColumnDefinition

Property	Name
Width : double	Width

RowDefinition

System.Windows.Controls.RowDefinition

Property	Name
Height : double	Height

DataGridColumn

System.Windows.Controls.DataGridColumn

Property	Name
MaxWidth : double	Max. Width
MinWidth : double	Max. Height
Width : DataGridLength	Width
SortDirection : ListSortDirection	Sort Direction
Visibility : Visibility	Visibility
HorizontalAlignment : HorizontalAlignment	Align Horizontally

DataGridTemplateColumn

System.Windows.Controls.DataGridTemplateColumn
: System.Windows.Controls.DataGridColumn

Property	Name

DataGridTextColumn

System.Windows.Controls.DataGridTextColumn
: System.Windows.Controls.DataGridColumn

Property	Name
FontSize : double	Font Size
Foreground : Brush	Foreground
FontWeight : FontWeight	Font Weight
FontStyle : FontStyle	Font Style

DataGridCell

System.Windows.Controls.DataGridCell

Property	Name
Margin : Thickness	Margin
HorizontalAlignment : HorizontalAlignment	Align Horizontally

DataGridColumnHeader

System.Windows.Controls.Primitives.DataGridColumnHeader

Property	Name
Margin : Thickness	Margin
HorizontalContentAlignment : HorizontalAlignment	Horizontal Content Alignment

DataGrid

Comarch.WPF.Controls.DataGrid
: System.Windows.FrameworkElement,
System.Windows.Controls.Control

Property	Name

Comarch.POS.Presentation.Core.Controls.DataGrid

Property	Name
RowBackground : Brush	Row Background Color
HeaderBackground : Brush	Header Background
ScrollBarWidth : double	Scroll Bar Width
VerticalScrollBarVisibility : Visibility	Vertical Scroll Bar
HorizontalScrollBarVisibility : Visibility	Horizontal Scroll Bar
GroupBy : DataGridGroup	Group By
IsVirtualizingWhenGrouping : bool	Virtualize Records
ScrollUnit : ScrollUnit	Scroll Unit
Grid.Position : string	Area

ItemsContainer

Comarch.POS.Presentation.Core.Controls.ItemsContainer
: System.Windows.FrameworkElement

Property	Name
Orientation : Orientation	Orientation
Padding : Thickness	Padding
Background : Brush	Background
MoreMultiButtonHeight : double	Height
MoreMultiButtonWidth : double	Width
MoreMultiButtonImageHeight : double	Icon Height
MoreMultiButtonImageWidth : double	Icon Width
MoreMultiButtonMargin : Thickness	Margin
MoreMultiButtonImageMargin : Thickness	Icon Margin
MoreMultiButtonFontSize : double	Font Size
MoreMultiButtonIsImageVisible : bool	Show Icon

Expander

Comarch.POS.Presentation.Core.Controls.Expander
: System.Windows.FrameworkElement,
System.Windows.Controls.Control

Property	Name
HeaderBackground : Brush	Header Background
HeaderPadding : Thickness	Header Padding

Image

System.Windows.Controls.Image
: System.Windows.FrameworkElement

Property	Name
Stretch : Stretch	Stretch
StretchDirection : StretchDirection	Stretch Direction

Comarch.WPF.Controls.Image

Property	Name
HorizontalAlignment : HorizontalAlignment	Align Horizontally
HorizontalContentAlignment : HorizontalAlignment	Horizontal Content Alignment
VerticalAlignment : VerticalAlignment	Align Vertically
VerticalContentAlignment : VerticalAlignment	Vertical Content Alignment

Comarch.POS.Presentation.Core.Controls.Image
: System.Windows.FrameworkElement

Property	Name
DefaultImageKey : ImageKey	Default Icon

BundleImage

Comarch.POS.Presentation.Core.Controls.BundleImage

Property	Name
IconForeground : Brush	Color
IconMargin : Thickness	Margin
IconImageKey : ImageKey	Icon
Width : double	Width
Height : double	Height
PopupMaxWidth : double	Max. Width
PopupMinWidth : double	Max. Height

Button

Comarch.POS.Presentation.Core.Controls.Button
: System.Windows.FrameworkElement,
System.Windows.Controls.Control

Other based on Button, such as:

Comarch.POS.Presentation.Core.Controls.AcceptButton
Comarch.POS.Presentation.Core.Controls.CancelButton
Comarch.POS.Presentation.Core.Controls.SelectButton
Comarch.POS.Presentation.Core.Controls.CleanButton
Comarch.POS.Presentation.Core.Controls.TileButton
Comarch.POS.Presentation.Core.Controls.PaymentTypeTile
Comarch.POS.Presentation.Core.Controls.PrintLabelButton
Comarch.POS.Presentation.Core.Controls. ShowItemsVariantsButton

Property	Name
ImageKey : ImageKey	Icon
ImageMargin : Thickness	Icon Margin
ImageWidth : double	Icon Width
ImageHeight : double	Icon Height
ImageHorizontalAlignment : HorizontalAlignment	Align Horizontally
ImageVerticalAlignment : VerticalAlignment	Align Vertically
IsImageVisible : bool	Show Icon
ShortcutMargin : Thickness	Margin
ShortcutWidth : double	Width
ShortcutHeight : double	Height
ShortcutHorizontalAlignment : HorizontalAlignment	Align Horizontally
ShortcutVerticalAlignment : VerticalAlignment	Align Vertically
IsShortcutVisible : bool	Show Hotkey
Shortcut : Shortcut	Hotkey
IsScaledShortcut : bool	Scale Content
ContentMargin : Thickness	Margin
ContentWidth : double	Width
ContentHeight : double	Height
ContentHorizontalAlignment : HorizontalAlignment	Align Horizontally
ContentVerticalAlignment : VerticalAlignment	Align Vertically
ContentVisibility : Visibility	Visibility
IsScaledContent : bool	Scale Content
Orientation : Orientation	Orientation
ItemsContainer.NoWrapButton : bool	Do not aggregate

RadioButton

Comarch.POS.Presentation.Core.Controls.RadioButton
: System.Windows.FrameworkElement,
System.Windows.Controls.Control

Property	Name
CheckedStateBackground : Brush	Selected Element Background
CheckedStateForeground: Brush	Selected Element Foreground
ImageKey : ImageKey	Icon
ImageMargin : Thickness	Icon Margin
ImageWidth : double	Icon Width
ImageHeight : double	Icon Height
ImageHorizontalAlignment : HorizontalAlignment	Align Horizontally
ImageVerticalAlignment : VerticalAlignment	Align Vertically
IsImageVisible : Visibility	Show Icon
ContentMargin : Thickness	Margin
ContentWidth : double	Width
ContentHeight : double	Height
ContentHorizontalAlignment : HorizontalAlignment	Align Horizontally
ContantVerticalAlignment : VerticalAlignment	Align Vertically
ContentVisibility : Visibility	Visibility
IsScaledContent : bool	Scale Content
Orientation : Orientantion	Orientation

FieldControl

Comarch.POS.Presentation.Core.Controls.FieldControl
: System.Windows.FrameworkElement

Property	Name
Orientation : Orientation	Orientation
LabelMargin : Thickness	Margin
LabelWidth : double	Width
LabelHeight : double	Height
LabelFontSize : double	Font Size
LabelFontStyle : FontStyle	Font Style
LabelFontWeight : FontWeight	Font Weight
LabelForeground : Brush	Foreground
LabelForegroundError : Brush	Unsuccessful Validation Color
LabelHorizontalAlignment: HorizontalAlignment	Align Horizontally
LabelVertivalAlignment: VerticalAlignment	Align Vertically
ContentIsRequired : bool	Required

CheckBox

Comarch.POS.Presentation.Core.Controls.CheckBox
: System.Windows.FrameworkElement,
System.Windows.Controls.Control

Property	Name
CheckedStateBackground : Brush	Selected Element Background
CheckedStateForeground: Brush	Selected Element Foreground
DisabledStateBackground : Brush	Disabled Button B/G
DisabledCheckedStateBackground : Brush	Selected Disabled Button B/G
ImageKey : ImageKey	Icon
ImageMargin : Thickness	Icon Margin
ImageWidth : double	Icon Width
ImageHeight : double	Icon Height
ImageHorizontalAlignment : HorizontalAlignment	Align Horizontally
ImageVerticalAlignment : VerticalAlignment	Align Vertically
IsImageVisible : Visibility	Show Icon
ContentMargin : Thickness	Margin
ContentWidth : double	Width
ContentHeight : double	Height
ContentHorizontalAlignment : HorizontalAlignment	Align Horizontally
ContantVerticalAlignment : VerticalAlignment	Align Vertically
ContentVisibility : Visibility	Visibility
IsScaledContent : bool	Scale Content
Orientation : Orientation	Orientation

ComboBox

Comarch.WPF.Controls.ComboBox
: System.Windows.FrameworkElement,
System.Windows.Controls.Control

Property	Name
HorizontalContentAllignment : HorizontalAlignment	Horizontal Content Alignment
PopupBackground : Brush	Background
FocusedBorderBrush : Brush	Border Color (Focus)
ErrorColor : Brush	Error Color

Comarch.POS.Presentation.Core.Controls.ComboBox
: Comarch.WPF.Controls.TextBox

Property	Name

ComboBox2

Comarch.POS.Presentation.Core.Controls.ComboBox2

Property	Name
LabelFontSize : double	Font Size
LabelFontStyle : FontStyle	Font Style
LabelFontWeight : FontWeight	Font Weight
Shortcut : Shortcut	Hotkey
FontSize : double	Font Size
FontWeight : FontWeight	Font Weight
FontStyle : FontStyle	Font Style
Visibility : Visibility	Visibility

AutoCompleteComboBox

Comarch.POS.Presentation.Core.Controls.AutoCompleteComboBox
: System.Windows.Controls.Control

Property	Name
FocusedBorderBrush : Brush	Border Color (Focus)
ErrorColor : Brush	Error Color
HintForeground : Brush	Hint Foreground
Hint: string	Hint

SwitchBox

Comarch.POS.Presentation.Core.Controls.SwitchBox
: System.Windows.Controls.Control

Property	Name
VerticalContentAlignment : VerticalAlignment	Vertical Content Alignment
Margin : Thickness	Margin

SearchBox

Comarch.POS.Presentation.Core.Controls.SearchBox

Property	Name
FontSize : double	Font Size
Foreground : Brush	Background
HintForeground : Brush	Hint Foreground
Margin: Thickness	Margin
Hint: string	Hint

DatePicker

Comarch.POS.Presentation.Core.Controls.DatePicker
: System.Windows.Controls.Control

Property	Name
FocusedBorderBrush : Brush	Border Color (Focus)
ErrorColor : Brush	Error Color
BorderBrush : Brush	Border Color
Visibility : Visibility	Visibility

ButtonSpinner

Comarch.POS.Presentation.Core.Controls.ButtonSpinner

Property	Name
ButtonImageWidth : double	Width
ButtonImageHeight : double	Height
ButtonWidth : double	Button Width
ButtonHeight : double	Button Height

FilterItemsControl

Comarch.POS.Presentation.Core.Controls.FilterItemsControl

Property	Name
MaxFilterItemsPerRow : int	Max. Number of Filters
Visibility : Visibility	Visibility
Grid.Position : string	Area

SearchBoxFilter

Comarch.POS.Presentation.Core.Controls.SearchBoxFilter
: Comarch.POS.Presentation.Core.Controls.ComboBox2

Property	Name
DefaultFilter : string	Default Filter Value

StockTile

Comarch.POS.Presentation.Core.Controls.StockTile

Property	Name
Background : Brush	Background
IsCodeVisible : bool	Show Warehouse Code
WarehouseMargin : Thickness	Margin
WarehouseCodeFontSize : double	Code Font Size
WarehouseNameFontSize : double	Name Font Size
StocksFontSize : double	Font Size
StocksMargin : Thickness	Margin

SetValueNumbersKeyboard

Comarch.WPF.Controls.SetValueNumbersKeyboard

Property	Name
Visibility : Visibility	Visibility

AttributeControl

Comarch.POS.Presentation.Core.Controls.AttributeControl
: System.Windows.Controls.Control

Property	Name

AssistantControl

Comarch.POS.Presentation.Core.Controls.AssistantControl

Property	Name
LabelFontSize : double	Font Size
LabelFontStyle : FontStyle	Font Style
LabelFontWeight : FontWeight	Font Weight
FontSize : double	Font Size
FontWeight : FontWeight	Font Weight
FontStyle : FontStyle	Font Style
Shortcut : Shortcut	Hotkey
Visibility : Visibility	Visibility
Grid.Position : string	Area

DocumentKeypad

Comarch.POS.Presentation.Core.Controls.DocumentKeypad

Property	Name
HeaderFontSize : double
KeypadHeaderColor : Brush