Jump to: navigation, search

Changes


XAML Best practices

3,769 bytes added, 24 June
/* Performance */ WIP Continued
** This is especially an issue in Xamarin, 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 Xamarin, 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.
<br><br>
 
 
=== Using Styles and Templates ===
Attributes are the properties used to customize the controls in a UI. The number of attributes on each control can also contribute to having 'too much' code. Reducing the number of attributes will improve the overall performance of a customizing, especially on elements that appear multiple times in the UI,s such as items in a list.
 
Custom templates can be used with the additional benefits of defining a uniform look for all similar elements, and reducing customizing effort by creating a central point where a reusable template can be maintained.
 
==== Best Practices ====
* Do not re-define default attributes.
** All attributes have a default value. For example, Grid.Row="0" is always true, unless specified. Use the Microsoft documentation to familiarize yourself with the default value for every property, and avoid rewriting them.
** If your control inherits an attribute from its style, do not rewrite the same attribute again.
*** If you find yourself adding the same attributes to a control with a style, consider moving the attribute to the style definition, or creating a substyle.
* Avoid repeatedly applying Margins to individual controls.
** The main layouting should not be done through Margins. Instead, try to use a combination of Grid.Row/Column definitions and Horizontal/Vertical alignments to create your layout, instead of applying many or very large Margins.
** For example, if you want to move every control within your Grid away from the edge, use a Padding on the Grid instead of Margins on each of the elements.
** If you want to move controls away from each other within the same container, use RowSpacing or ColumnSpacing on the Grid, or Spacing on the Stackpanel.
* πŸ† If you repeatedly define the same attributes on a control, '''create a style'''.
** If the repeated customizing is used in only one xaml, create a ResourceDictionary on the parent container and defining your style there.
** Otherwise, place your style in UBIKThemes so it can be accessed across the entire project.
** For more information, read the section on [[XAML_Best_practices#Implicit_and_Explicit_Styling|Implicit and Explicit Styling]] below.
* πŸ† If you repeatedly define the same combinations of controls, '''use Control/DataTemplates'''.
** DataTemplates and ControlTemplates are reusable XAML elements that can be defined once and applied several times throughout the customizing.
** You may have noticed that a DataTemplate is the basis for an item template in UBIKThemes. However, these can be applied anywhere in the xaml, and do not require a ListView to be rendered.
** For more information, read the section on [[XAML_Best_practices#Content_Templating|Content Templating]] below.
* πŸ† '''Reduce the number of elements, especially containers''', wherever possible.
** Layouts are often defined in multiple nested containers, usually Grids and StackPanels. This has an impact on performance if it leads to a very deep hierarchy of rendered elements. On mobile devices with less computational power, the difference can be felt.
** Creative use of basic controls can sometimes eliminate the need for additional visual elements.
** 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 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]].
 
 
=== Implicit and Explicit Styling ===
 
=== Content Templating ===
 
 
487
edits