Difference between revisions of "Custom View (Client)"
m (#2161 - Added XAML Category) |
|||
| (5 intermediate revisions by one other user not shown) | |||
| 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}"> | ||
| − | <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= | + | <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 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}"> | ||
| − | <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 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}" /> | ||
| 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). | ||
[[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: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
<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>
...
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>
...
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}" />
...
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).
