Changes
/* Simplifying Layouts */ Added section on flattening your visual tree
=== Simplifying Layouts ===
In UWP / on desktop UBIK, the processor is generally powerful enough to handle more complex UIs. However, mobile devices running Xamarin 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.<br> ==== Reducing continersContainers ====Containers refers to controls whose purpose is to display other controls. The most basic examples are the Grid and StackLayout. These containers are frequently nested in order to finetune a UI, however, the downside is that each one adds a new branch in what is called a "visual tree', even if the control itself is not visible. When using many containers, it is useful to ask yourself if each container is really necessary, or if the visual tree can be simplified. The examples below show three different ways for showing the same content, each utilizing less controls, leading to a simpler visual tree. <tabs><tab name="2 StackLayouts, 3 Labels"><source lang = "xml"><StackLayout> <StackLayout Orientation="Horizontal"> <Label Text="{x:Static resources:UBIKIcons.IconName}" FontFamily="{StaticResource UBIKSymbols}"/> <Label Text="Name" /> </StackLayout> <Label Text="Description" /></StackLayout></source></tab> <tab name="1 Grid, 3 Labels"><source lang = "xml"> <Grid Grid.ColumnDefinitions="24,*" Grid.RowDefinitions="Auto,Auto"> <Label Text="{x:Static resources:UBIKIcons.IconName}" FontFamily="{StaticResource UBIKSymbols}"/> <Label Grid.Column="1" Text="Name" /> <Label Grid.Row="1" Grid.ColumnSpan="2" Text="Description lorem ipsum..." /></Grid></source></tab> <tab name="1 Label"><source lang = "xml"><Label> <Label.FormattedString> <FormattedText> <Span FontFamily="{StaticResource UBIKSymbols}" Text="{x:Static resources:UBIKIcons.IconName}" /> <Span Text="Name " /> <Span Text="Description lorem ipsum..." /> </FormattedText> </Label.FormattedString></Label></source></tab> Note: is the Xamarin glyph code for a Linebreak. The equivalent in UWP is 
 .</tabs> Now imagine the UI element should have a colored background. You may be tempted to wrap everything in a Frame, however, you can just as easily assign color using the Background attribute on the StackLayout, Grid, or even the Label itself. Granted, this example is very simple, however, the point illustrated here is that you should fid creative ways to reduce the number of controls nested in your UI. Another thing to consider is how many times this particular UI definition will be rendered on screen. You have more freedom to be uneconomical in your use of controls when when designing items that will appear once on a page, such as the page header, rather than with item templates or control templates that are rendered several, or even dozens, of times in one view. <br>==== Layout compressionCompression ====<br>==== Alternatives to using Multiple Controls ==== <br><br>
[[Category:Pages with broken file links|XAML Best practices]]
