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

maonaoda commented 1 month ago

Description

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

https://github.com/user-attachments/assets/024841f5-097b-4b2e-9402-f4ae2796d8f4

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[bot] commented 1 month ago

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 commented 1 month ago

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 commented 1 month ago

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

acaliaro commented 1 month ago

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

maonaoda commented 1 month ago

https://github.com/dotnet/maui/pull/23156 not working for this.

maonaoda commented 1 month ago

https://github.com/dotnet/maui/issues/18204#issuecomment-2168852187 could fix this.

maonaoda commented 1 month ago

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

dotnet / maui