* The x:Name is used to give a unique name for an object within a xaml file. It’s not valid in a ResourceDirectory (such as a style, template, etc, either defined within a xaml file, or in UBIKThemes), which requires using x:Key instead.
** Likewise there is a difference when referencing x:Name and x:Key elements.
<nowiki>x:Name - UWP: ElementName=SubmitFormButton | Mobile(Xamarin): Source={x:Reference SubmitFormButton}
x:Key - Both: {StaticResource SubmitFormButtonStyle} or {DynamicResource SubmitFormButtonStyle}</nowiki>
* Use explicit language when giving a name or key, for example: “PropStkpnl” is not easily readable, but “PropertiesStackPanel” is.
* 🏆 '''Empty out your UBIKThemes''' for every new customizing.
** When working in
XamarinMobile clients, it is recommended to empty out your UBIKThemes file (ie. delete everything between the <ResourceDictionary> tags) and only add what you intend to customize. ** Unfortunately, this approach is currently not 100% possible in UWP xamls, as we noticed that custom styles are not utilized on controls unless the controls are also in UBIKThemes, shown instead using the standard grey/orange. However, diligent customizers can find out how to do so below: <div class="toccolours mw-collapsible mw-collapsed" data-expandtext="Read More" data-collapsetext="Close"> An issue with dynamically refreshing style resources causes emptying of UBIKThemes to be much more complicated on UWP than in
XamarinMobile.<br>This is because StaticResources are only updated once they are overwritten again in Themes. The most common symptom of this issue is that for example, if UBIKAccentColor is changed to blue, this customization will not be reflected by styles for any control defined in UBIKThemes, unless the styles are 'written' again in UBIKThemes. So in this example, the regular button hover state will remain orange, unless UBIKButtonStyle is included in the UBIKThemes of that project.<br>Therefore, the only approach we can recommend is to remove everything from UBIKThemes, and add styles back once they fail to reflect the customized color resources. Since this approach is impractical, we do not encourage emptying UBIKThemes for UPW as strongly as we do for
XamarinMobile.
</div>
* Organize UBIKThemes in sections.
** For example, standard UBIKThemes defines resources grouped into; Color resource / Size resources / Text styles / Button styles / etc
** In XamarinMobile, keep Item Templates at the end of UBIKThemes.
** Either way, it is recommended to keep your UBIKThemes file as lean as possible (read the next point), as well as maintaining a grouping strategy. Use the tags <nowiki><!--#region Example--></nowiki> and <nowiki><!--#endregion--></nowiki> to define groups of content, for example
<nowiki><!--#region Text Styles-->, <!--#region DataTemplates-->, or <!--#region Item Templates--></nowiki>.
** The Visibility attribute can be added to any control. '''There is no need to wrap any control in a Grid simply to apply a Visibility.''' The same goes for layouting attributes such as Grid.Row/Column.
* 🏆 When you need to show a collection of items such as ListView, '''always use our custom versions'''. These are UBIK-optimized for speed and performance.
** These are [[XAML_Tips#Version_3.7_.26_later|SelectionBoundListView]] on UWP and [[Xamarin_XAML#SfListViewExt|SfListViewExt]] on XamarinMobile clients.
** Avoid using other item controls, or BindableLayouts, unless you are sure the performance impact will be negligible.
* Layouts:
** Note that this includes '''any''' control with scrolling behavior, as these include a hidden built-in ScrollView. For example, never place a ListView or TreeView within a ScrollView.
* Nested ListViews involves using a ListView on the item template of an object already presented in a collection. For example, showing the children of a child object.
** This is especially an issue in XamarinMobile, both for performance, but also because sfListViewExt tends to cause layouting issues by taking up more space than needed, unlike in UWP where a ListViewExt is capable of calculating its size based on the size of its items. Therefore, when using nested ListViews in XamarinMobile, constrain the size of the inner ListView with a fixed HeightRequest attribute (or WidthRequest in the case of a horizontal list).
** 🏆 '''Alternatives to the optimized ListViews should be used with extreme caution.''' Controls such as CollectionView or BindableLayout are not optimized for good performance in UBIK.
** Frequent use of Grids or Stackpanels can sometimes be replaced with clever use of Grid.Row/Column definitions.
* Layout Compression:
** Sometimes it’s unavoidable that multiple containers are needed. In Mobile(Xamarin), applying the [[Xamarin_XAML#Layout_compression_examples|HeadlessLayout]] style can reduce their impact on the visual tree.
** Some ideas for reducing the number of nested controls can be seen [[XAML_Best_practices#Alternatives_to_using_Multiple_Controls|later in this article]].
=== Simplifying Layouts ===
In UWP / on desktop UBIK, the processor is generally powerful enough to handle more complex UIs. However, mobile devices running Xamarin Mobile versions of UBIK will noticeably struggle to render sophisticated UIs made of deeply nested levels of containers. There are two ways this situation can be improved; the first is to reduce the number of containers used, and the second is to apply [[Xamarin_XAML#Layout_compression_examples|Layout Compression]] wherever possible. Finally, some ideas will be presented for other ways to reduce the number of controls needed to render the same UI.
</tab>
Note: & #10; (without the blank space) is the Xamarin Mobile glyph code for a newline. The equivalent in UWP is & #x0a;.
</tabs>
<tabs>
<tab name="MAUIMobile(Maui)">
<br/>
Namespace referenced in the code: <code>xmlns:behaviors="clr-namespace:UBIK.MAUI.Behaviors;assembly=UBIK.MAUI"</code>
One simple example of this is an ItemTemplate. Project customizers should be familiar with ItemTemplates, which are defined in UBIKThemes and then applied to every item in a List, for example. However, such templates are not inherently connected to listviews, and can be used on any items control, or can even on their own, if the situation calls for it. The important thing to understand is that a content template is a standalone unit, defined in xaml to display particular data bindings, and perhaps react to various states.
<br>
{{Hint|Look at other interesting templates in UBIKThemes, such as "Badge" / "ChildCountBadge" in XamarinMobile, or "UBIKObjectIndicators" in UWP to see more ideas for how templates can be utilized.}}
=== Template Selectors ===
=== DataTemplate vs. ControlTemplate in Xamarin Mobile clients ===
There are two main types of templates that can be used in UBIK to define reusable clusters of controls. Ignoring the technical differences, the functional differences boil down to;
==== DataTemplate ====
=== ControlTemplate in UWP ===
The situation is much simpler in UWP, which only makes use of the ControlTemplate to define custom templates. The ControlTemplate in UWP inherits the context from its content control, so no equivalent to Xamarin's Mobile clients <nowiki>BindingContext="{TemplateBinding BindingContext}"</nowiki> is required.
The ContentControl is used to render an instance of a template.
</source>
<br>
'''Mobile(Xamarin)'''
<source lang = "xml">
BindingContext="{Binding ...}"
By using this code snippet, we expect to see the Title or the current object. However, because we have a context switch applied, we would instead see the Title of the parent object. For Xamarin Mobile use '''Label''' instead of TextBlock and '''BindingContext''' instead of DataContext.
</tab>
<tab name="Mobile(Xamarin)">
<source lang = "xml">
<controls:ContentControl (displayed on child area of Object A)
</tab>
<tab name="Mobile(Xamarin)">
<source lang = "xml">
<ContentView (displayed on child area of Object A)
<tabs>
<tab name="Mobile(Xamarin)">
<source lang = "xml">
xmlns:ctrls="clr-namespace:UBIK.CPL.Controls;assembly=UBIK.CPL"
</source>
</tab>
<tab name="MAUIMobile(Maui)">
<source lang = "xml">
xmlns:ctrls="clr-namespace:UBIK.MAUI.Controls;assembly=UBIK.MAUI"
{{UnderConstructionEnd}}
[[Category:Mobile|XAML Best practices]]
[[Category:Pages with broken file links|XAML Best practices]]
[[Category:XAML|XAML Best practices]]
[[Category:Mobile|XAML Best practices]]