Pre cache image

[IeuanWalker]

Is there a way to pre cache image?

I have an API that returns some image URLs, currently in the XAML I have enabled caching -

<UriImageSource CacheValidity="365"
                CachingEnabled="True"
                Uri="{Binding ImageUrl}" />

Issue is on first load it can be some delay in loading the images and causes some layout issue on some devices. So looking for a way to pre-cache the images from the API before loading the page.

f.e. i have tried -

// Pre cache images
List<Uri>? images = result.CollectionWeeks
		.SelectMany(week => week.Bins)
		.Select(bin => bin.ImageUrl)
		.Distinct()
		.ToList();

foreach(Uri image in images)
{
	_ = new UriImageSource()
	{
		Uri = image,
		CachingEnabled = true,
		CacheValidity = TimeSpan.FromDays(365)
	};
}

[stephenquan]

Several possible optimizations exist:

• Define Image.WidthRequest and Image.HeightRequest so layouts can be recalculated before images are downloaded
• Use CollectionView to render your collections increasing the possibility of load on demand

[IeuanWalker]

@stephenquan layout is quite complex, and i think most of the layout issue is coming from the CarouselView, which I have an open bug for - #24077

This what the page looks like on first load, but is fine when used again afterwards -

this is the xaml -

<!-- Week carousel -->
<CarouselView x:Name="WeekCarousel"
                Grid.Row="1"
                HorizontalScrollBarVisibility="Never"
                IndicatorView="IndicatorView"
                ItemsSource="{Binding Calendar.CollectionWeeks}"
                Loop="False"
                PositionChanged="WeekCarousel_PositionChanged">
    <CarouselView.ItemTemplate>
        <DataTemplate x:DataType="wasteManagementModels:CollectionWeek">
            <Grid RowDefinitions="auto,*" RowSpacing="45">
                <!-- Date of collection -->
                <Border Grid.Row="0"
                        Margin="0,20,0,0"
                        Padding="15,8"
                        BackgroundColor="{DynamicResource AccentColour}"
                        HorizontalOptions="Center">
                    <Border.StrokeShape>
                        <RoundRectangle CornerRadius="6" />
                    </Border.StrokeShape>
                    <Label Style="{DynamicResource TextInverted}" Text="{Binding Date, StringFormat='{0:dddd, dd MMMM}'}" />
                </Border>

                <FlexLayout Grid.Row="1"
                            Padding="0"
                            BindableLayout.ItemsSource="{Binding Bins}"
                            Direction="Row"
                            JustifyContent="SpaceEvenly"
                            Wrap="Wrap">
                    <BindableLayout.ItemTemplate>
                        <DataTemplate x:DataType="wasteManagementModels:Bin">
                            <Grid RowDefinitions="90,auto,auto" RowSpacing="10">
                                <!-- Bin image -->
                                <Image Grid.Row="0" Aspect="AspectFit">
                                    <Image.Source>
                                        <UriImageSource CacheValidity="365"
                                                        CachingEnabled="True"
                                                        Uri="{Binding ImageUrl}" />
                                    </Image.Source>
                                </Image>

                                <!-- Bin name -->
                                <Label Grid.Row="1"
                                        FontFamily="InterRegular"
                                        HorizontalTextAlignment="Center"
                                        LineBreakMode="WordWrap"
                                        Text="{Binding Type}"
                                        TextColor="{DynamicResource TextPrimaryColour}" />

                                <!-- Cancelled message -->
                                <Border Grid.Row="2"
                                        Padding="3.5,5"
                                        HorizontalOptions="Center"
                                        StrokeThickness="0">
                                    <Border.StrokeShape>
                                        <RoundRectangle CornerRadius="6" />
                                    </Border.StrokeShape>
                                    <Border.Triggers>
                                        <DataTrigger Binding="{Binding CollectionType}"
                                                        TargetType="Border"
                                                        Value="Cancelled">
                                            <Setter Property="BackgroundColor" Value="Orange" />
                                        </DataTrigger>
                                    </Border.Triggers>
                                    <Label FontFamily="InterRegular"
                                            FontSize="Caption"
                                            LineBreakMode="WordWrap"
                                            Text="{Binding Message}">
                                        <Label.Triggers>
                                            <DataTrigger Binding="{Binding CollectionType}"
                                                            TargetType="Label"
                                                            Value="Cancelled">
                                                <Setter Property="TextColor" Value="White" />
                                            </DataTrigger>

                                            <DataTrigger Binding="{Binding Message, Converter={StaticResource IsNotNullConverter}}"
                                                            TargetType="Label"
                                                            Value="false">
                                                <Setter Property="Text" Value=" " />
                                            </DataTrigger>
                                        </Label.Triggers>
                                    </Label>
                                </Border>
                            </Grid>
                        </DataTemplate>
                    </BindableLayout.ItemTemplate>
                </FlexLayout>
            </Grid>
        </DataTemplate>
    </CarouselView.ItemTemplate>
</CarouselView>

I'll try setting the height see if that improves it

[stephenquan]

Can the FlexLayout+BindableLayout be replaced with a CollectionView+(ItemsLayout or DateTemplateSelector)? I make this suggestion for possible further performance optimizations.

[IeuanWalker]

@stephenquan not really, the items in the bindable layout can range from 1 - 7 items, so need a wrapping layout.

And as far as im aware you cant do that with collection view

[stephenquan]

With ItemsLayout you can do

• XAML: ItemsLayout="VerticalGrid, 2"
• C#: ItemsLayout = new GridItemsLayout(2, ItemsLayoutOrientation.Vertical)

See https://learn.microsoft.com/en-us/dotnet/maui/user-interface/controls/collectionview/layout?view=net-maui-8.0

With DataTemplateSelector you could write one to present different layouts derived from the number of items in the list. See https://learn.microsoft.com/en-us/dotnet/api/microsoft.maui.controls.datatemplateselector?view=net-maui-8.0

These options are a pain, but, by weening yourself away from FlexLayout would allow you to explore more performant choices.

[IeuanWalker]

@stephenquan thanks, thats good to know

For now ive swapped out the MAUI CarouselView with CarouselView from CardsView. Which just worked straightaway with my existing layout