XAML Tips

Attachable behaviors

It's quite often that you need to attach behaviors to certain XAML elements. For example, on a Grid, you want to attach a behavior which executes a command upon a Tapped event, or you want to execute a command when a certain property on a UBIK object changes.

Notice that in the following examples, "Interactivity" and "Core" are both namespaces and you have to make sure that they are defined at the root of your XAMLs:

Event Triggered

With an EventTriggerBehavior, you can react on changes/events of UI Elements:

Data Triggered

If you want to react on changes of the underlying data (ViewModel), you can use DataTriggerBehavior instead. The following example, when used in the UBIKSplashArea template, automatically navigates to the root objects once the login process is finished and the user was successfully authenticated:

Content creation

Child item creation

To directly create an object on a child of the current object, you can define a Button as follows. The method "Item.IsTypeCreationAllowed" used in the expression gets the uid of the type that should be created below a child, if a child does not allow the creation of that type underneath it, the child will be hidden in the selection dialog. To actually create the object, the "CreateChildItemCommand" needs to be passed a KeyValueList with two parameters: The Parent-key is the UID or the ContentViewModel of the child underneath the object should be created, the Type-key is the type of object which should be created--this should match the uid passed to the "Item.IsTypeCreationAllowed" method.

xmlns:uc="using:UBIK.WinX.Controls"
xmlns:cv="using:UBIK.WinX.UI.CollectionView"

<x:String x:Key="PlantMap">Item.IsTypeCreationAllowed("21fc990a-d064-4bee-8d48-3293351f827a")</x:String>
<cv:ListCollectionView x:Key="PlantMapView" Expression="{StaticResource PlantMap}" ItemsSource="{Binding Children.Items}" />

<AppBarButton>
<AppBarButton.Flyout>
<Flyout Placement="Full">
<ListView ItemsSource="{Binding Source={StaticResource PlantMapView}}">
<ListView.ItemTemplate>
<DataTemplate>
<Button Content="{Binding Header}" Command="{Binding CreateChildItemCommand}" x:Name="CreateButton" Tag="{Binding}">
<Button.CommandParameter>
<uc:KeyValueList>
<uc:KeyValueParameter Key="Parent" Value="6D733909-1742-4110-8619-237849BFE453"/>
<uc:KeyValueParameter Key="Type" Value="21fc990a-d064-4bee-8d48-3293351f827a"/>
</uc:KeyValueList>
</Button.CommandParameter>
</Button>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</Flyout>
</AppBarButton.Flyout>
</AppBarButton>

<x:String x:Key="PlantMap">Item.IsTypeCreationAllowed("21fc990a-d064-4bee-8d48-3293351f827a")</x:String>
<cv:ListCollectionView x:Key="PlantMapView" Expression="{StaticResource PlantMap}" ItemsSource="{Binding Children.Items}" />

<AppBarButton>
<AppBarButton.Flyout>
<Flyout Placement="Full">
<ListView ItemsSource="{Binding Source={StaticResource PlantMapView}}">
<ListView.ItemTemplate>
<DataTemplate>
<Button Content="{Binding Header}" Command="{Binding CreateChildItemCommand}" x:Name="CreateButton" Tag="{Binding}">
<Button.CommandParameter>
<uc:KeyValueList>
<uc:KeyValueParameter Key="Parent" Value="{Binding Tag, ElementName=CreateButton}"/>
<uc:KeyValueParameter Key="Type" Value="21fc990a-d064-4bee-8d48-3293351f827a"/>
</uc:KeyValueList>
</Button.CommandParameter>
</Button>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</Flyout>
</AppBarButton.Flyout>
</AppBarButton>

Additionally, the following optional parameters can be added as well.

CreateOnly (optional, defaults to false): When set to true, the client will not automatically navigate to the created content, rather automatically save and commit it. If set to true, this overrides the following parameters;
AutoNavigate (optional, defaults to true): When set to false, the client will not automatically navigate to the created content;
AutoCommit (optional, defaults to false): When set to true, the change(s) will be saved to the local cache and the database, and then committed to the server.

Creating multiple documents

To upload multiple documents at once, the CreateChildItemsCommand can be used. The list of supported command parameters are similar to those of the CreateChildItemCommand (single item). Except that anything other than AutoNavigate=false and AutoCommit=true do not make sense in multi-creation scenario. Therefore, those parameters are fixed and any received from XAML will be ignored.

Disable FilloutCriteria

To enable/disable the automatic filtering of a query based on the ParentObject, there is the possibility to specify EnableFillOutCriteria--if it is not set, it defaults to false. Additionaly "SkipDialog" can be set to true, to not display a dialog.

