Difference between revisions of "Custom View (Client)"
| Line 62: | Line 62: | ||
Command="{Binding CloseDialogCommand}" /> | Command="{Binding CloseDialogCommand}" /> | ||
</source> | </source> | ||
| − | 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 | + | 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). | In the example above, the text control displays the value of the supplied property (item). | ||
Revision as of 13:00, 12 October 2020
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.
Examples
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
UWP
...
xmlns:controls="using:UBIK.WinX.Controls"
x:Name="SomeButton"
DataContext="{Binding}"
Command="{Binding DisplayViewCommand}">
<Button.CommandParameters>
<controls:KeyValueList>
<controls:KeyValueParameter Key="TemplateName" Value="SomeRandomView" />
<controls:KeyValueParameter Key="TemplateDataContext" Value="{Binding DataContext.Properties.AllItems[FINISHED].Content, ElementName=SomeButton}" />
</controls:KeyValueList>
</Button.CommandParameters>
</Button>
Xamarin
...
xmlns:classes="clr-namespace:UBIK.CPL.Classes;assembly=UBIK.CPL"
x:Name="SomeButton"
BindingContext="{Binding}"
Command="{Binding DisplayViewCommand}">
<Button.CommandParameters>
<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.CommandParameters>
</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).
