search

dotnet / maui

.NET MAUI is the .NET Multi-platform App UI, a framework for building native device applications spanning mobile, tablet, and desktop.
https://dot.net/maui
MIT License
22.05k stars 1.73k forks source link

There is a lot of space between each data when nested collection view is implemented in .NET MAUI in iOS #18476

Closed san1109 closed 10 months ago

san1109 commented 11 months ago

Description

Please refer the image how it shows a lot of spaces after each collectionview data. I tried all other layout but it has no effect on iOS devices. Can you suggest any alternate to fix this issue ?.I have implemented a nested collection view for displaying data dynamically in .NET MAUI but I get lot of extra space after each collection view data in iOS. But it is working fine in android. Please refer below code

iOS android

Steps to Reproduce

<?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"
             xmlns:viewmodel="clr-namespace:sample.sample.ViewModel"
             xmlns:model="clr-namespace:sample.sample.Model"
             xmlns:local="clr-namespace:Yeap.sample"
             xmlns:searchbar="clr-namespace:sample.sample"
             x:Class="sample.sample.View.Attendancesample"
             x:DataType="viewmodel:PickupViewModel"
             xmlns:locals="clr-namespace:sample.sample.View"
             xmlns:conv="clr-namespace:sample.sample.Helpers"
             xmlns:mct="clr-namespace:CommunityToolkit.Maui.Behaviors;assembly=CommunityToolkit.Maui"
             Title="{local:Translate Pickup_Title}" BackgroundColor="#f7f4f4">
    <ContentPage.Behaviors>
        <mct:StatusBarBehavior StatusBarColor="#00000000"/>
        <mct:StatusBarBehavior StatusBarStyle="DarkContent" />
    </ContentPage.Behaviors>
    <ContentPage.Resources>
        <conv:ImageHelper  x:Key="ImageHelper"/>

    </ContentPage.Resources>
    <StackLayout>
        <ScrollView VerticalOptions="StartAndExpand" VerticalScrollBarVisibility="Never">
            <StackLayout>
                <VerticalStackLayout>
                    <VerticalStackLayout BackgroundColor="White">
                        <HorizontalStackLayout HorizontalOptions="Center"  Margin="0,0">
                            <Label x:Name="CarplateNo" Text="" FontFamily="InterMedium" FontAttributes="Bold" FontSize="16" TextColor="#6C6C6C"/>
                            <Label  Text=" - " FontFamily="InterMedium" FontAttributes="Bold" FontSize="16" TextColor="#6C6C6C"/>
                            <Label x:Name="VechileId" Text="" FontFamily="InterMedium" FontAttributes="Bold" FontSize="16" TextColor="#6C6C6C"/>
                        </HorizontalStackLayout>
                        <!--Total-->
                        <HorizontalStackLayout HorizontalOptions="Center" Margin="0,10,0,0">
                            <Label TextColor="black" Text="" FontFamily="InterMedium" FontSize="16"/>
                            <Label Text="" TextColor="#FFB82B" FontFamily="InterMedium" FontSize="16"/>
                            <Label TextColor="black" Text=" - " FontFamily="InterMedium" FontSize="16"/>
                            <Label TextColor="black" Text="" FontFamily="InterMedium" FontSize="16"/>
                            <Label Text="" TextColor="#FFB82B" FontFamily="InterMedium" FontSize="16"/>
                        </HorizontalStackLayout>
                        <!--Generate Buttons-->
                        <HorizontalStackLayout HorizontalOptions="Center" Margin="4" >

                            <Button TextColor="white" ImageSource="qr_code.svg"  Text="{local:Translate Common_QRCode}" HeightRequest="50" ContentLayout="left,0"
                            BackgroundColor="#FFB82B" Margin="6" Clicked="Button_Clicked_1" />
                            <Button TextColor="white" ImageSource="directions_walk.svg"  Text="" HeightRequest="50" ContentLayout="left,0"
                            BackgroundColor="#FFB82B" Margin="6" Command=""  />
                        </HorizontalStackLayout>
                    </VerticalStackLayout>

                    <VerticalStackLayout BackgroundColor="#f4f4f4">
                        <Frame CornerRadius="20"  BackgroundColor="White" BorderColor="LightGray"  Margin="10,8"
                        Padding="{OnPlatform Android='1,0',iOS='10,10'} " HeightRequest="40">
                            <HorizontalStackLayout>
                                <Label Text="{x:Static model:Icons.Search}" FontSize="25" FontFamily="Icons" TextColor="Gray" Margin="15,6,0,0" />
                                <searchbar:BorderlessSearchbar x:Name="searchBar" Placeholder="{local:Translate  Pickup_Search_Title}" 
                               Margin="-20,0" TextColor="Black" PlaceholderColor="LightGray" TextChanged="SearchBar_TextChanged" />
                            </HorizontalStackLayout>
                        </Frame>
                        <!--BusStops and Passenger List-->
                        <VerticalStackLayout x:Name="collectionview">
                            <CollectionView EmptyView="No Results found" ItemsSource="{Binding Stop}" x:Name="busStopCollectionView">
                                <CollectionView.ItemTemplate>
                                    <DataTemplate x:DataType="model:BusStop">
                                        <Grid VerticalOptions="FillAndExpand" Padding="0,0">
                                              <VerticalStackLayout>
                                            <StackLayout BackgroundColor="#2B61B2" HeightRequest="45">

                                                <HorizontalStackLayout   Margin="5,0" Padding="0,6,0,0" VerticalOptions="Center">

                                                    <!--BusStops-->
                                                   <Label FontSize="15" FontAttributes="Bold"  
                                                    Text="" WidthRequest="320" VerticalOptions="Center"
                                                    HorizontalTextAlignment="Center" TextColor="White"/>

                                                    <Label FontSize="17" FontAttributes="Bold" 
                                                    Text="" TextColor="White" 
                                                    HorizontalTextAlignment="Center"  VerticalTextAlignment="Center" />
                                                </HorizontalStackLayout>
                                            </StackLayout>

                                            <!--Passengers-->
                                            <CollectionView EmptyView="No Results found" x:Name="" ItemsSource="" >
                                                <CollectionView.ItemTemplate>
                                                    <DataTemplate x:DataType="">
                                                            <Grid VerticalOptions="FillAndExpand" Padding="0,0">
                                                        <Frame BackgroundColor="white" x:Name="Parent" BorderColor="White" CornerRadius="0" Margin="0,3"
                                               HasShadow="True" HeightRequest="78" Padding="10" >
                                                            <Frame.Triggers>
                                                                <MultiTrigger TargetType="Frame">
                                                                    <MultiTrigger.Conditions>
                                                                        <BindingCondition Binding="" Value="ECA" />
                                                                        <BindingCondition Binding="" Value="True" />
                                                                    </MultiTrigger.Conditions>
                                                                    <Setter Property="IsVisible" Value="True" />
                                                                    <!--<Setter Property="BackgroundColor" Value="Gray" />-->
                                                                </MultiTrigger>
                                                                <MultiTrigger TargetType="Frame">
                                                                    <MultiTrigger.Conditions>
                                                                        <BindingCondition Binding="" Value="ECA" />
                                                                        <BindingCondition Binding="" Value="True" />
                                                                    </MultiTrigger.Conditions>
                                                                    <Setter Property="IsVisible" Value="True" />
                                                                    <!--<Setter Property="BackgroundColor" Value="Gray" />-->
                                                                </MultiTrigger>
                                                                <MultiTrigger TargetType="Frame">
                                                                    <MultiTrigger.Conditions>
                                                                        <BindingCondition Binding="" Value="ECA" />
                                                                        <BindingCondition Binding="" Value="False" />
                                                                    </MultiTrigger.Conditions>
                                                                    <Setter Property="IsVisible" Value="False" />
                                                                    <!--<Setter Property="BackgroundColor" Value="Red" />-->
                                                                </MultiTrigger>

                                                            </Frame.Triggers>

                                                            <Frame.GestureRecognizers>
                                                                <TapGestureRecognizer Command=""
                                                     NumberOfTapsRequired="1" CommandParameter="" />
                                                            </Frame.GestureRecognizers>
                                                            <!--Image-->
                                                            <Grid ColumnDefinitions="Auto,*,Auto" Margin="-5" >
                                                                <Border Grid.Column="0" WidthRequest="70" HeightRequest="70" Stroke="White" StrokeShape="Ellipse" Margin="0,10" >
                                                                    <Image Aspect="AspectFill" Source=""/>
                                                                </Border>
                                                                <!--Name and Id-->
                                                                <VerticalStackLayout Grid.Column="1" VerticalOptions="Start">
                                                                    <Label x:Name="PassengerName" TextColor="black" HeightRequest="30" Text="" FontSize="15"/>
                                                                    <Label x:Name="PassengerId" Text="" TextColor="Grey" />

                                                                </VerticalStackLayout>
                                                                <!--Status-->
                                                                <Frame x:Name="radioBtn" Grid.Column="2" CornerRadius="{OnPlatform Android='30', iOS='22' }"  BackgroundColor="White" 
                                                               WidthRequest="45" HeightRequest="45" Margin="10,0" BorderColor="LightGrey">
                                                                    <Frame.Triggers>
                                                                        <DataTrigger TargetType="Frame" Binding="{Binding IsPickupCompleted}" Value="True">
                                                                            <Setter Property="BackgroundColor" Value="#80C551" />
                                                                            <Setter Property="BorderColor" Value="#80C551" />
                                                                        </DataTrigger>
                                                                        <DataTrigger TargetType="Frame" Binding="{Binding IsPickupCompleted}" Value="False">
                                                                            <Setter Property="BackgroundColor" Value="White" />
                                                                            <Setter Property="BorderColor" Value="LightGray" />
                                                                        </DataTrigger>
                                                                    </Frame.Triggers>
                                                                    <Label Text="" FontSize="20" FontAttributes="Bold" VerticalTextAlignment="Center"
                                                                   HorizontalTextAlignment="Center" WidthRequest="30" HeightRequest="30" 
                                                                   TextColor="White" Padding="0,-1,0,0" >
                                                                        <Label.Triggers>
                                                                            <DataTrigger TargetType="Label" Binding="" Value="True">
                                                                                <Setter Property="FontSize" Value="30" />
                                                                                <Setter Property="FontFamily" Value="Icons" />
                                                                                <Setter Property="Text" Value="{x:Static model:Icons.Bus}" />
                                                                            </DataTrigger>
                                                                            <DataTrigger TargetType="Label" Binding="" Value="False">
                                                                                <Setter Property="Text" Value="" />
                                                                            </DataTrigger>
                                                                        </Label.Triggers>
                                                                    </Label>
                                                                    <Frame.GestureRecognizers>
                                                                        <TapGestureRecognizer Command="" 
                                                                                      CommandParameter="{x:Reference radioBtn}" NumberOfTapsRequired="1"/>
                                                                        <!--<TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped" />-->
                                                                    </Frame.GestureRecognizers>
                                                                </Frame>

                                                            </Grid>

                                                        </Frame>
                                                                </Grid>
                                                    </DataTemplate>
                                                </CollectionView.ItemTemplate>
                                            </CollectionView>
                                        </VerticalStackLayout>

                                        </Grid>
                                       </DataTemplate>
                                </CollectionView.ItemTemplate>
                            </CollectionView>
                        </VerticalStackLayout>
                    </VerticalStackLayout>
                </VerticalStackLayout>
                <VerticalStackLayout Margin="20,10,20,20" VerticalOptions="EndAndExpand">
                    <Button ImageSource="directions_walk.svg" Text="{local:Translate Common_DropOff}" BackgroundColor="#FFB82B" TextColor="White" ContentLayout="left,0"  Command=""/>
                </VerticalStackLayout>
                <!--Dropoff Button-->

            </StackLayout>
        </ScrollView>
        <HorizontalStackLayout  BackgroundColor="White" Grid.Row="1" VerticalOptions="End">
            <locals:BottomNavigation />
        </HorizontalStackLayout>
    </StackLayout>

</ContentPage>

Link to public reproduction project repository

No response

Version with bug

7.0.96

Is this a regression from previous behavior?

Yes, this used to work in .NET MAUI

Last version that worked well

7.0.96

Affected platforms

iOS

Affected platform versions

all iOS versions

Did you find any workaround?

No response

Relevant log output

No response

samhouts commented 10 months ago

You mentioned that this is a regression. What version was this working in? If you update to 8.0.3, does it look better? Thanks!

ghost commented 10 months ago

Hi @san1109. We have added the "s/needs-info" label to this issue, which indicates that we have an open question for you before we can take further action. This issue will be closed automatically in 7 days if we do not hear back from you by then - please feel free to re-open it if you come back to this issue after that time.

ghost commented 10 months ago

This issue has been automatically marked as stale because it has been marked as requiring author feedback but has not had any activity for 4 days. It will be closed if no further activity occurs within 3 days of this comment. If it is closed, feel free to comment when you are able to provide the additional information and we will re-investigate.