Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

iOS - Basic collection view elements don't render properly. #15164

Open
RobTF opened this issue May 18, 2023 · 2 comments
Open

iOS - Basic collection view elements don't render properly. #15164

RobTF opened this issue May 18, 2023 · 2 comments
Labels
area-controls-collectionview CollectionView, CarouselView, IndicatorView platform/iOS 🍎 s/triaged Issue has been reviewed s/verified Verified / Reproducible Issue ready for Engineering Triage t/bug Something isn't working

Comments

@RobTF
Copy link

RobTF commented May 18, 2023

Description

I have a simple collection view with an item template which shows an image with a description to the right.

The XAML for the template is;

<Border Margin="10,0,10,0">
    <Grid ColumnDefinitions="Auto,*" ColumnSpacing="10" Margin="5">
        <Image Source="template.png" WidthRequest="36" />
        <Label Grid.Column="1" Text="{Binding Name}" VerticalOptions="Center" />
    </Grid>
</Border>

On Android it works fine as per below;
image

However, on iOS it seems to have problems with vertical sizing.
image

Steps to Reproduce

  1. Build attached repro case.
  2. Run on iOS
  3. Tap "Go to test page"
  4. Observe issue.

Link to public reproduction project repository

https://github.com/RobTF/mauiplay/tree/master/CollectionViewIssue

Version with bug

7.0.86

Last version that worked well

Unknown/Other

Affected platforms

iOS

Affected platform versions

iOS 16.4

Did you find any workaround?

If the item height is known ahead of time, a HeightRequest can be added as a hack, but this is problematic as in a lot of cases the item should just be the size of the content, so varying font sizes, or data which is dynamically bound make this very difficult or impossible.

Relevant log output

No response

@RobTF RobTF added the t/bug Something isn't working label May 18, 2023
@Eilon Eilon added the area-controls-collectionview CollectionView, CarouselView, IndicatorView label May 18, 2023
@XamlTest XamlTest added s/verified Verified / Reproducible Issue ready for Engineering Triage s/triaged Issue has been reviewed labels Jul 17, 2023
@XamlTest
Copy link
Collaborator

Verified this on Visual Studio Enterprise 17.7.0 Preview 3.0. Repro on iOS 16.4 .NET 8, and Android 13.0-API33 also has render issue with below Project:
CollectionViewIssue.zip

iOS:
image
Android:
image

@davidortinau
Copy link
Contributor

davidortinau commented Aug 17, 2023

Tested with .NET 8 Preview 7.

Set HeightRequest on the Image:

Simulator Screenshot - iPhone 14 Pro - 2023-08-17 at 10 10 12

Android Border default background color seems to be the black. Setting the default style to transparent resolves this:

Resources/Styles.xaml

<Style TargetType="Border">
        <Setter Property="Stroke" Value="{AppThemeBinding Light={StaticResource Gray200}, Dark={StaticResource Gray500}}" />
        <Setter Property="StrokeShape" Value="Rectangle"/>
        <Setter Property="StrokeThickness" Value="1"/>
        <Setter Property="Background" Value="Transparent"/>
    </Style>

@PureWeen @rachelkang should we update the default styles RD, or is there a backing default that is incorrect on Android? I'm pretty sure there are other issues on the black background Android issue, but I didn't spot it quickly.

Screenshot 2023-08-17 at 10 28 10 AM

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
area-controls-collectionview CollectionView, CarouselView, IndicatorView platform/iOS 🍎 s/triaged Issue has been reviewed s/verified Verified / Reproducible Issue ready for Engineering Triage t/bug Something isn't working
Projects
None yet
Development

No branches or pull requests

5 participants