XAML Tips - Revision history

LGE at 14:18, 16 April 2026

2026-04-16T14:18:20Z

LGE: /* FlipView */

2026-01-12T15:06:43Z

‎FlipView

CWI: /* Using Path Data */

2025-09-23T13:00:32Z

‎Using Path Data

CWI: /* Platform and Device-specific UI with OnPlatform and OnIdiom {{Version/MobileSince|5.0}} */

2025-09-23T08:52:57Z

‎Platform and Device-specific UI with OnPlatform and OnIdiom {{Version/MobileSince|5.0}}

CWI at 09:00, 22 September 2025

2025-09-22T09:00:29Z

CWI at 10:28, 18 September 2025

2025-09-18T10:28:25Z

REP: /* Set a Binding as PropertyValue */

2025-09-05T07:48:34Z

‎Set a Binding as PropertyValue

REP: /* Set a Binding as PropertyValue */ Added mobile syntax example

2025-09-05T07:48:04Z

‎Set a Binding as PropertyValue: Added mobile syntax example

REP: /* Set Current DateTime */

2025-09-05T07:45:55Z

‎Set Current DateTime

REP: /* Set Current DateTime */

2025-09-05T07:45:11Z

‎Set Current DateTime

@@ Line 427: / Line 427: @@
 <br />
 <source lang = "xml">
-xmlns:example="using:UBIK.WinX.Controls"
+xmlns:controls="using:UBIK.WinX.Controls"
 ...
 <Button
@@ Line 807: / Line 807: @@
 <br>
-[[Category:Client|XAML Tips]]
-[[Category:Mobile|XAML Tips]]
-[[Category:WinX|XAML Tips]]
-[[Category:XAML|XAML Tips]]
 == TabView ==
@@ Line 906: / Line 906: @@
 </tabs>
-[[Category:Client|XAML Tips]]
-[[Category:Mobile|XAML Tips]]
-[[Category:WinX|XAML Tips]]
-[[Category:XAML|XAML Tips]]
 == Platform and Device-specific UI with OnPlatform and OnIdiom {{Version/MobileSince|5.0}} ==

