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

RaviKiran P 0 Reputation points
2025-01-02T11:37:22.9033333+00:00

Screenshot_20250102-170020

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>
.NET MAUI
.NET MAUI
A Microsoft open-source framework for building native device applications spanning mobile, tablet, and desktop.
3,783 questions
{count} votes

Your answer

Answers can be marked as Accepted Answers by the question author, which helps users to know the answer solved the author's problem.