Hotspotting

To use a binding in the KeyValueParameter, it has to be applied like in the example provided here: KeyValueList

The hotspotting command is used for hotspotting as well as for annotating, to configure the button for hotspotting, the commandparameter "Mode" should be set to "HotSpotting", for annotating the "Mode" should be "Annotate". The parameter commit is optional, if set to true, the changes get automatically persisted when leaving the editing mode.

Remember scroll positions of list views

Version 3.7 & later

Starting from this version,

The precision of scroll position remembering is improved(by pixel offsets instead of by items);
It also works for other scrollable lists (instead of just for content object lists).

To enable this feature, you should make sure the following.

The SelectionBoundListView is used instead of the standard ListView. Its UBIK^® namespace is UBIK.WinX.Controls;
The SelectionBoundListView's RememberScrollPosition property is not set to "false"; (It's "true" by default.)
The SelectionBoundListView's x:Name property value is unique.

Version 3.6

The UBIK-Client does include a function to remember the position in a list (ListView) when navigating away from it. This function is only available when the list (ListView) has a unique name as a property (x:Name). When browsing back to the previously visited list UBIK scrolls back to the last position. The function does not save scroll positions over different sessions. Implementing the function to remember the scroll position in a ListView one has to consider that the list elements (Children) could depend on a other UI-element. If the list elements do depend on a other UI-elemente, this element has to be created above the ListView in the XAML.

MultiBinding

Very often we want to display some UI elements (e.g. a Grid) depending on whether multiple criteria are met. It's much easier to achieve this by using a MultiBindingBehavior like the following.

