Mobile XAML - Revision history

CWI: /* Styles and Resources */

2026-04-28T14:05:18Z

‎Styles and Resources

CWI: /* XAML Changes And Improvements */

2026-04-28T13:39:02Z

‎XAML Changes And Improvements

CWI: /* Styles and Resources */

2026-04-28T13:08:34Z

‎Styles and Resources

ARU: /* Feature related */

2026-02-17T10:07:10Z

‎Feature related

ARU: /* General performance tips */

2026-02-17T09:32:08Z

‎General performance tips

ARU: /* Feature related */

2026-02-17T09:31:37Z

‎Feature related

ARU: /* Feature related */

2026-02-17T06:54:49Z

‎Feature related

REP: /* XAML Changes And Improvements */

2026-02-10T15:34:30Z

‎XAML Changes And Improvements

REP: /* Styles and Resources */

2026-01-14T10:13:23Z

‎Styles and Resources

REP: /* XAML Changes And Improvements */

2026-01-14T10:12:36Z

‎XAML Changes And Improvements

@@ Line 736: / Line 736: @@
 <OnIdiom x:Key="UBIKAdaptiveSpacing" x:TypeArguments="x:Double" Default="16" Phone="8" /></syntaxhighlight>
 * Regarding corporate colors, there are now additional resources to customize, aside from UBIKAccentColor;
 ** UBIKHighlightColor is a secondary accent color used for highlighting (eg. Multiselect mode or edited Property). {{Version/MobileSince|5.1.0.0}} Transparency has been added to the UBIKHighlightColor.
 ** UBIKGradientColor {{Version/MobileSince|5.1.0.0}} is used in combination with UBIKAccentColor to form a gradient on the Authentication area.
-{{UnderConstructionStart}}
 * As in WinX {{Version/WinXSince|4.0}}, the various possible object status indicators were exported to a template called '''StatusIndicators''' located in UBIKThemes. These are now displayed at the top right of the item template, with a semi-opaque underlay in case the indicators appear over Title/SubTitle text.
 * '''SfTextInputLayout''' was introduced and is used in various locations (Authentication, and properties).
@@ Line 749: / Line 747: @@
 *** However, this will interfere with lists that rely on the SelectionBackground to highlight selection. This is solved in various ways throughout the UI, such as the SelectedIndicator used in UBIKChildItem, or the seperate SelectedItem and SelectedItemTemplate templates used in UBIKEditGuid.
+[[Category:Client|Xamarin XAML]]
+[[Category:Mobile|Mobile XAML]]
+[[Category:Pages with broken file links|Xamarin XAML]]
+[[Category:Styling|Xamarin XAML]]
+[[Category:XAML|Xamarin XAML]]
 === Adaptivity ===

@@ Line 738: / Line 738: @@
 {{UnderConstructionStart}}
 * Regarding corporate colors, there are now additional resources to customize, aside from UBIKAccentColor;
-** UBIKHighlightColor is a secondary accent color used for highlighting (eg. Multiselect mode or edited Property). It is also combined with UBIKAccentColor to form a gradient on the Authentication area. {{Version/MobileSince|5.1.0.0}} A new UBIKGradientColor has been added to the resources, which is now replacing the UBIKHighlightColor used for the gradient on the Authentication area. Additionally, some transparency has been added to the UBIKHighlightColor.
+** UBIKHighlightColor is a secondary accent color used for highlighting (eg. Multiselect mode or edited Property). {{Version/MobileSince|5.1.0.0}} Transparency has been added to the UBIKHighlightColor.
 {{UnderConstructionStart}}
 * As in WinX {{Version/WinXSince|4.0}}, the various possible object status indicators were exported to a template called '''StatusIndicators''' located in UBIKThemes. These are now displayed at the top right of the item template, with a semi-opaque underlay in case the indicators appear over Title/SubTitle text.
@@ Line 748: / Line 749: @@
 *** However, this will interfere with lists that rely on the SelectionBackground to highlight selection. This is solved in various ways throughout the UI, such as the SelectedIndicator used in UBIKChildItem, or the seperate SelectedItem and SelectedItemTemplate templates used in UBIKEditGuid.
