Difference between revisions of "Custom View (Client)"
m (#2161 - Added XAML Category) |
|||
| Line 12: | Line 12: | ||
* A "FINISHED" property exists on the object; | * A "FINISHED" property exists on the object; | ||
* The command is executed from a content page where the property list is available. | * The command is executed from a content page where the property list is available. | ||
| + | {{UnderConstructionStart}} | ||
| + | |||
| + | {{Attention | Please note that while it is possible to invoke custom views as shown in the example below, nested custom views are not supported. This means only one custom view can be displayed at a time—they cannot be embedded within one another.}} | ||
| + | |||
| + | {{UnderConstructionEnd}} | ||
=== Defining the command === | === Defining the command === | ||
| Line 69: | Line 74: | ||
[[Category:Version 3.8|Custom View (Client)]] | [[Category:Version 3.8|Custom View (Client)]] | ||
[[Category:WinX|Custom View (Client)]] | [[Category:WinX|Custom View (Client)]] | ||
| − | |||
[[Category:XAML|Custom View (Client)]] | [[Category:XAML|Custom View (Client)]] | ||
| + | [[Category:Xamarin|Custom View (Client)]] | ||
Revision as of 11:11, 4 June 2025
The custom view / dialog is a way to display a fully customized view using data contexts (view models) UBIK® clients provide.
Basic concept
Using the new DisplayViewCommand, you can display a dialog (UWP) / page (Xamarin) with the UI defined in a custom named XAML template. Both the template name and the data context to be used in that template should be supplied to the command using the KeyValueList structure.
- TemplateName: Name of the template the client should look for to display in the custom view;
- TemplateDataContext: Data context any binding should work with in the custom view.
- This can be optional, if you don't need any bindings in your custom view;
- The value of this parameter needs to be specified through a binding in most cases. This requires some additional setup when used in combination with KeyValueList, see examples below.
Example
This example demonstrates a simple view where we display some information about a property in a custom view. A close button is also included. We assume:
- A "FINISHED" property exists on the object;
- The command is executed from a content page where the property list is available.
 | Please note that while it is possible to invoke custom views as shown in the example below, nested custom views are not supported. This means only one custom view can be displayed at a time—they cannot be embedded within one another. |
Defining the command
UWP
...
xmlns:controls="using:UBIK.WinX.Controls"
x:Name="SomeRandomButton"
DataContext="{Binding}"
Command="{Binding DisplayViewCommand}">
<Button.CommandParameter>
<controls:KeyValueList>
<controls:KeyValueParameter Key="TemplateName" Value="SomeRandomView" />
<controls:KeyValueParameter Key="TemplateDataContext" Value="{Binding DataContext.Properties.AllItems[FINISHED].Content, ElementName=SomeRandomButton}" />
</controls:KeyValueList>
</Button.CommandParameter>
</Button>
Xamarin
...
xmlns:classes="clr-namespace:UBIK.CPL.Classes;assembly=UBIK.CPL"
x:Name="SomeRandomButton"
BindingContext="{Binding}"
Command="{Binding DisplayViewCommand}">
<Button.CommandParameter>
<classes:KeyValueList>
<classes:KeyValueParameter Key="TemplateName" Value="SomeRandomView" />
<classes:KeyValueParameter Key="TemplateDataContext" Value="{Binding BindingContext.Properties.AllItems[FINISHED].Content, Source={x:Reference SomeRandomButton}}" />
</classes:KeyValueList>
</Button.CommandParameter>
</Button>
In the custom view
For the example code shown above, the following content should be placed inside a custom view named SomeRandomView.xaml (UWP) or SomeRandomView.xamlx (Xamarin).
...
Text="{Binding KeyValueList[TemplateDataContext].Value}" />
<Button
...
Command="{Binding CloseDialogCommand}" />
The data context provided through the command parameter (Properties.AllItems[FINISHED].Content) is of type PropertyItem and is the same as in the UBIKPropertyItem template. You can access it using KeyValueList[TemplateDataContext]. In the example above, the text control displays the value of the supplied property (item).
