maui icon indicating copy to clipboard operation
maui copied to clipboard

[MacCatalyst] [Scenario Day] CollectionView Horizontal layout using strings not rendering

Open jsuarezruiz opened this issue 3 years ago • 4 comments

Description

CollectionView Horizontal layout using strings not rendering.

Captura de Pantalla 2022-05-17 a las 17 18 40

Steps to Reproduce

  1. Download https://github.com/davidbritch/dotnet-maui-samples/tree/main/UserInterface/Views/CollectionViewDemos
  2. Launch the app on macOS and navigate to the "Horizontal list (text)" sample.

Version with bug

Release Candidate 3 (current)

Last version that worked well

Unknown/Other

Affected platforms

macOS

Affected platform versions

macOS 12.3.1

Did you find any workaround?

No response

Relevant log output

No response

jsuarezruiz avatar May 17 '22 15:05 jsuarezruiz

verified repro on macOS with above project.

kristinx0211 avatar May 19 '22 02:05 kristinx0211

We've moved this issue to the Backlog milestone. This means that it is not going to be worked on for the coming release. We will reassess the backlog following the current release and consider this item at that time. To learn more about our issue management process and to have better expectation regarding different types of issues you can read our Triage Process.

ghost avatar Sep 26 '22 10:09 ghost

I found that if the CollectionView is the root of the ContentPage, it sizes in the visible space.

image
<?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
             x:Class="CollectionViewDemos.Views.HorizontalListTextPage"
             Title="Horizontal list (text)">
        <CollectionView ItemsLayout="HorizontalList" Background="Silver" >
            <CollectionView.ItemsSource>
                <x:Array Type="{x:Type x:String}">
                    <x:String>Baboon</x:String>
                    <x:String>Capuchin Monkey</x:String>
                    <x:String>Blue Monkey</x:String>
                    <x:String>Squirrel Monkey</x:String>
                    <x:String>Golden Lion Tamarin</x:String>
                    <x:String>Howler Monkey</x:String>
                    <x:String>Japanese Macaque</x:String>
                    <x:String>Mandrill</x:String>
                    <x:String>Proboscis Monkey</x:String>
                    <x:String>Red-shanked Douc</x:String>
                    <x:String>Gray-shanked Douc</x:String>
                    <x:String>Golden Snub-nosed Monkey</x:String>
                    <x:String>Black Snub-nosed Monkey</x:String>
                    <x:String>Tonkin Snub-nosed Monkey</x:String>
                    <x:String>Thomas's Langur</x:String>
                    <x:String>Purple-faced Langur</x:String>
                    <x:String>Gelada</x:String>
                </x:Array>
            </CollectionView.ItemsSource>
        </CollectionView>
    
</ContentPage>

When placed inside a Grid, which is how the sample is written, the sizing doesn't permit the content to be visible.

image
<?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
             x:Class="CollectionViewDemos.Views.HorizontalListTextPage"
             Title="Horizontal list (text)">
    <Grid Margin="20">
        <CollectionView ItemsLayout="HorizontalList" Background="Silver" >
            <CollectionView.ItemsSource>
                <x:Array Type="{x:Type x:String}">
                    <x:String>Baboon</x:String>
                    <x:String>Capuchin Monkey</x:String>
                    <x:String>Blue Monkey</x:String>
                    <x:String>Squirrel Monkey</x:String>
                    <x:String>Golden Lion Tamarin</x:String>
                    <x:String>Howler Monkey</x:String>
                    <x:String>Japanese Macaque</x:String>
                    <x:String>Mandrill</x:String>
                    <x:String>Proboscis Monkey</x:String>
                    <x:String>Red-shanked Douc</x:String>
                    <x:String>Gray-shanked Douc</x:String>
                    <x:String>Golden Snub-nosed Monkey</x:String>
                    <x:String>Black Snub-nosed Monkey</x:String>
                    <x:String>Tonkin Snub-nosed Monkey</x:String>
                    <x:String>Thomas's Langur</x:String>
                    <x:String>Purple-faced Langur</x:String>
                    <x:String>Gelada</x:String>
                </x:Array>
            </CollectionView.ItemsSource>
        </CollectionView>
    </Grid>
</ContentPage>

When I give the Grid col/row sizes, the content is visible

image
<?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
             x:Class="CollectionViewDemos.Views.HorizontalListTextPage"
             Title="Horizontal list (text)">
    <Grid Margin="20" RowDefinitions="400" ColumnDefinitions="400">
        <CollectionView ItemsLayout="HorizontalList" Background="Silver" >
            <CollectionView.ItemsSource>
                <x:Array Type="{x:Type x:String}">
                    <x:String>Baboon</x:String>
                    <x:String>Capuchin Monkey</x:String>
                    <x:String>Blue Monkey</x:String>
                    <x:String>Squirrel Monkey</x:String>
                    <x:String>Golden Lion Tamarin</x:String>
                    <x:String>Howler Monkey</x:String>
                    <x:String>Japanese Macaque</x:String>
                    <x:String>Mandrill</x:String>
                    <x:String>Proboscis Monkey</x:String>
                    <x:String>Red-shanked Douc</x:String>
                    <x:String>Gray-shanked Douc</x:String>
                    <x:String>Golden Snub-nosed Monkey</x:String>
                    <x:String>Black Snub-nosed Monkey</x:String>
                    <x:String>Tonkin Snub-nosed Monkey</x:String>
                    <x:String>Thomas's Langur</x:String>
                    <x:String>Purple-faced Langur</x:String>
                    <x:String>Gelada</x:String>
                </x:Array>
            </CollectionView.ItemsSource>
        </CollectionView>
    </Grid>
</ContentPage>

davidortinau avatar Oct 15 '22 13:10 davidortinau

Also the size will overflow the container and thus not scroll. By providing layout options it will size to the container and scrolling will be available.

image
<CollectionView ItemsLayout="HorizontalList" HeightRequest="100" VerticalOptions="Start" HorizontalOptions="Fill">

davidortinau avatar Oct 15 '22 13:10 davidortinau

Repro this issue with 17.6 Preview (17.6 build 1498) on MacOS (13.3.1). Sample project https://github.com/davidbritch/dotnet-maui-samples/tree/main/UserInterface/Views/CollectionViewDemos

jinxinjuan avatar May 09 '23 06:05 jinxinjuan