Difference between revisions of "Custom View (Client)"
m (#2161 - Added XAML Category) |
|||
| (2 intermediate revisions by one other user not shown) | |||
| Line 23: | Line 23: | ||
DataContext="{Binding}" | DataContext="{Binding}" | ||
Command="{Binding DisplayViewCommand}"> | Command="{Binding DisplayViewCommand}"> | ||
| − | <Button. | + | <Button.CommandParameter> |
<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=SomeRandomButton}" /> | <controls:KeyValueParameter Key="TemplateDataContext" Value="{Binding DataContext.Properties.AllItems[FINISHED].Content, ElementName=SomeRandomButton}" /> | ||
</controls:KeyValueList> | </controls:KeyValueList> | ||
| − | </Button. | + | </Button.CommandParameter> |
</Button> | </Button> | ||
</source> | </source> | ||
| Line 41: | Line 41: | ||
BindingContext="{Binding}" | BindingContext="{Binding}" | ||
Command="{Binding DisplayViewCommand}"> | Command="{Binding DisplayViewCommand}"> | ||
| − | <Button. | + | <Button.CommandParameter> |
<classes:KeyValueList> | <classes:KeyValueList> | ||
<classes:KeyValueParameter Key="TemplateName" Value="SomeRandomView" /> | <classes:KeyValueParameter Key="TemplateName" Value="SomeRandomView" /> | ||
<classes:KeyValueParameter Key="TemplateDataContext" Value="{Binding BindingContext.Properties.AllItems[FINISHED].Content, Source={x:Reference SomeRandomButton}}" /> | <classes:KeyValueParameter Key="TemplateDataContext" Value="{Binding BindingContext.Properties.AllItems[FINISHED].Content, Source={x:Reference SomeRandomButton}}" /> | ||
</classes:KeyValueList> | </classes:KeyValueList> | ||
| − | </Button. | + | </Button.CommandParameter> |
</Button> | </Button> | ||
</source> | </source> | ||
| Line 66: | Line 66: | ||
[[Category:Client|Custom View (Client)]] | [[Category:Client|Custom View (Client)]] | ||
| + | [[Category:Version 1.1|Custom View (Client)]] | ||
| + | [[Category:Version 3.8|Custom View (Client)]] | ||
[[Category:WinX|Custom View (Client)]] | [[Category:WinX|Custom View (Client)]] | ||
[[Category:Xamarin|Custom View (Client)]] | [[Category:Xamarin|Custom View (Client)]] | ||
| − | [[Category: | + | [[Category:XAML|Custom View (Client)]] |
Latest revision as of 12:41, 4 April 2024
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
...
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).
