Changes
The User Interface of the MAUI/Xamarin Mobile Clients (Android, iOS, Windows) can be fundamentally customized using custom XAML definitions. This customization process is heavily influenced by the [[XAML|XAML Customization Process on the WinX Client]].
= Basics =
== Default XAMLs ==
All default XAML templates that can be customized are available through the Xamarin.UWP Mobile Windows client. You need to go to the app settings and click the "Unpack default XAMLs" button.
== Differences to WinX/UWP ==
* Since it's based on the Xamarin Mobile XAML dialect, you CANNOT use any existing XAML customizings for the WinX/UWP app;
* Namespace definitions must include the corresponding assembly names;
* XAML template files have the extension name of '''xamlx''' instead of '''xaml''';
= Overriding default XAMLs=
On Windows (WinX/UWP), the <code>[App Package Folder]/LocalState/xaml/</code> folder can be accessed by the user and the customized XAML files directly added. An alternative to this on all platforms (including Android, iOS, etc.) is to use the ''Import Customizing'' button in the app settings to import the templates, styles, images, etc. (file by file, or all files within a zip package). The changes should be reflected in the UI (except the current page) without restarting the app. After directly editing the customizings (Xamarin.UWPMobile Windows), you can also use the "Reload customizing" button without restarting the app.
In the following, we're going to override the default light theme color of the app:
<source lang = "xml">
Mobile(Xamarin):
<!-- UBIKCustomView.xamlx -->
<ContentView...
== Converters==
:''Main Page: [[Converters_In_XamarinConverters_In_Mobile]]''
They are used to convert specific data into some desired output, using custom logic.
=== Customizing Menu Button {{Version/XamarinSince|4.6.0}} ===
For the Xamarin Mobile Client, it is possible to show/hide the '''Menu button''' of the client.<br>
To customize the visibility of the '''Menu button''' you have to edit the default XAML '''Themes''' file.
=== Content filtering ===
For the Xamarin Mobile clients, an "SfDataSourceExt" type is available for filtering list of items using defined expressions.<br />
The following example demonstrates how to filter for child items having certain property values. The filtered list and its count can be displayed in the UI.<br />
<syntaxhighlight lang="xml">
Mobile(Xamarin):
<ContentView
xmlns:controls="clr-namespace:UBIK.CPL.Controls;assembly=UBIK.CPL"
In the default UBIKMenuArea.xamlx (where the search UI is hosted), there are two commands associated with two events. See below.
<syntaxhighlight lang="xml">
Mobile(Xamarin):
<SearchBar ...>
<SearchBar.Behaviors>
<syntaxhighlight lang="xml">
Mobile(Xamarin):
<Style x:Key="HeadlessLayout" TargetType="Layout">
<Setter Property="CompressedLayout.IsHeadless">
=== DataTrigger Issues ===
==== Conflicting Triggers ====
DataTriggers in Xamarin/Maui Mobile function better than the equivalent DataTriggerBehavior in UWP as they automatically handle the opposite case when a Boolean attribute value is set. This means that if a boolean DataTrigger is set, such as IsVisible=True, the False visibility will automatically be set if the Binding/Value condition is not met.
However, this means that stacking multiple DataTriggers on the same attribute can lead to unexpected results. For this reason, it is recommended to use as few DataTriggers as possible.
=== Incorrect glyphs may be shown on buttons ===
When using glyphs on buttons in XamarinMobile, sometimes a different glyph than the expected one will show up when viewing the app on Android.
They only seem to appear incorrectly when used as the Text property of the button (with FontFamily set to UBIKSymbols, such as the UBIKIconButton style.)
<br>
=== Buttons and gesture recognizers ===
In Xamarin Mobile XAML, you can use gesture recognizers on many UI elements such as a Grid to enable the latter to interact with user inputs.
However, we've already made quite a lot of experience that gesture recognizers do not always work on Android and iOS when used on a Button control.
[[Category:Client|Xamarin XAML]]
[[Category:MAUI|Mobile XAML]]
[[Category:Mobile|Mobile XAML]]
[[Category:Pages with broken file links|Xamarin XAML]]
[[Category:Styling|Xamarin XAML]]
[[Category:XAML|Xamarin XAML]]
