Some of the items size in collectionview is not aligned with values provided, How to fix this

Question

I am capturing images and adding it to CollectionView. Sometimes 1st,3rd,5th,7th,9th images are changing in size after capturing 2nd,4th,8th,10th images. Below the code I am using

<CollectionView ItemsSource="{Binding Model.CapturedImages}" SelectionMode="None">

    <CollectionView.ItemsLayout>

        <GridItemsLayout Orientation="Vertical" Span="2" />

    </CollectionView.ItemsLayout>

    <CollectionView.ItemTemplate>

        <DataTemplate>

            <Grid Padding="5" RowDefinitions="*,*">

                <Border

                    Margin="10"

                    Padding="0"

                    StrokeShape="RoundRectangle 5">

                    <Grid HeightRequest="200" WidthRequest="200">

                        <Image

                            Aspect="AspectFill"

                            HorizontalOptions="Fill"

                            Source="{Binding ImgSource}"

                            VerticalOptions="Fill">

                            <Image.Rotation>

                                <OnPlatform x:TypeArguments="x:Double">

                                    <On Platform="Android" Value="90" />

                                    <On Platform="iOS" Value="0" />

                                </OnPlatform>

                            </Image.Rotation>

                        </Image>

                    </Grid>

                </Border>

                <Border

                    Margin="15"

                    BackgroundColor="#E41937"

                    HeightRequest="30"

                    HorizontalOptions="End"

                    StrokeShape="RoundRectangle 5"

                    VerticalOptions="Start"

                    WidthRequest="30">

                    <Image

                        BackgroundColor="#E41937"

                        HeightRequest="15"

                        HorizontalOptions="Center"

                        Source="editwhite.png"

                        VerticalOptions="Center"

                        WidthRequest="15" />

                </Border>

                <Grid

                    Grid.Row="1"

                    Padding="5,0,5,0"

                    ColumnDefinitions="0.8*,0.2*">

                    <Label

                        Margin="10,0,0,0"

                        FontFamily="Roboto-Medium"

                        FontSize="12"

                        LineBreakMode="WordWrap"

                        MaxLines="2"

                        Text="{Binding Caption}"

                        TextColor="Black"

                        VerticalOptions="StartAndExpand" />

                    <Border

                        Grid.Column="1"

                        BackgroundColor="#E41937"

                        HeightRequest="20"

                        HorizontalOptions="CenterAndExpand"

                        StrokeShape="RoundRectangle 5"

                        VerticalOptions="StartAndExpand"

                        WidthRequest="20">

                        <Image

                            BackgroundColor="#E41937"

                            HeightRequest="10"

                            HorizontalOptions="CenterAndExpand"

                            Source="crosswhite.png"

                            VerticalOptions="CenterAndExpand"

                            WidthRequest="10" />

                    </Border>

                </Grid>

            </Grid>

        </DataTemplate>

    </CollectionView.ItemTemplate>

</CollectionView>

Answer 1

Hello,

I tested this with the same version of Maui and after removing all the **AndExpand properties the images resized normally.

Here is the sample code:

<CollectionView ItemsSource="{Binding DotMenu}" SelectionMode="None">
    <CollectionView.ItemsLayout>
        <GridItemsLayout Orientation="Vertical" Span="2" />
    </CollectionView.ItemsLayout>
    <CollectionView.ItemTemplate>
        <DataTemplate>
            <Grid Padding="5" RowDefinitions="*,*">
                <Border Margin="10" Padding="0" StrokeShape="RoundRectangle 5">
                    <Grid HeightRequest="200" WidthRequest="200" Background="AliceBlue" Grid.RowSpan="1">
                        <Image Aspect="AspectFill" HorizontalOptions="Fill" Source="{Binding ImageS}" VerticalOptions="Fill">
                            <Image.Rotation>
                                <OnPlatform x:TypeArguments="x:Double">
                                    <On Platform="Android" Value="90" />
                                    <On Platform="iOS" Value="0" />
                                </OnPlatform>
                            </Image.Rotation>
                        </Image>
                    </Grid>
                </Border>
                <Border Margin="15" BackgroundColor="#E41937" HeightRequest="30" HorizontalOptions="End" StrokeShape="RoundRectangle 5" VerticalOptions="Start" WidthRequest="30">

                    <Image Background="Red" BackgroundColor="#E41937" HeightRequest="15" HorizontalOptions="Center" Source="dotnet_bot.png" VerticalOptions="Center" WidthRequest="15" />
                </Border>
                <Grid Grid.Row="1" Padding="5,0,5,0" ColumnDefinitions="0.8*,0.2*">
                    <Label Margin="10,0,0,0" FontFamily="Roboto-Medium" FontSize="12" LineBreakMode="WordWrap" MaxLines="2" Text="{Binding MenuTitle}" TextColor="Black" />
                    <Border Grid.Column="1" BackgroundColor="#E41937" HeightRequest="20" StrokeShape="RoundRectangle 5" WidthRequest="20">
                        <Image BackgroundColor="#E41937" HeightRequest="10" Source="dotnet_bot.png" WidthRequest="10" />
                    </Border>
                </Grid>
            </Grid>
        </DataTemplate>
    </CollectionView.ItemTemplate>
</CollectionView>

Best Regards,

Alec Liu.

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.