Difference between revisions of "Custom View (Client)"
| Line 8: | Line 8: | ||
** 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. | ** 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: | 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; | * A "FINISHED" property exists on the object; | ||
| Line 20: | Line 20: | ||
... | ... | ||
xmlns:controls="using:UBIK.WinX.Controls" | xmlns:controls="using:UBIK.WinX.Controls" | ||
| − | x:Name=" | + | x:Name="SomeRandomButton" |
DataContext="{Binding}" | DataContext="{Binding}" | ||
Command="{Binding DisplayViewCommand}"> | Command="{Binding DisplayViewCommand}"> | ||
| Line 26: | Line 26: | ||
<controls:KeyValueList> | <controls:KeyValueList> | ||
<controls:KeyValueParameter Key="TemplateName" Value="SomeRandomView" /> | <controls:KeyValueParameter Key="TemplateName" Value="SomeRandomView" /> | ||
| − | <controls:KeyValueParameter Key="TemplateDataContext" Value="{Binding DataContext.Properties.AllItems[FINISHED].Content, ElementName= | + | <controls:KeyValueParameter Key="TemplateDataContext" Value="{Binding DataContext.Properties.AllItems[FINISHED].Content, ElementName=SomeRandomButton}" /> |
</controls:KeyValueList> | </controls:KeyValueList> | ||
</Button.CommandParameters> | </Button.CommandParameters> | ||
| Line 38: | Line 38: | ||
... | ... | ||
xmlns:classes="clr-namespace:UBIK.CPL.Classes;assembly=UBIK.CPL" | xmlns:classes="clr-namespace:UBIK.CPL.Classes;assembly=UBIK.CPL" | ||
| − | x:Name=" | + | x:Name="SomeRandomButton" |
BindingContext="{Binding}" | BindingContext="{Binding}" | ||
Command="{Binding DisplayViewCommand}"> | Command="{Binding DisplayViewCommand}"> | ||
| Line 55: | Line 55: | ||
For the example code shown above, the following content should be placed inside a custom view named SomeRandomView.xaml (UWP) or SomeRandomView.xamlx (Xamarin). | For the example code shown above, the following content should be placed inside a custom view named SomeRandomView.xaml (UWP) or SomeRandomView.xamlx (Xamarin). | ||
<source lang = "xml"> | <source lang = "xml"> | ||
| − | < | + | <SomeTypeOfTextControl |
... | ... | ||
Text="{Binding KeyValueList[TemplateDataContext].Value}" /> | Text="{Binding KeyValueList[TemplateDataContext].Value}" /> | ||
Revision as of 14:38, 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.
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
UWP
<Button
...
xmlns:controls="using:UBIK.WinX.Controls"
x:Name="SomeRandomButton"
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=SomeRandomButton}" />
</controls:KeyValueList>
</Button.CommandParameters>
</Button>
...
xmlns:controls="using:UBIK.WinX.Controls"
x:Name="SomeRandomButton"
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=SomeRandomButton}" />
</controls:KeyValueList>
</Button.CommandParameters>
</Button>
Xamarin
<Button
...
xmlns:classes="clr-namespace:UBIK.CPL.Classes;assembly=UBIK.CPL"
x:Name="SomeRandomButton"
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>
...
xmlns:classes="clr-namespace:UBIK.CPL.Classes;assembly=UBIK.CPL"
x:Name="SomeRandomButton"
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).
<SomeTypeOfTextControl
...
Text="{Binding KeyValueList[TemplateDataContext].Value}" />
<Button
...
Command="{Binding CloseDialogCommand}" />
...
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).
