[iOS] Border`s Render was not correctly in CollectionView

[maonaoda]

Description

Border`s Render was not correctly in CollectionView.
For the size rendering, it was unexpectedly displayed.

2024-07-16.13.03.00.mov

Steps to Reproduce

https://github.com/maonaoda/MauiBugs

Link to public reproduction project repository

No response

Version with bug

8.0.70 SR7

Is this a regression from previous behavior?

Not sure, did not test other versions

Last version that worked well

Unknown/Other

Affected platforms

iOS

Affected platform versions

No response

Did you find any workaround?

No response

Relevant log output

No response

[github-actions]

Hi I'm an AI powered bot that finds similar issues based off the issue title.

Please view the issues below to see if they solve your problem, and if the issue describes your problem please consider closing this one and thumbs upping the other issue to help us prioritize it. Thank you!

Open similar issues:

• [macOS/iOS] Border clipping incorrect when Content is scaled (or has any other Transform applied?) (#17560), similarity score: 0.76
• [iOS] Border often has wrong initial bounds (#23494), similarity score: 0.75

Closed similar issues:

• iOS Border crops/masks underlying elements wrong with clearly abnormal visual effect (iOS only) - repro project included (#17998), similarity score: 0.76
• Border Left and Right Margins Dont work on iOS, works well on Android (#13965), similarity score: 0.75
• [iOS] Margin does not work on Border inside a CollectionView (#19365), similarity score: 0.75

Note: You can give me feedback by thumbs upping or thumbs downing this comment.

[maonaoda]

Put the Border into Grid could fix this.
I believe the problem still exists, but it won't appear 100% of the time. :(

change this

                        <Border IsVisible="{Binding IsFinished}"
                                Grid.Row="1"
                                Grid.RowSpan="2"
                                Grid.Column="2"
                                Padding="5, 2"
                                BackgroundColor="#0098A5"
                                MaximumHeightRequest="30"
                                StrokeShape="{RoundRectangle CornerRadius='2'}"
                                StrokeThickness="0"
                                Margin="0, 2, 0, 0"
                                HorizontalOptions="End"
                                VerticalOptions="Start">
                            <Grid RowDefinitions="*"
                                  ColumnDefinitions="*">
                                <Label Grid.Row="0"
                                       Grid.Column="0"
                                       Text="解決"
                                       TextColor="#FFFFFF"
                                       FontSize="12"
                                       FontAttributes="Bold"
                                       HorizontalTextAlignment="Center"/>
                            </Grid>
                        </Border>

to

                        <Grid IsVisible="{Binding IsFinished}"
                              RowDefinitions="auto"
                              ColumnDefinitions="auto"
                              Grid.Row="1"
                              Grid.RowSpan="2"
                              Grid.Column="2">
                            <Border Grid.Row="0"
                                    Grid.Column="0"
                                    Padding="5, 2"
                                    BackgroundColor="#0098A5"
                                    MaximumHeightRequest="30"
                                    StrokeShape="{RoundRectangle CornerRadius='2'}"
                                    StrokeThickness="0"
                                    Margin="0, 2, 0, 0"
                                    HorizontalOptions="End"
                                    VerticalOptions="Start">
                                <Grid RowDefinitions="*"
                                      ColumnDefinitions="*">
                                    <Label Grid.Row="0"
                                           Grid.Column="0"
                                           Text="解決"
                                           TextColor="#FFFFFF"
                                           FontSize="12"
                                           FontAttributes="Bold"
                                           HorizontalTextAlignment="Center"/>
                                </Grid>
                            </Border>
                        </Grid>

[RoiChen001]

I can repro this issue at iOS platform on the latest 17.11.0 Preview 3.0 (8.0.61&8.0.70).

[acaliaro]

I believe that Border management in a CollectionView is currently one of the biggest problems in building a UI in MAUI

[maonaoda]

#23156 not working for this.

[maonaoda]

#18204 (comment) could fix this.

[maonaoda]

Slightly modify this to temporarily replace all PlatformView creation methods of BorderHandler.

#if IOS
　　BorderHandler.PlatformViewFactory = (h) => new NoneAnimatedBorderContentView() { CrossPlatformLayout = h.VirtualView };
#endif

#if IOS
        class NoneAnimatedBorderContentView : Microsoft.Maui.Platform.ContentView
        {
            public override void LayoutSubviews()
            {

                Layer.RemoveAllAnimations();

                if (Layer.Sublayers != null)
                {

                    for (var i = 0; i < Layer.Sublayers.Length; i++)
                    {
                        Layer.Sublayers[i].RemoveAllAnimations();
                    }
                }

                base.LayoutSubviews();
            }
        }
#endif

[jsuarezruiz]

This issue have been fixed by #24360