In Frame Text and Image Not Fit and Collection View items not swipe correctly left or Right

[Vikas8881]

Description

Hi, Sorry I do have not the perfect title to describe the issue so I attached the screenshot and Git Repo with the Issue. and a Short Video

Tested on the Android Platform Emulator and Android Device & Windows Platform

Android Screenshot

Short Video Url https://user-images.githubusercontent.com/48914844/224401998-394e78d9-4b57-459e-a28d-ae8e1e66a154.mp4

Window Issue.

1. The image does not display in Windows Machine on the Content Page
2. Button does not fire the event. as I tested on the login Button
3. In the window it does not show any icons.

Note Windows mentioned issues working on the android platform

Desktop Screenshot `<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="RealStateAppMaui.Pages.HomePage" NavigationPage.HasNavigationBar="False"> <ScrollView>

    <Grid Margin="20" RowSpacing="20">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>

        <VerticalStackLayout Grid.Row="0" Spacing="5">
            <Label x:Name="lblUsername"
               FontSize="Large"/>
            <Label Text="Find your best place to stay"
               FontSize="Medium"/>
        </VerticalStackLayout>

        <Frame Grid.Row="1" Padding="15">
            <HorizontalStackLayout Spacing="20">
                <Image Source="search_icon"
                   Aspect="AspectFit"
                   HeightRequest="25"
                   WidthRequest="25"/>
                <Label Text="Search..."
                   VerticalOptions="Center"/>
            </HorizontalStackLayout>
            <!--<Frame.GestureRecognizers>
                <TapGestureRecognizer x:Name="TapSearch" Tapped="TapSearch_Tapped"/>
            </Frame.GestureRecognizers>-->
        </Frame>

        <VerticalStackLayout Grid.Row="2" Spacing="20">
            <Label Text="Categories"
               FontSize="Large"/>
            <CollectionView x:Name="CvCategories"
                        HeightRequest="50"
                        SelectionMode="Single"
                        SelectionChanged="CvCategories_SelectionChanged">
                <CollectionView.ItemsLayout>
                    <LinearItemsLayout ItemSpacing="20" Orientation="Horizontal"/>
                </CollectionView.ItemsLayout>
                <CollectionView.ItemTemplate>
                    <DataTemplate>
                        <Frame>
                            <HorizontalStackLayout Spacing="5">
                                <Image Aspect="AspectFit"
                                       HeightRequest="30"
                                       WidthRequest="30"
                                       Source="{Binding FullImageUrl}"/>
                                <Label VerticalOptions="Center"
                                       FontSize="Medium"
                                       Text="{Binding Name}"/>
                            </HorizontalStackLayout>
                        </Frame>
                    </DataTemplate>
                </CollectionView.ItemTemplate>
            </CollectionView>
        </VerticalStackLayout>

        <VerticalStackLayout Grid.Row="3" Spacing="20">
            <Label Text="Top Picks"
               FontSize="Large"/>
            <CollectionView x:Name="CvTopPicks"
                        HeightRequest="350"
                        SelectionMode="Single">
                <!--SelectionChanged="CvTopPicks_SelectionChanged"-->
                <CollectionView.ItemsLayout>
                    <LinearItemsLayout ItemSpacing="20" Orientation="Horizontal"/>
                </CollectionView.ItemsLayout>
                <CollectionView.ItemTemplate>
                    <DataTemplate>
                        <Frame CornerRadius="25"
                               Padding="15"
                               BackgroundColor="White">
                            <Grid RowSpacing="5">
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="Auto"/>
                                    <RowDefinition Height="Auto"/>
                                    <RowDefinition Height="Auto"/>
                                    <RowDefinition Height="Auto"/>
                                </Grid.RowDefinitions>
                                <Frame Grid.Row="0"
                                       HeightRequest="200"
                                       WidthRequest="250"
                                       CornerRadius="25"
                                       Padding="0"
                                       IsClippedToBounds="True">
                                    <Image Source="{Binding FullImageUrl}"
                                           Aspect="Fill"/>
                                </Frame>
                                <Label Grid.Row="1"
                                       FontSize="Subtitle"
                                       Text="{Binding Name}"/>
                                <Label Grid.Row="2"
                                       FontSize="Small"
                                       WidthRequest="250"
                                       LineBreakMode="TailTruncation"
                                       Text="{Binding Address}"/>
                                <Label Grid.Row="3"
                                       FontSize="Subtitle"
                                       TextColor="#1d94ab"
                                       Text="{Binding Price}"/>
                            </Grid>
                        </Frame>
                    </DataTemplate>
                </CollectionView.ItemTemplate>
            </CollectionView>
        </VerticalStackLayout>
    </Grid>
</ScrollView>

</ContentPage>`

Steps to Reproduce

1. Create the Project MAUI
2. Create Pages using XAML Content Pages.
3. Consume the API
4. Create a Vertical Layout and use the Collection View item template and use the frame in data template to display the resource image and text

That's All

Link to public reproduction project repository

https://github.com/Vikas8881/RealEstateMaui

Version with bug

7.0 (current)

Last version that worked well

7.0 (current)

Affected platforms

Android

Affected platform versions

Android API 33 Emulator and Android Version 12 Physical Device

Did you find any workaround?

No response

Relevant log output

No response