The behavior makes sure the container Grid is set to Visibile only if the mass editing mode is not turned on (MassEditViewModel is null) and the context object has child document(s) (Documents.Items.Count is greater than 0. You can combine any number of binding results (MultiBindingItem) using the VisLogicAndConverter (the name should be self explanatory).

Other Commands

InvokeOnItemsCommand

Available on all ListViewModels, this command allows executing a specified command on a collection of list items. It can be used in combination with features such as mass editing and expression based collection filtering. Examples for both combinations are provided below.

The command specified through the "Command" parameter is executed on list items and, therefore, must be available in the list item contexts (view models). If in doubt, the developer mode can be used to inspect if a command is available in a certain context.

Parameter "Command" and "SelectedItemsOnly" are specific to the InvokeOnItemsCommand. What other parameters to define or whether to define them at all depends on the type of command to be executed on the items.

Invoke on selected items

To use a binding in the KeyValueParameter, it has to be applied like in the example provided here: KeyValueList

This example demonstrates how you can use the mass editing feature to select certain objects from the child list and then execute the SetPropertyValueCommand for those selected.

The example code assumes that the child objects have an editable property called "VALUE" and tries to set 50 as their value;
You should insert the following code snippet into the default UBIKChildArea template;
If the parameter "SelectedItemsOnly" is missed or set to "False", the command will be executed on all child items;
To enable selection, click on the "Mass Edit" button below the property list.

UWPXamarin

UWP

Xamarin

Invoke on filtered results

To use a binding in the KeyValueParameter, it has to be applied like in the example provided here: KeyValueList

First, you need to setup a filtered list
- UWP: Setup a ListCollectionView in the Resources section of a UI element (e.g. Grid). This list is only available/visible within that UI element (the Grid in this case).
- Xamarin: Setup a String with a filtering expression & a SfDataSourceExt in the ResourceDictionary of the ContentView. For the Expression property of the SfDataSourceExt refer to the created expression String.

The ItemsSource uses Children.Items. Use the developer mode if necessary to find out if this is available where you intend to define the list;
The example expression filters for any items that don't contain the text "EXAMPLE" in their Title texts. You can filter differently by altering the expression.

UWPXamarin

UWP

Xamarin

<ContentView
xmlns:controls="clr-namespace:UBIK.CPL.Controls;assembly=UBIK.CPL"
...>
<ContentView.Resources>
<ResourceDictionary>
<x:String x:Key="Expresssion">!Item.Title.Contains("EXAMLPLE")</x:String>
<controls:SfDataSourceExt x:Key="Filtered" Expression="{StaticResource Expresssion}" ItemsSource="{Binding Children.Items}" />
</ResourceDictionary>
</ContentView.Resources>
</ContentView>

With the filtered list configured, you can then insert the following code snippet to execute the SetPropertyValueCommand for the filtered result items.

The example code assumes that the child objects have an editable property called "VALUE" and tries to set 50 as their value;
The "Filtered" refers to the ListCollectionView (UWP) or SfDataSourceExt (Xamarin) configured above.

UWPXamarin

UWP

Xamarin

The binding ListViewModel.InvokeOnItemsCommand should be updated to BulkOperation.InvokeOnItemsCommand starting from version 4.3.

Support for old styled commands

Some old commands might not support KeyValueLists as parameters. In that case, just define the parameter value under the "CommandParameter" key, e.g.

<example:KeyValueParameter Key="CommandParameter" Value="some string value for example" />

This single value is then passed as the command parameter instead of the entire KeyValueList.

SetPropertyValueCommand

To use a binding in the KeyValueParameter, it has to be applied like in the example provided here: KeyValueList

This command existed before but was implemented differently. In the newer version(s), it is improved to provide customizers more control over the things that happen during/after the property value changes. The available command parameters are:

PropertyName: the name of the property to set a new value to;
PropertyValue: the value to be set to the above mentioned property;
OnlyForUnvalidated (optional, defaults to false): When set to true, the value will only be set if the property is not yet validated;
AutoSave (optional, defaults to false): When set to true, the change(s) will be saved to the local cache and database;
AutoCommit (optional, defaults to false): When set to true, the change(s) will be committed to the server.

There's no way to commit changes without saving them locally first. Therefore, the "AutoSave" parameter will be ignored when "AutoCommit" is set to true.

Here's an example of the command usage. It tries to set the property called "VALUE" to a double value 50 regardless of its current state and then automatically save and commit the change.

It is advised to provide typed values like <x:Double>50</x:Double>. But for simple types, you can try writing them in the text format like <example:KeyValueParameter Key="PropertyValue" Value="50" /> and UBIK^® will try to find the right type.

SaveAndCommitCommand

With the SaveAndCommitCommand it is possible to save and commit unsaved changes on a ContentViewModel.

ForceCommit CommandParameter (optional, defaults to false): Normally when the App is in Online mode, changes are automatically committed when saved. This is not the case when the App is in Manual mode. Setting the ForceCommit parameter to true makes it possible to commit the changes when saved in Manual mode.
PropertyNameToSave CommandParameter (optional, defaults to null): Delivers the Property Name as String of a specific Property that should be saved. E.g. when called via PropertyViewModel.ResetCommand or PropertyViewModel.DeleteCommand, the PropertyNameToSave parameter is used to only apply the SaveAndCommitCommand on the related PropertyViewModel called from, and not on other unsaved changes on this ContentViewModel.

UWPXamarin

UWP

Xamarin

DisplayViewCommand

This command can be used to display cutom views.

TeachInCommand

With the TeachInCommand you're allowed to set your device's current location ("teach-in", "TeachIn") as the value of the context object's geo property. This command is available in both ContentViewModel and PropertyViewModel.

ContentViewModel.TeachInCommand: If possible, sets the current location of the device as the value of the context object's geo property. Saves and commits the change;
PropertyViewModel.TeachInCommand: If possible, sets the current location of the device as the value of the current property if it's a geo property (not necessarily the geo property). Addtionally supports a boolean command parameter:
- False (default): The change is not automatically saved.
- True: The change is saved.

Make sure you use the correct binding path for your command depending on your current context view model. E.g., if the context view model is already the ContentViewModel then your binding path should simply be TeachInCommand. You can use the developer mode to find out the current view model in a view.

UpdateArbitraryObjectCommand

The "UpdateArbitraryObjectCommand" is responsible for updating an arbitrary object based on a set of provided parameters. The command is accessible in the AppStatusViewModel (as ViewModel.AppStatus).
The available command parameters are:

Uid (Mandatory): UID of the object to be updated;
UpdateChildDepth (Optional): Child depth/level to update (defaults to 1);
UpdateParentDepth (Optional): Parent depth/level to update (defaults to 0);
UpdateIgnoreExpiry (Optional): Ignore update expiry (defaults to false);

Note that if you set the UpdateChildDepth property to "-1" you are also able to update a whole branch with this command.

Here is an example of the command usage:

UWPXamarin

UWP

Xamarin

Access to an arbitrary object

With the ObjectByUID feature it is possible to access any local arbitrary object by its UID and, for example, display a value of it. It can be accessed from ContentViewModel, AuthenticationViewModel, and RootPageViewModel levels.

To display a string of e.g. a property of an arbitrary object from ContentViewModel, AuthenticationViewModel & RootPageViewModel, the following syntax can be used in related XAMLs:

UWPXamarin

UWP

Xamarin

For Property Dialogs the CallingViewModel prefix is needed to access an arbitrary object:

UWPXamarin

UWP

Xamarin

Showing Images and Icons

In UBIK, there are two types of image;

The thumbnail image assigned to a UBIK object, delivered using the {Binding Icon...} binding, in combination with a ByteToImageConverter. Examples can commonly be found on UBIKChildItem templates.
Custom image shown with a specific purpose, such as a company logo or icon on a button/UI element.

Paths as string resources

When using custom images in your UI, it is a good idea not to hardcode path data into your Image control but instead to create a string resource in UBIKThemes that holds the image path, and use this string resource in your Image control. The benefit of the indirect connection between image file and usage is that the "file is in use" issue (sometimes experienced when either manual, or auto-deployment of xamls, tries to change image files when UBIK is running) is avoided this way.

Sample:

UWPXamarin

UWP

UBIKThemes:

<x:String x:Key="MainLogo">ms-appdata:///local/xaml/Images/MainLogo.png</x:String>

Usage:

Xamarin

UBIKThemes:

<x:String x:Key="Logo_Image">IMG_Logo.png</x:String>

Usage:

xmlns:customimage="clr-namespace:UBIK.CPL.Controls;assembly=UBIK.CPL"
...
<customimage:FileImage
HeightRequest="140"
Aspect="AspectFit"
FileName="{StaticResource BorealisLogo_Image}"
FolderName="xaml" />

Icons

UBIK comes equipped with a collection of icons that can be easily used in your customizing. Here is an indepth explanation on usage.

In the case that you require an icon that is not included in our icon font file, there is the possibility to use SVG path data to render your required icon in the UI.

Custom Icons

Here referring to icons which are not included as standard icons un UBIK.

Path data is a collection of points, which combined together form a vector image. Vector images, compared to raster images like a PNG or JPG, are scalable, because they are always rendered from path data, and not from a bitmap, which has to be stretched or squished to fit your defined size.

Described below two approaches. The UWP approach involves adding an SVG icon file to your xaml project and render it using an Image control. The Xamarin approach shows how to use svg data directly using a Path control.

UWPXamarin

UWP

Xamarin

The first step is to generate path data for your icon. The easiest way is to download the Character Map tool from Microsoft. This can be used to browse all installed icon files for your icon of choice. Once selected, use Tools > Xaml / Xamarin Forms to show various useful aspects of the icon. In this case, the Path Icon option can be used to generate a Path control that can be pasted directly in your xaml as follows:

Once you have your Path control, you can customize it as documented by Microsoft. Path data generated using the above method will most likely need a Fill attribute, for example Fill="{StaticResource UBIKAccentColor}".

More complicated icons will have longer and more complicated paths.

FlipView

UI virtualization

When using the FlipView control in your XAML code, it's better to enable UI virtualization. The difference in performance gets more obvious as the number of items in the FlipView increases. Here's how to enable it.

VirtualizingStackPanel.VirtualizationMode offers two possibilities: Standard & Recycling. In case you are interested, here are their differences.

Auto saving

Unsaved changes on the document (e.g. Annotations) are gonna be saved and committed automatically when flipping the page in the FlipView.

Changes are lost when leaving the page without flipping the document first.

If you want to keep the changes when leaving the page by e.g. navigating away without flipping the document first, there is a boolean property called AutoSaveDocumentsOnPageClose (default value: false) which enables this behavior. It can be activated by adding the property to (or editing it in) the custom UBIKThemes as follows:

UWPXamarin

UWP

<x:String x:Key="AutoSaveDocumentsOnPageClose">true</x:String>

Xamarin

<x:String x:Key="AutoSaveDocumentsOnPageClose">true</x:String>

Contents

Attachable behaviors

Event Triggered

Data Triggered

Content creation

Child item creation

Creating multiple documents

Disable FilloutCriteria

Hotspotting

Remember scroll positions of list views

Version 3.7 & later

Version 3.6

MultiBinding

Other Commands

InvokeOnItemsCommand

Invoke on selected items

UWP

Xamarin

Invoke on filtered results

UWP

Xamarin

UWP

Xamarin

Support for old styled commands

SetPropertyValueCommand

SaveAndCommitCommand

UWP

Xamarin

DisplayViewCommand

TeachInCommand

UpdateArbitraryObjectCommand

UWP

Xamarin

Access to an arbitrary object

UWP

Xamarin

UWP

Xamarin

Showing Images and Icons

Paths as string resources

UWP

Xamarin

Icons

Custom Icons

UWP

Xamarin

FlipView

UI virtualization

Auto saving

UWP

Xamarin

UBIK Wiki / Augmensys