LazyView

Article
04/14/2023

The LazyView control allows you to delay the initialization of a View. You need to provide the type of the View that you want to be rendered, using the x:TypeArguments XAML namespace attribute, and handle its initialization using the LoadViewAsync method. The HasLazyViewLoaded property can be examined to determine when the LazyView is loaded.

Syntax

Including the XAML namespace

In order to use the toolkit in XAML the following xmlns needs to be added into your page or view:

xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"

Therefore the following:

<ContentPage
    x:Class="CommunityToolkit.Maui.Sample.Pages.MyPage"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml">

</ContentPage>

Would be modified to include the xmlns as follows:

<ContentPage
    x:Class="CommunityToolkit.Maui.Sample.Pages.MyPage"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit">

</ContentPage>

Using the LazyView

<ContentPage
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
    x:Class="CommunityToolkit.Maui.Sample.Pages.Views.LazyViewPage"
    xmlns:local="clr-namespace:CommunityToolkit.Maui.Sample.Pages.Views.LazyView"
    Title="Lazy View">

    <StackLayout>
        <toolkit:LazyView x:Name="LazyUserAction" x:TypeArguments="local:LazyTestView" />
        <Button Text="Load View Now" Clicked="LoadLazyView_Clicked" />
    </StackLayout>

</ContentPage>

In your code behind, you can make the view load by calling the LoadViewAsync method.

async void LoadLazyView_Clicked(object sender, EventArgs e)
{
    await LazyUserAction.LoadViewAsync();
}

Properties

Property	Type	Description
HasLazyViewLoaded	bool	Gets the loaded status of the `LazyView`.

Methods

Property	Return Type	Description
LoadViewAsync	ValueTask	Initialize the `View`.

Examples

You can find an example of this feature in action in the .NET MAUI Community Toolkit Sample Application.

API

You can find the source code for LazyView over on the .NET MAUI Community Toolkit GitHub repository.

Share via