-[[Category:Client|Xamarin XAML]]
-[[Category:Mobile|Mobile XAML]]
-[[Category:Pages with broken file links|Xamarin XAML]]
-[[Category:Styling|Xamarin XAML]]
-[[Category:XAML|Xamarin XAML]]
 === Adaptivity ===

@@ Line 736: / Line 736: @@
 <OnIdiom x:Key="UBIKAdaptiveSpacing" x:TypeArguments="x:Double" Default="16" Phone="8" /></syntaxhighlight>
 * Regarding corporate colors, there are now additional resources to customize, aside from UBIKAccentColor;
-** UBIKHighlightColor is a secondary accent color used for highlighting (eg. Multiselect mode or edited Property). It is also combined with UBIKAccentColor to form a gradient on the Authentication area.
+** UBIKHighlightColor is a secondary accent color used for highlighting (eg. Multiselect mode or edited Property). It is also combined with UBIKAccentColor to form a gradient on the Authentication area. {{Version/MobileSince|5.1.0.0}} A new UBIKGradientColor has been added to the resources, which is now replacing the UBIKHighlightColor used for the gradient on the Authentication area. Additionally, some transparency has been added to the UBIKHighlightColor.
 * As in WinX {{Version/WinXSince|4.0}}, the various possible object status indicators were exported to a template called '''StatusIndicators''' located in UBIKThemes. These are now displayed at the top right of the item template, with a semi-opaque underlay in case the indicators appear over Title/SubTitle text.
 * '''SfTextInputLayout''' was introduced and is used in various locations (Authentication, and properties).
@@ Line 746: / Line 748: @@
 *** However, this will interfere with lists that rely on the SelectionBackground to highlight selection. This is solved in various ways throughout the UI, such as the SelectedIndicator used in UBIKChildItem, or the seperate SelectedItem and SelectedItemTemplate templates used in UBIKEditGuid.
 === Adaptivity ===

@@ Line 197: / Line 197: @@
 === DisplayViewCommand ===
 This command can be used to [[Custom_View_(Client)|display custom views]].
 === Flashlight  {{Version/MobileSince|5.1.0}}  ===
@@ Line 240: / Line 238: @@
 |-
 |}
 [[Category:Client|Xamarin XAML]]

