Starting from version 5.1, a small delay was introduced in the content heavy pages (child page, document page and query page). However, additional delays can also be applied to the custom UI at will, using a new property added to two existing controls used to insert UI templates: UBIKContentView and ContentControl. You can specify a delay (in milliseconds) on both controls so that the content of them is loaded after that amount of time. Examples are shown below.
{| class="wikitable"
! UBIKContentView
! ContentControl
|-
|
<syntaxhighlight lang="xml">
<controls:UBIKContentView Delay="50" Converter="{StaticResource ChildAreaTemplateConverter}" />
</syntaxhighlight>
||
<syntaxhighlight lang="xml">
<controls:ContentControl Delay="50" ContentTemplate="{Binding [UBIKNavigationBar], Source={x:Static services:TemplateService.Instance}}" />
</syntaxhighlight>
|-
|}
Please note: {{Hint|The delay won't have any effect if you specify the Content of the UBIKContentView control instead of its Converter, because the Content is immediately laid out by the XAML framework that way. If you don't need a converter to determine the actual template name dynamically, you can still use the TemplateConverter and specify the template name like the following so that the delay applies.}}
<tabs>
<tab name="Delay applies ✅">
</tab>
</tabs>
==== Lazy Loading in UBIKContentView and ContentControl {{Version/MobileSince|5.1}} ====
To further improve performance, we have added a it is now possible to apply LazyLoading property to UBIKContentView and ContentControl. When a ContentTemplate is assigned to either of these controls and the LazyLoading property is set to true, the content is only loaded when it is explicitly requested. This can be used in combination with a UBIKTabView, so that only The difference between this and simply controlling the content of IsVisible condition is that in the selected tab is renderedlatter, while resources are still consumed in constructing the content of non-selected tabs UI element, even though it is notshown. When switching tabs, the content for the newly selected tab is rendered on demand. Note that Lazy loading requires a trigger to determine when the content should be loaded. In , and the case of biggest benefit is experienced when complex elements, especially those hosting a UBIKTabViewListView or some kind of object/property collection, this occurs are lazy-loaded. UBIKTabView is optimized to make use of the LazyLoading attribute when switching tabsit is applied to tab content. AlternativelyAdditionally, it usage outside of UBIKTabView is possible, as the loading can be triggered by, for exampleas a behavior attached to any other control, such as a button with an IsClicked behaviorhandler. However, lazy loading always requires '''UBIKTabView with LazyLoading''' When used in combination with UBIKTabView (by including the LazyLoading=True attribute on any UBIKContentView or ContentControl content of a trigger; otherwisetab item, as is now standard {{Version/MobileSince|5.1}}), only the content would never be loadedof the selected tab is rendered (by default, the first tab). The content of non-selected tabs is not. When switching tabs, UBIKTabView takes care of triggering the rendering of the content for the newly selected tab.
{| class="wikitable"
<syntaxhighlight lang="xml">
<tabView:SfTabItem>
<tabView:SfTabItem.Content> <controls:UBIKContentView Converter="{StaticResource TemplateConverter}" ConverterParameter="UBIKPropertyArea" LazyLoading="True" /> </tabView:SfTabItem.Content> </tabView:SfTabItem>
</syntaxhighlight>
||
<syntaxhighlight lang="xml">
<tabView:SfTabItem.Content> <controlstabView:ContentControl LazyLoading="True"SfTabItem.Content> <controls:ContentControl.ContentTemplate> <DataTemplate> <Grid RowDefinitionsContentTemplate="*,Auto{DynamicResource MyTemplate}"> <Label Text="MyLabel" /> <controls:CheckBox Grid.Row="1" IsChecked="True" IsToggleButton LazyLoading="True" /> </Grid> </DataTemplate> </controlstabView:ContentControlSfTabItem.ContentTemplate> </controls:ContentControlContent> </tabView:SfTabItem.Content>
</syntaxhighlight>
⚠️Please note: Although this is possible, care must be taken not to create excessive nesting, as this can ultimately lead to performance degradation if overused. For example, a grid inside a grid, inside another grid, and so on.
|-
|}
'''Another control as a trigger for lazy loading'''
''' Using another control as a trigger for lazy loading''' Other controls (e.g., Button, CheckBox, etc.) can also serve as triggers for lazy loading. For instance, interacting with such a control The benefit of this is that LazyLoading can trigger lazy loading for still be applied to a complex UBIKContentView or ContentControlthat is not hosted within a UBIKTabView. And example of a usecase is a togglebutton that reveals a section of content:
<syntaxhighlight lang="xml">