Training
Module
Customize layout in .NET MAUI XAML pages - Training
Create consistent user interfaces across different devices by using StackLayout and Grid.
This browser is no longer supported.
Upgrade to Microsoft Edge to take advantage of the latest features, security updates, and technical support.
Important
Starting in Windows 10, version 1703 (Creators Update), x:DeferLoadStrategy is superseded by the x:Load attribute. Using x:Load="False"
is equivalent to x:DeferLoadStrategy="Lazy"
, but provides the ability to unload the UI if required. See the x:Load attribute for more info.
You can use x:DeferLoadStrategy="Lazy" to optimize the startup or tree creation performance of your XAML app. When you use x:DeferLoadStrategy="Lazy", creation of an element and its children is delayed, which decreases startup time and memory costs. This is useful to reduce the costs of elements that are shown infrequently or conditionally. The element will be realized when it's referred to from code or VisualStateManager.
However, the tracking of deferred elements by the XAML framework adds about 600 bytes to the memory usage for each element affected. The larger the element tree you defer, the more startup time you'll save, but at the cost of a greater memory footprint. Therefore, it's possible to overuse this attribute to the extent that your performance decreases.
<object x:DeferLoadStrategy="Lazy" .../>
The restrictions for using x:DeferLoadStrategy are:
There are several different ways to realize the deferred elements:
NOTE: Once the instantiation of an element has started, it is created on the UI thread, so it could cause the UI to stutter if too much is created at once.
Once a deferred element is created in any of the ways listed previously, several things happen:
You can nest deferred elements, however they have to be realized from the outer-most element in. If you try to realize a child element before the parent has been realized, an exception is raised.
Typically, we recommend that you defer elements that are not viewable in the first frame. A good guideline for finding candidates to be deferred is to look for elements that are being created with collapsed Visibility. Also, UI that is triggered by user interaction is a good place to look for elements that you can defer.
Be wary of deferring elements in a ListView, as it will decrease your startup time, but could also decrease your panning performance depending on what you're creating. If you are looking to increase panning performance, see the {x:Bind} markup extension and x:Phase attribute documentation.
If the x:Phase attribute is used in conjunction with x:DeferLoadStrategy then, when an element or an element tree is realized, the bindings are applied up to and including the current phase. The phase specified for x:Phase does not affect or control the deferral of the element. When a list item is recycled as part of panning, realized elements behave in the same way as other active elements, and compiled bindings ({x:Bind} bindings) are processed using the same rules, including phasing.
A general guideline is to measure the performance of your app before and after to make sure you are getting the performance that you want.
<Grid x:Name="DeferredGrid" x:DeferLoadStrategy="Lazy">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Rectangle Height="100" Width="100" Fill="#F65314" Margin="0,0,4,4" />
<Rectangle Height="100" Width="100" Fill="#7CBB00" Grid.Column="1" Margin="4,0,0,4" />
<Rectangle Height="100" Width="100" Fill="#00A1F1" Grid.Row="1" Margin="0,4,4,0" />
<Rectangle Height="100" Width="100" Fill="#FFBB00" Grid.Row="1" Grid.Column="1" Margin="4,4,0,0" />
</Grid>
<Button x:Name="RealizeElements" Content="Realize Elements" Click="RealizeElements_Click"/>
private void RealizeElements_Click(object sender, RoutedEventArgs e)
{
// This will realize the deferred grid.
this.FindName("DeferredGrid");
}
Training
Module
Customize layout in .NET MAUI XAML pages - Training
Create consistent user interfaces across different devices by using StackLayout and Grid.