@@ Line 261: / Line 261: @@
 * If you do not change the default, don’t set it explicit. For example, [https://docs.microsoft.com/en-us/dotnet/api/Xamarin.Forms.StackLayout.Orientation?view=xamarin-forms Orientation of StackLayout] is “Vertical” by default. No need to set it manually if you don’t want to change it.
 * Transparency is expensive.
 * Do not put ListViews into ScrollViews.
 * To stack elements, create a grid and add them to the same cell one after another. It’s cheaper than RelativeLayout.
 * Use Margins instead of Paddings.
 === Layouts ===

@@ Line 200: / Line 200: @@
 {{UnderConstructionStart}}
-=== Flashlight ===
+=== Flashlight  {{Version/MobileSince|5.1.0}}  ===
 For the Mobile clients, it is possible to control the system flashlight via customizing and switch it on or off.
@@ Line 216: / Line 216: @@
+|
 <syntaxhighlight lang="xml">
-<Switch IsToggled="{Binding AppStatus.SwitchFlashLight, Mode=TwoWay}"/>
+<Switch IsVisible="{Binding AppStatus.IsFlashSupported}"
 </syntaxhighlight>
 ||

← Older revision		Revision as of 06:54, 17 February 2026
Line 198:		Line 198:
	This command can be used to [[Custom_View_(Client)\|display custom views]].		This command can be used to [[Custom_View_(Client)\|display custom views]].

		+	{{UnderConstructionStart}}

		+	=== Flashlight ===
		+	For the Mobile clients, it is possible to control the system flashlight via customizing and switch it on or off.

		+	The available properties can, for example, be bound to a Switch or CheckBox, as demonstrated below. These properties allow you to:
		+	* Determine whether the device supports flashlight functionality (IsFlashSupported)
		+	* Check whether the flashlight is currently turned on or off (IsFlashEnabled)
		+	* Toggle the flashlight on or off via user interaction (SwitchFlashLight)
		+	<br/>
		+	If an attempt is made to enable the flashlight on a device that does not provide flashlight support, no action is performed.

		+	{\| class="wikitable"
		+	! Switch
		+	! controls:CheckBox
		+	\|-
		+	\|
		+	<syntaxhighlight lang="xml">
		+	<Switch IsToggled="{Binding AppStatus.SwitchFlashLight, Mode=TwoWay}"/>
		+	</syntaxhighlight>
		+	\|\|
		+	<syntaxhighlight lang="xml">
		+	<controls:CheckBox
		+	x:Name="PropertyToggle"
		+	CheckSymbol="🔦"
		+	IsVisible="{Binding AppStatus.IsFlashSupported}"
		+	IsChecked="{Binding AppStatus.SwitchFlashLight, Mode=TwoWay}"
		+	Style="{DynamicResource UBIKIconToggleButton}"
		+	SymbolSize="20">
		+	<controls:CheckBox.Triggers>
		+	<DataTrigger
		+	Binding="{Binding AppStatus.IsFlashEnabled}"
		+	TargetType="controls:CheckBox"
		+	Value="True">
		+	<Setter Property="Background" Value="{StaticResource UBIKAccentColor}" />
		+	</DataTrigger>
		+	</controls:CheckBox.Triggers>
		+	</controls:CheckBox>
		+	</syntaxhighlight>
		+	\|-
		+	\|}

		+	{{UnderConstructionEnd}}

		+	[[Category:Client\|Xamarin XAML]]
		+	[[Category:Mobile\|Mobile XAML]]
		+	[[Category:Pages with broken file links\|Xamarin XAML]]
		+	[[Category:Styling\|Xamarin XAML]]
		+	[[Category:XAML\|Xamarin XAML]]

	== Performance ==		== Performance ==

@@ Line 691: / Line 691: @@
 * Regarding corporate colors, there are now additional resources to customize, aside from UBIKAccentColor;
-** '''UBIKGradientColor''' is a brighter version of UBIKAccentColor. This can be achieved easily by adding an alpha prefix to the desired Accent color (eg. "#52ff8800" = 32% opacity of color #ff8800), or defined as a different color.
+** UBIKHighlightColor is a secondary accent color used for highlighting (eg. Multiselect mode or edited Property). It is also combined with UBIKAccentColor to form a gradient on the Authentication area.
 * As in WinX {{Version/WinXSince|4.0}}, the various possible object status indicators were exported to a template called '''StatusIndicators''' located in UBIKThemes. These are now displayed at the top right of the item template, with a semi-opaque underlay in case the indicators appear over Title/SubTitle text.
 * '''SfTextInputLayout''' was introduced and is used in various locations (Authentication, and properties).
 * Default values for size, font, color, etc, were applied to various controls (Picker, Entry etc) for consistency.
 * New '''SfListView''' styles were introduced and the originals moved to the Obsolete section.
-** The listview now has a background color (UBIKMediumElementColor) and child item templates are now responsible for providing their own background color (UBIKBasePageColor that is applied to the Grid style UBIKItemBase). The intention is to provide visual distinction from actual list items and empty list 'space'.
+** The listview now has a background color (UBIKMediumElementColor) and child item templates are now responsible for providing their own background color (UBIKBasePageColor that is applied to the Grid style UBIKItemBase).
 === Adaptivity ===

@@ Line 666: / Line 666: @@
 UBIKSubtleTextColor --> UBIKMediumTextColor
 </syntaxhighlight>
 * Furthermore, effort was made to create 'contrast pairs' throughout the client; for example, UBIKMainThemeContrastColor is defined primarily for texts layered on elements of UBIKMainThemeColor (such as the title bar and text).
 ** The intention here is that this pair can be safely customized with no surprises, that cannot be guaranteed when using non-paired resource. For example, UBIKMainThemeContrastColor  and UBIKBasePageColor are both white in the default customizing, but if UBIKBasePageColor that were to be layered over UBIKMainThemeColor, it would result in a black-on-black issue in a dark theme customizing.
@@ Line 710: / Line 712: @@
 === File Structure ===
 * '''UBIKRootItem''' (formerly UBIKMainItem) was introduced simply so that the Title, Area, and Item are organized together within the default and customizing folders. For compatibility, UBIKMainItem still exists in the default folder, however, be aware that the listview in UBIKRootArea now requests UBIKRootItem as the ItemTemplate by default.
 == Customizing Guides ==