In my NET8
MAUI
application, I have a ListView
and in the ItemTemplate
I what to display an image (from the internet) and the a Label
. For that, I added Grid
like that
<ListView.ItemTemplate>
<DataTemplate x:DataType="dtp:ArticleBasic">
<local:CustomViewCell>
<Grid
ColumnSpacing="10"
HorizontalOptions="FillAndExpand"
RowSpacing="10"
VerticalOptions="FillAndExpand">
<Grid.Padding>
<OnIdiom
x:TypeArguments="Thickness"
Desktop="0,10,10,10"
Phone="10,10,10,10"
Tablet="10,30,10,0" />
</Grid.Padding>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<toolkit:AvatarView
BackgroundColor="{Binding LetterBackgroundColor}"
BorderColor="Blue"
BorderWidth="1"
HorizontalOptions="FillAndExpand"
ImageSource="{Binding FeaturedImageUrl}"
TextColor="{Binding LetterColor}"
VerticalOptions="FillAndExpand" />
<VerticalStackLayout
Grid.Column="1"
HorizontalOptions="FillAndExpand"
VerticalOptions="CenterAndExpand">
<Label
FontAttributes="Bold"
FontSize="{StaticResource ElementFontSizeNormal}"
Text="{Binding Title}" />
<Label Text="{Binding Excerpt}" />
</VerticalStackLayout>
<VerticalStackLayout Grid.Column="2">
</VerticalStackLayout>
</Grid>
</local:CustomViewCell>
</DataTemplate>
</ListView.ItemTemplate>
When the app renders the list, the AvatarView
displays the images but all of them are truncated on the right and bottom. I tried to change the HeightRequest
or the WidthRequest
, changed the first ColumnDefinition
and the size of the images. The result is always like in the following screenshot.
Any ideas how can I fix it?