Changes
Created page with "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 DisplayView..."
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 ===
<tabs>
<tab name="UWP">
<source lang = "xml">
<Button
...
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>
</source>
</tab>
<tab name="Xamarin">
<source lang = "xml">
<Button
...
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, ElementName=SomeButton}" />
</classes:KeyValueList>
</Button.CommandParameters>
</Button>
</source>
</tab>
</tabs>
=== In the custom view ===
<source lang = "xml">
<SomeTextControl
...
Text="{Binding KeyValueList[TemplateDataContext].Value}" />
<Button
...
Command="{Binding CloseDialogCommand}" />
</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[[TemplateDataContext].
In the example above, the text control displays the value of the supplied property (item).
[[Category:Client|Custom View (Client)]]
[[Category:WinX|Custom View (Client)]]
[[Category:Xamarin|Custom View (Client)]]
== 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 ===
<tabs>
<tab name="UWP">
<source lang = "xml">
<Button
...
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>
</source>
</tab>
<tab name="Xamarin">
<source lang = "xml">
<Button
...
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, ElementName=SomeButton}" />
</classes:KeyValueList>
</Button.CommandParameters>
</Button>
</source>
</tab>
</tabs>
=== In the custom view ===
<source lang = "xml">
<SomeTextControl
...
Text="{Binding KeyValueList[TemplateDataContext].Value}" />
<Button
...
Command="{Binding CloseDialogCommand}" />
</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[[TemplateDataContext].
In the example above, the text control displays the value of the supplied property (item).
[[Category:Client|Custom View (Client)]]
[[Category:WinX|Custom View (Client)]]
[[Category:Xamarin|Custom View (Client)]]
