Contents
The article How to create views discusses the basic steps that need to be completed in order to create the framework of a new view. Also, the article illustrates how to properly register such a still empty view for it to be manageable when working with the application (chapter How to register navigation and layout management views).
Each element (control) marked with a unique LayoutId identifier automatically becomes manageable. In most cases, view management involves manipulating some control properties, such as background or foreground colors, font formatting, margins, width, or height, etc. It has also been described in the previous chapter.
Manageable elements gain an additional feature when they are declared inside one of the containers available in POS application: Grid and ItemsContainer (from the namespace Comarch.POS.Presentation.Core.Controls). This feature is the possibility to determine whether and where an item should be placed within a container.
How to manage elements in an ItemsContainer container
By default, if any controls are added inside an ItemsContainer container, they are displayed in the order they have been declared. The default arrangement of elements in the container (either horizontal or vertical) depends on the Orientation property set for the container (of course, the property may also be manageable). If the container has a unique LayoutId, it will become manageable and will allow the user to manipulate its elements (all elements must also have their own unique LayoutId identifiers). Once the user enters the layout management mode for a view containing this container, they will be able to freely drag and drop any control placed inside the container to change the order of the elements inside the container or remove an element from the container altogether (or add it again).
Elements declared inside an ItemsContainer container can only exist within this container. Hence, the user cannot move a given control to another container. This limitation is lifted by the Grid container.
<StackPanel>
<controls:ItemsContainer core:Layout.Id="ExampleView.ItemsContainer1">
<TextBlock core:Layout.Id="ExampleView.TextBlock1"/>
<Button core:Layout.Id="ExampleView.Button1"/>
</controls:ItemsContainer>
<controls:ItemsContainer core:Layout.Id="ExampleView.ItemsContainer2">
<TextBlock core:Layout.Id="ExampleView.TextBlock2"/>
<Button core:Layout.Id="ExampleView.Button2"/>
</controls:ItemsContainer>
</StackPanel>
The example above presents a view consisting of two manageable containers: ExampleView.ItemsContainer1 and ExampleView.ItemsContainer2. By default, elements declared within these containers will be displayed in the order in which they have been saved.
After entering the layout management mode for this view, you will be able to modify the order of the elements. Also, you will be able to remove one or more elements from the containers or add them there again (if they have been removed). However, you will not be allowed to move, for instance, the ExampleView.TestBlock1 element from ItemsContainer1 to ItemsContainer2. Moving elements between the containers will not be possible.
How to manage elements in a Grid container
Another container allowing you to manipulate its elements is Grid. This container requires defining a grid of columns and rows where elements could be placed. The grid can be determined by default in xaml and may be user-manageable (you may modify the number of columns and rows). By default, no elements added to the grid will be displayed until you drag them to a selected container cell in the layout management mode.
It is possible to change the default presentation of component elements to make it work as in the case of the ItemsContainer container. If the property DefaultShowChildren=true, all elements will be presented in the view by default.
Every element defined in a Grid container can be placed in or removed from its container, similarly as in the case of the ItemsContainer container. Additionally, if a container contains another container (either Grid or ItemsContainer), elements may be placed directly inside the nested container. This makes it possible, for instance, to move controls between different ItemsContainer containers.
<controls:Grid core:Layout.Id="ExampleView.BaseGrid">
<TextBlock core:Layout.Id="ExampleView.TextBlock1"/>
<Button core:Layout.Id="ExampleView.Button1"/>
<TextBlock core:Layout.Id="ExampleView.TextBlock2"/>
<Button core:Layout.Id="ExampleView.Button2"/>
<controls:ItemsContainer core:Layout.Id="ExampleView.ItemsContainer1"/>
<controls:ItemsContainer core:Layout.Id="ExampleView.ItemsContainer2" />
</controls:Grid>
In the example above, all controls have been defined directly within a Grid. Now, when opening such a view, it will be displayed as empty. This is because the Grid, by default, does not present elements. In turn, after opening the layout management mode, you will be able to define the Grid’s columns and rows and drag each of the defined controls into the Grid. Also, it will be possible to move, for instance, the ExampleView.TextBlock1 control directly to the ExampleView.ItemsContainer1 or ExampleView.ItemsContainer2 containers once they are placed inside the Grid.
The default Grid layout can also be defined in xaml using the ColumnDefinition and RowDefinition properties. A desired number of columns or rows can be specified by entering as many values (a specific number, * or Auto) as many columns/rows should be created, separating them with commas.
For instance, to define five columns, of which the first should have the width of 100 and the second should have the automatic width, with the remaining space evenly distributed between the other three columns, the ColumnDefinition property should have the following value: „100,Auto,*,*,*”.
You can also define the default location of elements in a relevant Grid cell using the Grid.Position property. Its value is defined with the use of four numbers separated with commas, which respectively denote: row number (from 0), column number (from 0), number of rows (at least 1), and number of columns to be occupied by the control.
<controls:Grid core:Layout.Id="ExampleView.BaseGrid" DefaultShowChildren="True">
<controls:Grid.Style>
<Style TargetType="controls:Grid" BasedOn="{StaticResource {x:Type controls:Grid}}">
<Setter Property="ColumnDefinition" Value="*,*,*" />
<Setter Property="RowDefinition" Value="*,*,*" />
</Style>
</controls:Grid.Style>
<TextBlock core:Layout.Id="ExampleView.TextBlock1" Text="Hello">
<TextBlock.Style>
<Style TargetType="TextBlock" BasedOn="{StaticResource {x:Type TextBlock}}">
<Setter Property="controls:Grid.Position" Value="1,1,1,1" />
</Style>
</TextBlock.Style>
</TextBlock>
</controls:Grid>
Now, the view will consist of the Grid with the default presentation of elements activated, composed of three columns of the same width (defined dynamically depending on the view’s height and width) and three rows of the same height (define dynamically as in the case of width). The container is composed of a single TextBlock element whose default location inside the container has been set as the center cell.