The User Interface of the Xamarin Clients (Android, iOS, new UWP) 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 ==There are predefined XAML templates available that can be overriddencustomized. If no override customizing is found, the default template templates will be used. Overrides need to be placed in the following folder: <br/><code>[App Installation Path]/LocalState/xaml/</code> (on Windows)
A list of predefined pages (all starting with UBIK) == Default XAMLs ==All default XAML templates that can be overwrittencustomized are available through the Xamarin. The overrides will be loaded during the startup of UWP client. You need to go to the appsettings and click the "Unpack default XAMLs" button.
=== Important =Differences to WinX/UWP ==Make sure to change * Since it's based on the Xamarin 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 to xamlname of '''xxamlx''' instead of '''xaml''';* You can deploy only those resources that you want to achieve customize. (This is also the desired loading and overriding behavior!case for newer versions of WinX/UWP. {{Version/WinXSince|3.6}})
== UBIKThemes.xamlx ==
One of the most significant files is the ''UBIKThemes.xamlx'', as it is the place to override and extend '''global definitions'''. Definitions and changes made here will reflect over all pages and subpages of the app.
== Overriding Styles ==
The steps shown here just work for the Windows (UWP) build of the Xamarin app. The ''LocalState'' folder can be accessed by the user and the customized xaml files directly added. On other systems (Android, iOS, etc.), you can use the ''Import Customizing'' button in the Settings to import the styles and images (file by file, for now). In both cases, the program needs to be restarted after the files have been imported/changed.
In = Overriding default XAMLs=On Windows (WinX/UWP), the following<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, we're going iOS, etc.) is to override use the ''Import Customizing'Foreground Color''' of button in the program:* Download app settings to import the following templates, styles, images, etc. (file: [[File:UBIKThemesby file, or all files within a zip package).zip]] * Unzip it and place it into The changes should be reflected in the '''xaml''' folder inside UI (except the ''LocalState'' folder:[[Image:setup-themes-filecurrent page) without restarting the app.png|frameless|600px|border]]* Open it with After directly editing the text editor of your choice and add customizings (Xamarin.UWP), you can also use the following definition:"Reload customizing" button without restarting the app.
In the following, we're going to override the default light theme color of the app:* Unpack the default XAMLs;* Pick and deploy the default UBIKThemes.xamlx to the '''xaml''' folder inside the ''LocalState'' folder;* Open it with the text editor of your choice and remove everything within the '''ResouceDictionary''' except <syntaxhighlight lang="xml"code><Color x:Key="UBIKForegroundThemeColorUBIKLightThemeColor">blue</Color></syntaxhighlightcode>;* Save the changes and reload. You should see changes successfully implemented.
* Save {{Attention| For maintainability reasons, it's HIGHLY recommended to deploy only those XAML resources you want to override. For example, if you only want to customize the changes and restart ''UBIK'UBIKChildArea, don't deploy others like the UBIKMenuArea. You If you only want to customize the UBIKChildItem, that's the only content you should see changes successfully implemented:[[Image:ubik-with-blue-foregroundinclude in the UBIKThemes.png|frameless|border]]}}<br>
== Custom Templates ==
Custom templates can be added, just like on the WinX/UWP client. Make sure to include all '''namespace definitions''' (as attributes of the '''ContentView''' tag), otherwise the custom template will not load.
=== Custom Pages ===Custom pages can be added, just like on the WinX client. Make sure Similar to save the ''UBIKThemes.xamlx'' file as xaml, custom or overridden templates start with a <code><ContentView></code> tag containing all '''xnamespaces''' and include all . <code><ContentView.Resources></code> takes a '''namespace definitionsResourceDictionary''' (as attributes of and contains resources like references to converters. Finally, <code><ContentView.Content></code> contains the actual layout content (it's best to start with a ''ContentView'Grid''' tag), otherwise the custom page will not load. Again, don't forget to add namespaces that you need!
Similar to the Templates can also be defined in ''UBIKThemes.xamlx'' file. In this case, custom or overridden pages start with a they need to be added into the <code><ContentViewResourceDictionary></code> tag containing all '''namespaces'''. inside the <code><ContentView.Resources></code> takes template as a '''ResourceDictionary''' and contains resources like references to converters<code><DataTemplate></code>. FinallySimilarly, if you want to split up the templates into seperate files, you need to make sure to follow the steps mentioned above and get the content of the <code><DataTemplate></code> into the <code><ContentView.Content></code> contains the actual layout content (it's best to start with a '''Grid''')tag. Again, don't forget to add namespaces that you need!
{{Attention|Templates defined in separate files will override templates defined in the ''UBIKThemes.xamlx''!}} === Bindings in resources ===When using bindings such as [[Xamarin_XAML#Content_filtering|this]] in a resource located in a custom template, it is necessary to place the template in a UBIKContentView. {{Hint|Technically speaking, this is because bindable objects in the ResourceDictionary of a ContentView (the custom template) don't automatically inherit the BindingContext from the container/parent view. UBIKContentView is created to additionally do that.}} <source lang = "xml"><!-- UBIKCustomView.xamlx --><ContentView... xmlns:controls="clr-namespace:UBIK.CPL.Controls;assembly=UBIK.CPL"> <ContentView.Resources> <ResourceDictionary> <controls:SfDataSourceExt... ItemsSource="{Binding Children.Items}" /> </ResourceDictionary> </ContentView.Resources> ...</ContentView> <!-- Container where UBIKCustomView is placed, e.g. UBIKChildArea.xamlx --><ContentView... xmlns:controls="clr-namespace:UBIK.CPL.Controls;assembly=UBIK.CPL"> ... <controls:UBIKContentView Content="{Binding [UBIKCustomView], Source={x:Static services:TemplateService.Instance}}" /></ContentView></source> == Adding Images ===
Images can't be loaded with the default '''Image''' tag, as the image is on different paths on each operating system.
Therefore, there's a custom '''FileImage''' that internally overrides the default ''Image'' with two custom parameters:
* '''FolderName ''' ...The name of the '''folder''' in the '''local folder'''. It just Only the first level inside the ''LocalState'' folder seems to work with just one level.* '''FileName ''' ...The name of the '''file''' in the said folder.
Make sure to implement the proper namespace as well by adding
Furthermore, the ''FileImage'' tag doesn't seem to support most attributes. Therefore place it inside a '''Grid''' to achieve a perfect layout.
<br>
== Differences to WinX Custom Icons ==The biggest difference is that developers don't need Moved to copy the whole '''UBIKThemes.xamlx''' file just to edit a few styles. Just the changes from the default styles (soon to be available on the article [[https://release.augmensys.com/ Release PortalXAML_Tips#Custom_Icons]]) need to be defined in the overwritten file!.<br>
[[Category:Client|Xamarin XAML]][[Category:Pages with broken file links|Xamarin XAML]][[Category:Styling|Xamarin XAML]][[Category:XAML|Xamarin XAML]][[Category:Xamarin|Xamarin XAML]] == Converters==:''Main Page: [[Converters_In_Xamarin]]'' They are used to convert specific data into some desired output, using custom logic. Consider the following example:<br/>A label saying ''There are no children items available!'' should only be visible if the number of children-items is 0. [[Category:Client|Xamarin XAML]][[Category:Pages with broken file links|Xamarin XAML]][[Category:Styling|Xamarin XAML]][[Category:XAML|Xamarin XAML]][[Category:Xamarin|Xamarin XAML]] = Advanced = == Feature related == === Customizing Menu Button {{Version/XamarinSince|4.6.0}} === For the Xamarin 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. * Namespace definitions Search for "'''ShowMenuToolBar'''" in the Themes file.<br>If there isn't any "'''ShowMenuToolBar'''" in your XAML Themes file, you just have to create one, like this: <source lang = "xml"><x:Boolean x:Key="ShowMenuToolBar">true</x:Boolean></source> * Set the value to "true" to show the '''Menu button''' (default value).* Set the value to "false" to hide the '''Menu button'''. <gallery widths="300" heights="500">File:menu_button_show.png|Menu Button shownFile:menu_button_hiddenV3.png|Menu Button hidden</gallery> === Content filtering ===For the Xamarin 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 included displayed in all filesthe UI.<br /><syntaxhighlight lang="xml"><ContentView xmlns:controls="clr-namespace:UBIK.CPL.Controls;assembly=UBIK.CPL" ...> <ContentView.Resources> <ResourceDictionary> <x:String x:Key="Expresssion">Item.Values["MP_YEAR"].Contains("2019")</x:String> <controls:SfDataSourceExt x:Key="FilteredList" Expression="{StaticResource Expresssion}" ItemsSource="{Binding Children.Items}" Unloaded="{Binding SkipFiltering}" /> </ResourceDictionary> </ContentView.Resources> <StackLayout Orientation="Vertical"> <Label Text="{Binding DisplayItemsCount, Source={StaticResource FilteredList}}" /> <controls:SfListViewExt ItemsSource="{Binding DisplayItems, Source={StaticResource FilteredList}}" /> </StackLayout></ContentView></syntaxhighlight> ==== Notes on using bindings in ResourceDictionary ====In the example shown above, you can see <code>{Binding Children.Items}</code> is used. For this to work, the SfDataSourceExt control inside the ResourceDictionary must inherit the binding data context properly.* Because In this case, that data context comes from where this template (UBIKChildArea.xamlx) is used, namely the same styles UBIKContentArea.xamlx;* When referencing this template in a ContentView control, the binding data context is '''NOT''' automatically inherited by the controls inside the ResourceDictioinary;* That's why we use a UBIKContentView control instead. You can find its example usage in the default UBIKContentArea.xamlx template. === Search ===In the default UBIKMenuArea.xamlx (where the search UI is hosted), there are two commands associated with two events. See below.<syntaxhighlight lang="xml"><SearchBar ...> <SearchBar.Behaviors> <behaviors:EventToCommandBehavior Command="{Binding FreeTextSearchCommand}" CommandParameter="{Binding Path=Text, Source={x:Reference SearchField}}" EventName="SearchButtonPressed" /> <behaviors:EventToCommandBehavior Command="{Binding DelayedFreeTextSearchCommand}" EventName="TextChanged" /> </SearchBar.Behaviors></SearchBar></syntaxhighlight><br />The one for <code>SearchButtonPressed</code> is responsible for executing searches after the user confirms the input (e.g. pressing {{{keypress|Enter}}} or the search button).<br />The one for <code>TextChanged</code> is responsible for the "search as you type" behavior. Namely it triggers an automatic search shortly (half second) after the user stops changing the text in the search bar. It can be turned off by simply removing that particular behavior. === DisplayViewCommand ===This command can be used to [[Custom_View_(Client)|display custom views]]. [[Category:Client|Xamarin XAML]][[Category:Pages with broken file links|Xamarin XAML]][[Category:Styling|Xamarin XAML]][[Category:XAML|Xamarin XAML]][[Category:Xamarin|Xamarin XAML]] == Performance ==To get a good performance in the app UI when using your Xaml customizings, it is recommended to try the following.* Always keep your UI structure simple. Choose the most efficient layouts for the scenarios and avoid unnecessary UI elements. Please refer to [https://docs.microsoft.com/en-us/xamarin/xamarin-forms/deploy-test/performance#choose-the-correct-layout "choose the correct layout"] and [https://docs.microsoft.com/en-us/xamarin/xamarin-forms/deploy-test/performance#reduce-the-visual-tree-size "reduce the visual tree size"];* Turn on different devices [https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/layouts/layout-compression layout compression] on wrapping elements that don't have any visual parameters set (mobile phonesreasons stated in the linked documentation).{{Hint|There is a default "HeadlessLayout" style available in the app you can use on elements such as Grids, PCsStackLayouts, tabletsContentViews, etc. It turns on [[Xamarin_XAML#Layout_compression_examples|layout compression]] on the applied elements in Xamarin.Android (since we find it not worth the effort in Xamarin.iOS).}}{{Attention|If possible, responsive one should always favor designing the UI with less wrapping elements over turning on layout compression on unnecessary ones.}} === General performance tips ===* Reduce number of views per page* Don’t bind things if they could be set static easily* 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.* Use async/await to avoid blocking user interfaces interface.* 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 ===* Choose correct Layout, e.g. no need to add a StackLayout if it only has 1 child.* [https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/layouts/layout-options LayoutOptions].Fill or .FillAndExpand are best choice in most cases. And they are already default, so no need to set.* Autosize of rows and columns in grids should used as few as possible.* RelativeLayout is very expensive. Try to avoid.* In StackLayout, make sure there is only 1 LayoutOptions Expand. === Labels ===* Use [https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/text/label#formatted-text FormattedText] instead of multiple labels.* Use [https://docs.microsoft.com/en-us/dotnet/api/xamarin.forms.linebreakmode?view=xamarin-forms Linebreakmode] NoWrap (which is already the default).* Avoid [https://docs.microsoft.com/en-us/dotnet/api/Xamarin.Forms.Label.VerticalTextAlignment?view=xamarin-forms VerticalTextAlignment]. Anyway, if needed, use VerticalTextAligment instead of VerticalOptions.* Use the "TextTransform" attribute to convert the value of the "Text" attribute to either uppercase or lowercase.<syntaxhighlight lang="xml"><Label TextTransform="Uppercase" Text="{Binding Properties.AllItems[DESCR].DisplayValue}" /></syntaxhighlight > [[Category:Client|Xamarin XAML]][[Category:Pages with broken file links|Xamarin XAML]][[Category:Styling|Xamarin XAML]][[Category:XAML|Xamarin XAML]][[Category:Xamarin|Xamarin XAML]] === Images ===* Provide images in optimized width and size. Provide multiple resolutions for different usage.* Set [https://docs.microsoft.com/en-us/dotnet/api/Xamarin.Forms.Image.IsOpaque?view=xamarin-forms IsOpaque] to true if image is opaque. === Layout compression examples ===<syntaxhighlight lang="xml"><ContentView ControlTemplate="{DynamicResource ChangedSymbol}" Style="{DynamicResource HeadlessLayout}" /></syntaxhighlight>The code above removes one wrapping element added automatically by the ContentView and demonstrates a good reason to use layout compression because it can not be designedavoided otherwise.<syntaxhighlight lang="xml"><Grid Margin="2" Style="{DynamicResource HeadlessLayout}"> <Label Margin="5" Text="{Binding Title}" /></Grid></syntaxhighlight>This example, on the other hand, demonstrates a bad usage of layout compression because it can be easily achieved by better designs such as using only the Label with a merged margin. Sometimes the content inside a compressed layout appears on a wrong z-index level. For eample:<syntaxhighlight lang="xml"><BoxView CornerRadius="14" HeightRequest="28" WidthRequest="28" Color="Red" /><ContentView ControlTemplate="{DynamicResource Badge}" Style="{DynamicResource HeadlessLayout}"> <Label Text="{Binding Title}" /></ContentView ></syntaxhighlight>According to the order of the BoxView and the Label, the latter should appear on top of the former (later ones have higher z-index levels). However, this can be disturbed by layout compression, causing the exact opposite.In this case, you can add a <code>xmlns:android="clr-namespace:Xamarin.Forms.PlatformConfiguration.AndroidSpecific;assembly=Xamarin.Forms.Core"</code> namespace to your Xaml file and manually elevate the Label by specifying <code>android:VisualElement.Elevation="X"</code> on it accordingly (X is the delta of the z-index level you want). === SfListViewExt ===For performance reasons, we created an extended version of the Syncfusion SfListView control and it should be used for all lists in customizings. You need to add a namespace like <code>xmlns:controls="clr-namespace:UBIK.CPL.Controls;assembly=UBIK.CPL"</code> to your Xaml file and use it like <code><controls:SfListViewExt ... /></code>.{{Hint|Technically speaking, SfListViewExt informs item view models when their corresponding item views appear on / disappear from the screen. This way, view models can skip a lot of unnecessary work (on the UI) when their views are not visible. '''If SfListView is used instead, the item views will not reflect content changes until the page is reloaded/refreshed.'''}} It is possible to configure the ListView, that the ScrollPosition is remembered when navigating away from the page, to do so, the property RembemberScrollPosition needs to be set to true. If unset, the value defaults to false and the scroll positions are not remembered. <syntaxhighlight lang="xml"><controls:SfListViewExt RememberScrollPosition="True"/></syntaxhighlight> When using multiple Lists on one page (e.g. in a TabbedView), it is necessary to set the AutomationId property uniquely for each list on the page, to support the remembering of the ScrollPosition. = Known issues = === Headlesslayout style in custom UBIKThemes causing problems === In our default '''UBIKThemes''', we are currently using this style for a headless layout: <syntaxhighlight lang="xml"><Style x:Key="HeadlessLayout" TargetType="Layout"> <Setter Property="CompressedLayout.IsHeadless"> <Setter.Value> <OnPlatform x:TypeArguments="x:Boolean" Android="True" WinPhone="False" iOS="False" /> </Setter.Value> </Setter></Style></syntaxhighlight> <br/>This style is used for better UI performance on Android.Using this style in a custom '''UBIKThemes''' could cause an exception & an app crash.The best case would be not to have it in the custom themes file because it's unnecessary if you don't want to change anything here. '''This issue is only known on tablet devices with Android 14.'''<br><br>=== DataTrigger to set Footer Properties in a ListView === When using a DataTrigger to set the properties of a footer for a ListView, the sequence of the properties inside the DataTrigger might matter in some cases.It seems to occur since Version 4.4 due to a Syncfusion update and could lead to the page not being rendered properly and appearing empty. If you encounter such an issue, please workaround by adding the IsStickyFooter Property Setter on top inside the DataTrigger.Also, new customizings should consider this workaround as a preventive action. <syntaxhighlight lang="xml"><!-- THIS DOESN'T WORK IN CERTAIN CASES --><controls:SfListViewExt ...> <controls:SfListViewExt.Triggers> <DataTrigger TargetType="controls:SfListViewExt" Binding="{Binding Title}" Value="Administration"> <Setter Property="FooterTemplate" Value="{DynamicResource AddLoginFooter}" /> <Setter Property="FooterSize" Value="64" /> <Setter Property="IsStickyFooter" Value="True" /> </DataTrigger> </controls:SfListViewExt.Triggers></controls:SfListViewExt></syntaxhighlight> <br/><syntaxhighlight lang="xml"><!-- THIS WORKS --><controls:SfListViewExt ...> <controls:SfListViewExt.Triggers> <DataTrigger TargetType="controls:SfListViewExt" Binding="{Binding Title}" Value="Administration"> <Setter Property="IsStickyFooter" Value="True" /> <Setter Property="FooterTemplate" Value="{DynamicResource AddLoginFooter}" /> <Setter Property="FooterSize" Value="64" /> </DataTrigger> </controls:SfListViewExt.Triggers></controls:SfListViewExt></syntaxhighlight><br><br>=== Incorrect glyphs may be shown on buttons === When using glyphs on buttons in Xamarin, 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.) If you encounter this issue please workaround by supplying the icon through the FontImageSource property of the button. <syntaxhighlight lang="xml"><Button Command="{Binding BulkOperation.InvokeOnItemsCommand}"> <Button.ImageSource> <FontImageSource FontFamily="{DynamicResource UBIKSymbols}" Glyph="{x:Static resources:UBIKIcons.MobileDelete}" Color="{DynamicResource UBIKDarkThemeColor}" Size="22"/> </Button.ImageSource> <Button.CommandParameter> <classes:KeyValueList> <classes:KeyValueParameter Key="Command" Value="DiscardContentCommand" /> </classes:KeyValueList> </Button.CommandParameter></Button></syntaxhighlight><br><br>=== Buttons and gesture recognizers ===In Xamarin 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.For example, the following Button won't properly invoke the command on said platforms. <syntaxhighlight lang="xml"><!-- THIS DOESN'T WORK!!! --><Button ...> <Button.GestureRecognizers> <TapGestureRecognizer Command="{Binding ReplicateAsDataCommand}" /> </Button.GestureRecognizers></Button></syntaxhighlight> <br/>Therefore, you should always seek alternatives for Buttons.'''If only one command is needed''', use the standard Command property on the Button, e.g. <syntaxhighlight lang="xml"><!-- THIS WORKS --><Button Command="{Binding ReplicateAsDataCommand}" .../></syntaxhighlight> <br/>Or if multiple commands are needed, use Behaviors '''instead''', e.g. <syntaxhighlight lang="xml"><!-- THIS ALSO WORKS --><Button xmlns:behaviors="clr-namespace:UBIK.CPL.Behaviors;assembly=UBIK.CPL" ...> <Button.Behaviors> <behaviors:EventToCommandBehavior Command="{Binding ReplicateAsDataCommand}" EventName="Clicked" /> <behaviors:EventToCommandBehavior Command="{Binding NavigateBackCommand}" EventName="Clicked" /> </Button.Behaviors></Button></syntaxhighlight><br><br>=== No dynamic reloading of Document Viewer ===[[File:PDFViewerFixWiki.JPG]] In a customizing that combines a single-selection list of documents with some kind of viewer (especially UBIKDocumentContentArea), it is generally the case that switching the document causes the document viewer to then appear blank. The technical reason is that the PDFViewer used in the UBIKDocumentContentArea is not reloaded once the document content is reloaded. An easy fix is to apply a DataTrigger that unloads the ContentView when the document content is null, as the ContentView is forced to rerender itself when the trigger condition is no longer met. <syntaxhighlight lang="xml"><!-- Document Viewer --><controls:UBIKContentView x:Name="DoucmentViewer" BindingContext="{Binding SelectedItem, Source={x:Reference DocumentList}}" Content="{Binding [UBIKDocumentContentArea], Source={x:Static services:TemplateService.Instance}}"> <controls:UBIKContentView.Triggers> <DataTrigger TargetType="controls:UBIKContentView" Binding="{Binding SelectedItem.DocumentViewModel.DocumentContent, Source={x:Reference DocumentList}, Converter={StaticResource NullToBool}}" Value="True"> <Setter Property="Content" Value="{x:Null}" /> </DataTrigger> </controls:UBIKContentView.Triggers></controls:UBIKContentView></syntaxhighlight>
[[Category:Client|Xamarin XAML]]
[[Category:Pages with broken file links|Xamarin XAML]]
[[Category:Styling|Xamarin XAML]]
[[Category:XAML|Xamarin XAML]]
[[Category:Xamarin|Xamarin XAML]]