@@ Line 879: / Line 879: @@
 VirtualizingStackPanel.VirtualizationMode offers two possibilities: Standard & Recycling. In case you are interested, here are their [https://docs.microsoft.com/en-us/dotnet/api/system.windows.controls.virtualizationmode?view=netframework-4.7.2 differences].
 === Auto saving {{Version/WinXSince|4.6}} ===
@@ Line 900: / Line 906: @@
 </tabs>
 == Platform and Device-specific UI with OnPlatform and OnIdiom {{Version/MobileSince|5.0}} ==

@@ Line 792: / Line 792: @@
 ===== Using Path Data =====
 <br>
-The '''Xamarin approach''' shows how to use svg data directly using a Path control.
+The '''Mobile(Xamarin) approach''' shows how to use svg data directly using a Path control.
 The first step is to generate path data for your icon. The easiest way is to download the [https://apps.microsoft.com/detail/9wzdncrdxf41?hl=en-US&gl=US| 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. With an icon selected, the Path Geometry section can be used to generate a path data that can be pasted directly in your xaml as follows:
@@ Line 800: / Line 800: @@
 </source>
-Once you have your Path control, you can customize it as [https://learn.microsoft.com/en-us/previous-versions/xamarin/xamarin-forms/user-interface/shapes/path| documented by Microsoft]. Path data generated using the above method will most likely need a Fill attribute, for example <nowiki>Fill="{StaticResource UBIKAccentColor}"</nowiki>.
+Once you have your Path control, you can customize it as [https://learn.microsoft.com/en-us/previous-versions/xamarin/xamarin-forms/user-interface/shapes/path| documented by Microsoft] (Maui documentation: [https://learn.microsoft.com/en-us/dotnet/maui/user-interface/controls/shapes/path?view=net-maui-9.0| see here]). Path data generated using the above method will most likely need a Fill attribute, for example <nowiki>Fill="{StaticResource UBIKAccentColor}"</nowiki>.
 {{Hint|More complicated icons will have longer and more complicated paths.}}
@@ Line 807: / Line 807: @@
 <br>
+[[Category:Client|XAML Tips]]
+[[Category:Mobile|XAML Tips]]
+[[Category:WinX|XAML Tips]]
+[[Category:XAML|XAML Tips]]
 == TabView ==

@@ Line 902: / Line 902: @@
 == Platform and Device-specific UI with OnPlatform and OnIdiom {{Version/MobileSince|5.0}} ==
 '''OnPlatform''' can be used to define different property values based on the platform. Valid Platform names are:
 * iOS
 * Android
-* WinUI (for MAUI Windows)
+* WinUI (for Mobile Windows)
 * further ones see [https://learn.microsoft.com/en-us/dotnet/maui/platform-integration/customize-ui-appearance?view=net-maui-9.0#customize-ui-appearance-with-a-markup-extension-based-on-the-platform here]
 <br>

@@ Line 132: / Line 132: @@
 <!--</tab>
-<tab name="Xamarin">
+<tab name="Mobile(Xamarin)">
 <source lang = "xml">
 <Button ...
@@ Line 288: / Line 288: @@
 </tab>
-<tab name="Xamarin">
+<tab name="Mobile(Xamarin)">
 <source lang = "xml">
 <Button
@@ Line 318: / Line 318: @@
 * 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.
+**Mobile: 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|developer mode]] if necessary to find out if this is available where you intend to define the list;
@@ Line 339: / Line 339: @@
 </tab>
-<tab name="Xamarin">
+<tab name="Mobile(Xamarin)">
 <source lang = "xml">
 <ContentView
@@ Line 358: / Line 358: @@
 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.
+* The "Filtered" refers to the ListCollectionView (UWP) or SfDataSourceExt  (Mobile) configured above.
 <br />
@@ Line 381: / Line 381: @@
 </tab>
-<tab name="Xamarin">
+<tab name="Mobile(Xamarin)">
 <source lang = "xml">
 <Button
@@ Line 470: / Line 470: @@
 </tab>
-<tab name="Xamarin / Maui">
+<tab name="Mobile">
 <source lang = "xml">
 <Button
@@ Line 528: / Line 528: @@
 </tab>
-<tab name="Xamarin/Maui">
+<tab name="Mobile">
 <source lang="xml">
 <Button
@@ Line 575: / Line 575: @@
 </source>
 </tab>
-<tab name="Xamarin">
+<tab name="Mobile(Xamarin)">
 <source lang = "xml">
    <Button
@@ Line 637: / Line 637: @@
 </tab>
-<tab name="Xamarin">
+<tab name="Mobile(Xamarin)">
 <source lang = "xml">
 <Button ...
@@ Line 669: / Line 669: @@
 </tab>
-<tab name="Xamarin">
+<tab name="Mobile(Xamarin)">
 <source lang = "xml">
 <Label Text="{Binding ObjectByUID[paste-your-uid].Properties.VisibleItems[add-your-property-name].DisplayValue}" />
@@ Line 684: / Line 684: @@
 </tab>
-<tab name="Xamarin">
+<tab name="Mobile(Xamarin)">
 <source lang = "xml">
 <Label Text="{Binding CallingViewModel.ObjectByUID[paste-your-uid].Properties.VisibleItems[add-your-property-name].DisplayValue}" />
@@ Line 711: / Line 711: @@
 | One metaproperty per UI Label || Bind the label text to the metaproperty Description || Database / UBIK Studio || Recommended for UWP, customizings with fewer UI texts, finalized customizings.
 |-
-| One metaproperty delivering a  localization "tag" (such as: "EN" / "DE") || Use something like DataTrigger (Xamarin) to hardcode a different localized text per tag (such as: "eg." / "zb.") || XAML || Recommended for Xamarin, highly customized UIs with many texts, customizings that tend to change often.
+| One metaproperty delivering a  localization "tag" (such as: "EN" / "DE") || Use something like DataTrigger (Mobile) to hardcode a different localized text per tag (such as: "eg." / "zb.") || XAML || Recommended for Mobile, highly customized UIs with many texts, customizings that tend to change often.
 |}
 <br>
@@ Line 747: / Line 747: @@
 </tab>
-<tab name="Xamarin">
+<tab name="Mobile(Xamarin)">
 '''UBIKThemes:'''
 <source lang = "xml">
@@ Line 818: / Line 818: @@
 <tabs>
-<tab name="Xamarin">
+<tab name="Mobile(Xamarin)">
 <source lang = "xml">
 <tabView:SfTabView EnableVirtualization="true">
@@ Line 836: / Line 836: @@
 Adding the classification to a metaclass is enough for UWP.
 </tab>
-<tab name="Xamarin">
+<tab name="Mobile(Xamarin)">
 Xamarin currently requires additional customizing to make use of the TabSelector property. One approach is to add a DataTrigger to the SfTabView found in UBIKContentArea that is triggered by the value of the TabSelector property, as shown below;
 <source lang = "xml">
@@ Line 893: / Line 893: @@
 </tab>
-<tab name="Xamarin">
+<tab name="Mobile(Xamarin)">
 <source lang = "xml">
 <x:String x:Key="AutoSaveDocumentsOnPageClose">true</x:String>
@@ Line 901: / Line 901: @@
-== Platform and Device-specific UI with OnPlatform and OnIdiom ==
+== Platform and Device-specific UI with OnPlatform and OnIdiom {{Version/MobileSince|5.0}} ==
-{{UnderConstructionStart}}
+Although '''OnPlatform''' and '''OnIdiom''' are used in Xamarin, the following wiki article is valid from Maui, as the syntax changed.
-<br>
-Although '''OnPlatform''' and '''OnIdiom''' are used in Xamarin, the following wiki article is valid from MAUI 5.0 (add version flag), as the syntax changed.
 '''OnPlatform''' can be used to define different property values based on the platform. Valid Platform names are:
@@ Line 1,020: / Line 1,018: @@
 {{Attention|Unreliable Support: Behavior may vary when using bindings or complex resources. Although it seems to work with the inline syntax according to our experiences, it is recommended to test these edge cases thoroughly.}}
 [[Category:Client|XAML Tips]]
 [[Category:WinX|XAML Tips]]
 [[Category:XAML|XAML Tips]]

@@ Line 491: / Line 491: @@
 The above code uses the x:Name of the button to specify the viewmodel from which we wish to begin our binding path.<br>
 You do not need to follow this exact syntax, all that is necessary is to provide a connection to the BindingContext of an observable control.
 [[Category:Client|XAML Tips]]

@@ Line 452: / Line 452: @@
 Luckily, there is a simple way to link this Binding to a context. Using the above example as a foundation, adapt the button as shown below:
 <source lang = "xml">
 <Button
@@ Line 466: / Line 468: @@
 </Button>
 </source>
 The above code uses the x:Name of the button to specify the viewmodel from which we wish to begin our binding path.<br>
 You do not need to follow this exact syntax, all that is necessary is to provide a connection to the BindingContext of an observable control.
 ==== Set Current DateTime ====

@@ Line 499: / Line 499: @@
 {{Hint|The DateTime can be set to the desired format by adding a StringFormatConverter to the LiveDateTime binding:<br><nowiki>"{Binding Tag.AppStatus.LiveDateTime, ElementName=SetCurrentDateTimeButton, </nowiki>'''<nowiki>Converter={StaticResource StringFormatConverter}, ConverterParameter={0:yyyy-MM-dd HH:mm}</nowiki>'''<nowiki>}" </nowiki>.}}
 </tab>
 <tab name="Xamarin/Maui">
 <Button
      x:Name="SetCurrentDateTimeButton"
@@ Line 514: / Line 516: @@
      </Button.CommandParameter>
 </Button>
 </tab>
 </tabs>