Custom View (Client)

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.

Defining the command

UWPXamarin

UWP

<Button
   ...
   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

<Button
   ...
   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).

<SomeTypeOfTextControl
   ...
   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).