= 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 == Default XAMLs ==All default XAML templates (all starting with UBIK) 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.
{{Hint|All default == Differences to WinX/UWP ==* Since it's based on the Xamarin XAML resources that can be overridden are included in [[File:UBIK.Xamarin.Resources.zip]]. '''Please place ONLY those that dialect, you want to customize under CANNOT use any existing XAML customizings for the WinX/UWP app;* Namespace definitions must include the corresponding assembly names;* XAML folder. And in template files have the case extension name of UBIKThemes.'''xamlx, please keep ONLY ''' instead of '''xaml''';* You can deploy only those resources that you want to customize there.'''}}
== Important =Overriding default XAMLs=Make sure to change On Windows (WinX/UWP), the extension to <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 '''x'Import Customizing'' button in the app settings to achieve import the desired loading and overriding behavior!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.
= 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 templates and subtemplates of the app. After adapting the ''UBIKThemes'' file, the app needs to be restarted to update the changes. = 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 the following, we're going to override the '''Foreground Color''' default light theme color of the programapp:* Download [[File:UBIK.Xamarin.Resources.zip]] Unpack the default XAMLs;* Extract Pick and deploy the default UBIKThemes.xamlx from the package and place it into to the '''xaml''' folder inside the ''LocalState'' folder:
[[Image:setup-themes-file.png|frameless|600px|border]]
* Open it with the text editor of your choice and add remove everything within the '''ResouceDictionary''' except the following definition:
<syntaxhighlight lang="xml">
<Color x:Key="UBIKForegroundThemeColorUBIKLightThemeColor">blue</Color>
</syntaxhighlight>
* Save the changes and restart ''UBIK''reload. You should see changes successfully implemented:[[Image:ubik-with-blue-foreground.png {{Attention|frameless|border]]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.}}
== Custom Templates ==
Custom templates can be added, just like on the WinX /UWP client. Make sure to save the file as xaml'''x''' and 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 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 ''UBIKThemes.xamlx'' override templates defined in seperate files!'''}}
== Adding Images ==
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.
= Differences to WinX =
The biggest difference is that developers don't need 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 [[https://release.augmensys.com/ Release Portal]]) need to be defined in the overwritten file!
Other changes include:
* Namespace definitions have to be included in all files.
* Because the same styles are used on different devices (mobile phones, PCs, tablets), responsive user interfaces should be designed.
= Advanced =