New to Telerik UI for .NET MAUI? Start a free 30-day trial

Style Images in the ImageCardView for .NET MAUI

Environment

Version Product Author
7.1.0 Telerik UI for .NET MAUI Chat Dobrinka Yordanova

Description

In .NET MAUI applications, you often need to customize the appearance of images within an ImageCardView and apply specific design requirements. This includes maintaining the aspect ratio of displayed images and adjusting their size to fit within a particular layout without distortion.

This KB article also answers the following questions:

  • How to scale images without distortion in ImageCardView?
  • How to maintain the image's aspect ratio in .NET MAUI applications?
  • How to customize the size of images in ImageCardView?

Solution

To customize the style of the image inside the ImageCardView, including maintaining its aspect ratio and adjusting its size you can use one of the following options:

Using Implicit Style

Define an implicit style targeting the Image type in your page resources. This style will apply to all Image instances within the page, allowing you to set properties like Aspect, HeightRequest, and WidthRequest.

<ContentPage.Resources>
    <ResourceDictionary>
        <Style TargetType="Image">
            <Setter Property="Aspect" Value="AspectFill"/>
            <Setter Property="HeightRequest" Value="100"/>
            <Setter Property="WidthRequest" Value="100"/>
        </Style>
    </ResourceDictionary>
</ContentPage.Resources>

Using ControlTemplate

Customize the image directly within the ControlTemplate of the ImageCardView. This approach offers more flexibility for individual card customizations.

<VerticalStackLayout>
    <telerik:ImageCardView>
        <telerik:ImageCardView.ControlTemplate>
            <ControlTemplate>
                <VerticalStackLayout>
                    <Label Text="hello image one"/>
                    <Image Aspect="AspectFill"
                           HeightRequest="400"
                           WidthRequest="200" 
                           Source="dotnet_bot.png"/>
                </VerticalStackLayout>
            </ControlTemplate>
        </telerik:ImageCardView.ControlTemplate>
    </telerik:ImageCardView>
    <telerik:ImageCardView Image="emoji_wink.png"/>
    <telerik:ImageCardView Image="emoji_smile2.png"/>
</VerticalStackLayout>

This code snippet demonstrates how to set the aspect ratio and size for the image inside the ImageCardView. The AspectFill value ensures that the aspect ratio is maintained while the image is scaled to fill the allocated space. The HeightRequest and WidthRequest properties allow for precise control over the image dimensions.

See Also

In this article