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

[CollectionView, Android] Items using a Grid in their template do not fill the screen's width #4406

Closed
pauldipietro opened this issue Nov 14, 2018 · 0 comments

Comments

@pauldipietro
Copy link
Member

commented Nov 14, 2018

Description

When using the CollectionView with a Grid in its ItemTemplate, it appears that the content of each item does not fill the width of the screen in question. This appears to occur on Android, but not iOS.

Consider a layout such as this:

<StackLayout>
    <CollectionView x:Name="CV" ItemsSource="{Binding Players}">
        <CollectionView.ItemTemplate>
            <DataTemplate>
                <Grid BackgroundColor="{Binding TeamHex}">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="150"/>
                        <ColumnDefinition Width="*"/>
                    </Grid.ColumnDefinitions>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="100"/>
                    </Grid.RowDefinitions>
                    <Image Grid.Column="0" Source="{Binding ImageUrl}"/>
                    <StackLayout Grid.Column="1" Orientation="Vertical" VerticalOptions="EndAndExpand">
                        <Label Text="{Binding Name}" FontSize="Large" TextColor="White"/>
                        <Label Text="{Binding Position}" TextColor="White"/>
                    </StackLayout>
                </Grid>
            </DataTemplate>
        </CollectionView.ItemTemplate>
    </CollectionView>
</StackLayout>

In this situation, there is a simple list layout with each item containing a basketball player with a picture (via URL), a background color, their name, and their position. Using the above template, the starred second column does not fill out the width of the screen, as seen below:

cv

Compared to iOS:

screen shot 2018-11-14 at 4 37 38 pm

However, if we were to implement a singular grid by itself with the same general layout, the width is filled:

    <Grid BackgroundColor="#003DA6">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="150"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="100"/>
        </Grid.RowDefinitions>
        <Image Grid.Column="0" Source="https://ak-static.cms.nba.com/wp-content/uploads/headshots/nba/1610612755/2018/260x190/203954.png"/>
        <StackLayout Grid.Column="1" Orientation="Vertical" VerticalOptions="EndAndExpand">
            <Label Text="Joel Embiid" FontSize="Large" TextColor="White"/>
            <Label Text="Center" TextColor="White"/>
        </StackLayout>
    </Grid>

nocv

Steps to Reproduce

  1. Run the small sample which utilizes the first layout, optionally modifying the code to show the second one
  2. Compare the results on Android/iOS

Expected Behavior

The Grid layout fills the width of the screen

Actual Behavior

The Grid layout does not fill the width of the screen, but does when it stands alone

Basic Information

  • Version with issue: (Custom build)
  • Last known good version: N/A
  • IDE: VS 2017 15.9 Enterprise
  • Platform Target Frameworks:
    • iOS: 12.1
    • Android: 8.1
    • UWP: N/A
  • Android Support Library Version:
  • Nuget Packages: N/A
  • Affected Devices: [Android]

Screenshots

[See above]

Reproduction Link

CollectionViewSample.zip

@pauldipietro pauldipietro added this to New in Triage Nov 14, 2018

@hartez hartez added this to To do in Android Ready For Work via automation Nov 14, 2018

@hartez hartez removed this from New in Triage Nov 14, 2018

@samhouts samhouts added this to To do in Sprint 145 Nov 26, 2018

@hartez hartez self-assigned this Nov 27, 2018

hartez added a commit that referenced this issue Nov 27, 2018
[Android] ItemContentView should use all available space; fixes #4406
Fix inconsistent/inaccurate class naming for cells/views.

@samhouts samhouts added this to In Progress in v3.6.0 Nov 28, 2018

@samhouts samhouts moved this from To do to Ready for Review (Issues) in Sprint 145 Nov 28, 2018

@samhouts samhouts added this to the 3.5.0 milestone Dec 4, 2018

@samhouts samhouts removed this from In Progress in v3.6.0 Dec 4, 2018

@samhouts samhouts added this to Ready in v3.5.0 Dec 4, 2018

@samhouts samhouts added this to In Progress in v3.6.0 Dec 4, 2018

@samhouts samhouts removed this from In Progress in v3.6.0 Dec 4, 2018

@samhouts samhouts moved this from Ready to In Progress in v3.5.0 Dec 6, 2018

@samhouts samhouts moved this from In Progress to Done in v3.5.0 Dec 12, 2018

@samhouts samhouts moved this from Ready for Review (Issues) to Done in Sprint 145 Dec 12, 2018

@samhouts samhouts added the e/5 🕔 label Dec 14, 2018

@samhouts samhouts closed this in 154c2d0 Dec 14, 2018

Android Ready For Work automation moved this from To do to Done Dec 14, 2018

rotorgames added a commit to rotorgames/Xamarin.Forms that referenced this issue Dec 23, 2018
[Android] ItemContentView should use all available space (xamarin#4569)
fixes xamarin#4406

* [Android] ItemContentView should use all available space; fixes xamarin#4406
Fix inconsistent/inaccurate class naming for cells/views.

* Update Xamarin.Forms.Platform.Android/CollectionView/SizedItemContentView.cs

Add missing space.

Co-Authored-By: hartez <hartez@users.noreply.github.com>

* Make ReuseId values match class names

# Conflicts:
#	Xamarin.Forms.Platform.Android/CollectionView/CarouselViewRenderer.cs
#	Xamarin.Forms.Platform.Android/CollectionView/ItemContentControl.cs
#	Xamarin.Forms.Platform.Android/CollectionView/SizedItemContentControl.cs
#	Xamarin.Forms.Platform.Android/Xamarin.Forms.Platform.Android.csproj
#	Xamarin.Forms.Platform.iOS/Xamarin.Forms.Platform.iOS.csproj
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.