Changes
The UI of {{UBIK}} WinX/UWP client is controlled by several predefined XAML templates which are loaded into the App at startuphighly customizable. There is a set of default template deployed with the App at installation, however, each of them Project engineers/customizers can be overridden by placing tailor the respective file in the folder [AppInstallPath]\LocalState\XAML. <br>Here you can see which XAML which area defines, either the area is ''beige'' colored UI for minor style changes or it has a ''red border'' around itmajor redesigns according to their needs.
==== AuthenticationPage ===UI controls =* UBIKSplashAreaControls are basic building blocks for constructing the UI.xaml[[File:SplashAreaASeveral types of them are used in the client.JPG|upright=0.35|thumb|left|alt=UBIKSplashArea|UBIKSplashArea.xaml]]{{clear}}* UBIKPageNavigation.xaml -> Deprecated and changed to UBIKHomePageButtons.xaml {{Version/WinXSince|3.0.0}}[[File:HomePageButtonsA.JPG|upright=0.35|thumb|left|alt=UBIKHomePageButtons|UBIKHomePageButtons.xaml]]{{clear}}* UBIKProfileItem.xaml[[File:after.png|upright=0.35|thumb|left|alt=UBIKProfileItem|UBIKProfileItem.xaml]] {{clear}}
== Standard controls ==
All standard Universal Windows Platform (UWP) controls can be used for our WinX/UWP client. There are online official documentations available for these controls. Some official or 3rd party apps showcasing these also exist and can be of great help. For example, [https://www.microsoft.com/en-us/p/xaml-controls-gallery/9msvh128x2zt?activetab=pivot:overviewtab XAML controls gallery] presents a rich collection of examples/tutorials.
== 3rd party and UBIK controls ==
We also use a few 3rd party (e.g. Syncfusion) and {{UBIK}} custom made controls in our client. There is currently no compiled lists of such controls. However, as a general rule, any such controls one finds in the default templates can be used in customizings.
=Template loading mechanism == Content Pages ===* UBIKObjectIcon.xaml[[File:ObjectIconA.png|upright=0.35|thumb|left|alt=UBIKObjectIcon|UBIKObjectIcon.xaml]]{{clear}}* UBIKObjectIconSmall.xaml* UBIKBottomLeft.xaml[[File:BottomLeftA.JPG|upright=0.35|thumb|left|alt=UBIKBottomLeft|UBIKBottomLeft.xaml]]{{clear}}
== Templates with default names ==
As one can see in the [[Developer Mode]], the default client UI consists of many parts and each of them is defined in an individual template with names such as UBIKChildArea. When a custom template file with the same name is deployed, that template is used by the client instead of the default one that comes with the client.
==== RootPage ==Templates with custom names ==* UBIKMainLeftAreaA common problem with customizing templates such as UBIKChildArea is that it alters the UI for all types of child objects.xamlIn order to use different templates depending on the objects, solutions such as [[File:MainLeftA.pngSYSCLS_CHILDAREATEMPLATE|upright=0.35|thumb|left|alt=UBIKMainLeftArea|UBIKMainLeftArea.xamlchild area template classification]]{{clear}}* UBIKMainItem.xamland [[File:MainItemA.JPGSYSCLS_CHILDITEMTEMPLATE|upright=0.35|thumb|left|alt=UBIKMainItem|UBIKMainItem.xamlchild item template classification]]{{clear}}* UBIKMainItemSmallare provided.xaml[[File:MainItemSmallACustom template files with names such as UBIKChildArea_WorkPackage can be deployed so that only objects of that type display the custom content while the rest still uses the default UI.JPG|upright=0.35|thumb|left|alt=UBIKMainItemSmall|UBIKMainItemSmall.xaml]]{{clear}}*UBIKMainArea.xaml[[File:MainAreaA.JPG|upright=0.35|thumb|left|alt=UBIKMainArea|UBIKMainArea.xaml]]{{clear}}*UBIKMainPageListHeader.xaml[[File:MainPageListHeader.png|upright=0.35|thumb|left|alt=UBIKMainPageListHeader|UBIKMainPageListHeader.xaml]]{{clear}}
Other than the necessary server side data configuration, a template selector is also needed to achieve this. For example, here's the code snippet in the default UBIKContentArea template.
<syntaxhighlight lang="xml">
...
<Grid xmlns:tpl="using:UBIK.WinX.Templates">
<Grid.Resources>
<tpl:ChildAreaTemplateSelector x:Key="ChildAreaTemplateSelector" />
</Grid.Resources>
<ContentControl ContentTemplateSelector="{StaticResource ChildAreaTemplateSelector}" />
</Grid>
...
</syntaxhighlight>
[[Category:UBIK|UBIK Templates]]
[[Category:Client|UBIK Templates]]
[[Category:WinX|UBIK Templates]]
