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/><span style="font-family: monospace;">'''[App Installation Path]/LocalState/xaml/'''</span> (on Windows)
The overrides will == Default XAMLs ==All default XAML templates that can be loaded during customized are available through the startup of Xamarin.UWP client. You need to go to the appsettings and click the "Unpack default XAMLs" button.
== UBIKThemes.xamlx Differences to WinX/UWP ==One of * Since it's based on the most significant 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 is have the extension name of '''UBIKThemes.xamlx'', as it is the place to override and extend 'instead of ''global definitions'xaml''';* You can deploy only those resources that you want to customize. Definitions and changes made here will reflect over all pages and subpages of (This is also the appcase for newer versions of WinX/UWP. {{Version/WinXSince|3. 6}})
= = Overriding Styles =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.UWP), 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:* Unpack the default XAMLs;* Pick and deploy the default UBIKThemes.xamlx to the '''Foreground Colorxaml''' folder inside the ''LocalState'' folder;* Open it with the text editor of your choice and remove everything within the program'''ResouceDictionary''' except <code><Color x:Key="UBIKLightThemeColor">blue</Color></code>;* Download Save the following file: [[File:UBIKThemeschanges and reload. You should see changes successfully implemented.zip]] * Unzip {{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 UBIKChildArea, don't deploy others like the UBIKMenuArea. If you only want to customize the UBIKChildItem, that's the only content you should include in the UBIKThemes.}}<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. Similar to the ''UBIKThemes.xamlx'' file, custom or overridden templates start with a <code><ContentView></code> tag containing all '''namespaces'''. <code><ContentView.Resources></code> takes a '''ResourceDictionary''' and place contains resources like references to converters. Finally, <code><ContentView.Content></code> contains the actual layout content (it 's best to start with a '''Grid'''). Again, don't forget to add namespaces that you need! Templates can also be defined in ''UBIKThemes.xamlx''. In this case, they need to be added into the <code><ResourceDictionary></code> inside the <code><ContentView.Resources></code> template as a <code><DataTemplate></code>. Similarly, 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> tag. {{Attention|Templates defined in separate files will override templates defined in the ''xamlUBIKThemes.xamlx'' folder.!}} === Bindings in resources ===When using bindings such as [[Image:setup-themes-file.png|frameless|600pxXamarin_XAML#Content_filtering|borderthis]]* Open in a resource located in a custom template, it with is necessary to place the text editor template in a UBIKContentView. {{Hint|Technically speaking, this is because bindable objects in the ResourceDictionary of your choice and add a ContentView (the following definition: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"> <Color xContentView.Resources> <ResourceDictionary> <controls:KeySfDataSourceExt... ItemsSource="UBIKForegroundThemeColor{Binding Children.Items}"/>blue </ColorResourceDictionary> </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>
* Save the changes and restart ''UBIK''. You should see changes successfully implemented:
[[Image:ubik-with-blue-foreground.png|frameless|border]]
== Differences to WinX Adding Images ==Although Images can't be loaded with the customization process default '''Image''' tag, as the image is similar 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'''. Only the first level inside the ''LocalState'' folder seems to work.* '''FileName''' ...The name of the one for '''file''' in the WinX clientsaid folder. Make sure to implement the proper namespace as well by adding<code>xmlns:fimage="clr-namespace:UBIK.CPL.Controls;assembly=UBIK.CPL"</code> into the root item's attributes. Then, the new process image can be loaded using:<br/><code><fimage:FileImage FileName="image.png" FolderName="xaml"/></code> This snipped loads the image called '''image.png''' located in the '''xaml''' folder inside the ''LocalState''. Furthermore, the ''FileImage'' tag doesn't seem to support most attributes. Therefore place it inside a '''Grid''' to achieve a perfect layout.<br> == Custom Icons ==Moved to article [[XAML_Tips#Custom_Icons]].<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 still somewhat differentpossible 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. * 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> * Developers only need Set the value to add "true" to show the ''the actual adaptions'Menu button' '' (default value).* Set the value to "false" to hide the '''Menu button'''UBIKThemes. <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 displayed in the 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.* In this case, that data context comes from where this template (UBIKChildArea.xamlx) is used, namely the 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 [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 (reasons stated in the linked documentation).{{Hint|There is a default "HeadlessLayout" style available in the app you can use on elements such as Grids, StackLayouts, ContentViews, etc. It turns on [[Xamarin_XAML#Layout_compression_examples|layout compression]] on the applied elements in Xamarin.Android (since we find it not having worth the effort in Xamarin.iOS).}}{{Attention|If possible, 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 interface.* Do not put ListViews into ScrollViews.* To stack elements, create a grid and add them to copy the whole filesame cell one after another. It’s cheaper than RelativeLayout.* Use Margins instead of Paddings. === Layouts ===* Choose correct Layout, as none.g. no need to add a StackLayout if it only has 1 child.* [https://docs.microsoft.com/en-included definitions us/xamarin/xamarin-forms/user-interface/layouts/layout-options LayoutOptions].Fill or .FillAndExpand are missing from the application 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 WinX clientdefault).* Namespace definitions 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 avoided 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 included in used for all fileslists 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>.* Because {{Hint|Technically speaking, SfListViewExt informs item view models when their corresponding item views appear on / disappear from the same styles 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 different devices one page (mobile phonese.g. in a TabbedView), PCsit is necessary to set the AutomationId property uniquely for each list on the page, tabletsto 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, responsive you can use gesture recognizers on many UI elements such as a Grid to enable the latter to interact with user interfaces 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 be designedalways 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]]