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.19k stars 1.74k forks source link

CarouselView does not behave correctly on Windows. #12358

Closed pitasoft closed 1 year ago

pitasoft commented 1 year ago

Description

An application has been made that uses CarouselView, where you can see in the following images the behavior on the different platforms, where on Windows there is an incorrect behavior.

macOS (correct)

Captura de pantalla 2022-12-30 a las 19 50 52

iOS (correct)

Captura de pantalla 2022-12-30 a las 19 57 29

Android (correct)

Captura de pantalla 2022-12-30 a las 20 01 54

Windows (incorrect)

Captura de pantalla 2022-12-30 a las 20 03 27

Steps to Reproduce

The page code is attached.

<?xml version="1.0" encoding="utf-8" ?>
<pages:TaskPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
                xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                x:Class="AgroFrost.Pages.WeatherPage"
                xmlns:pages="clr-namespace:Pitasoft.Maui.Shell.Pages;assembly=Pitasoft.Maui.Shell"
                xmlns:controls="clr-namespace:Pitasoft.Maui.Controls;assembly=Pitasoft.Maui"
                xmlns:viewmodels="clr-namespace:AgroFrost.ViewModels"
                xmlns:converters="clr-namespace:AgroFrost.Converters"
                xmlns:smartdatamodel="clr-namespace:AgroFrost.SmartDataModels;assembly=AgroFrost.SmartDataModels"
                x:DataType="viewmodels:WeatherViewModel">
    <pages:TaskPage.Resources>
        <ResourceDictionary>
            <converters:BooleanAttributeToBoolConverter x:Key="BooleanAttributeToBoolConverter"/>
            <converters:AlertToColorConverter x:Key="AlertToColorConverter" NoAlert="{StaticResource NoAlertColor}" Alert1H="{StaticResource Alert1HColor}" Alert2H="{StaticResource Alert2HColor}"/>
            <converters:UtcToLocalDateConverter x:Key="UtcToLocalDateConverter"/>
            <converters:AgriFarmToWeatherIconUrlConverter x:Key="AgriFarmToWeatherIconUrlConverter"/>
            <converters:AgriFarmToWeatherConditionDescriptionConverter x:Key="AgriFarmToWeatherConditionDescriptionConverter"/>
        </ResourceDictionary>
    </pages:TaskPage.Resources>
    <pages:TaskPage.ToolbarItems>
        <ToolbarItem Text="Refresh" 
                     IconImageSource="refresh.png" 
                     Order="Primary" 
                     Command="{Binding RefreshDataCommand}"/>
        <ToolbarItem Text="Evolution" 
                     IconImageSource="chart.png" 
                     Order="Primary" 
                     Command="{Binding ChartCommand}"/>
    </pages:TaskPage.ToolbarItems>
    <pages:TaskPage.WorkingContent>
        <controls:Working IsBusy="{Binding IsBusy}" 
                          HorizontalOptions="FillAndExpand"
                          VerticalOptions="CenterAndExpand"/>
    </pages:TaskPage.WorkingContent>
    <pages:TaskPage.MainContent>
        <Grid RowDefinitions="Auto,*,Auto" RowSpacing="10">
            <Label Text="{Binding LastUpdated, Mode=OneWay, Converter={StaticResource UtcToLocalDateConverter}, StringFormat='Last updated {0}'}"
                   FontSize="Micro"
                   BackgroundColor="{StaticResource Gray200}"
                   HorizontalOptions="Fill"
                   HorizontalTextAlignment="End"
                   Padding="15,2"/>
            <CarouselView Grid.Row="1"
                          Margin="5" 
                          ItemsSource="{Binding Farms, Mode=OneWay}"
                          CurrentItem="{Binding SelectedFarm, Mode=TwoWay}"
                          IndicatorView="indicatorView">
                <CarouselView.EmptyView>
                    <StackLayout Padding="100">
                        <Image HorizontalOptions="CenterAndExpand"
                               VerticalOptions="CenterAndExpand"
                               Aspect="AspectFit"
                               Source="empty.png"
                               HeightRequest="300"
                               WidthRequest="300"/>
                    </StackLayout>
                </CarouselView.EmptyView>
                <CarouselView.ItemTemplate>
                    <DataTemplate x:DataType="smartdatamodel:AgriFarm">
                        <Grid RowDefinitions="0.1*,0.1*,0.8*"
                              Margin="5,0,5,0"                              
                              VerticalOptions="FillAndExpand"
                              HorizontalOptions="FillAndExpand">
                            <Border Grid.Row="1" 
                                    Grid.RowSpan="3" 
                                    Background="{StaticResource Gray100}"
                                    StrokeShape="RoundRectangle 10,10,10,10"
                                    Padding="5,60,5,5">
                                <Grid RowDefinitions="0.2*,0.2*,0.18*,0.18*,0.18*,0.06*"
                                      ColumnDefinitions="0.5*,0.5*">
                                    <Label Grid.Row="0"
                                           Grid.ColumnSpan="2"
                                           Text="{Binding Name.Value}" 
                                           HorizontalTextAlignment="Center" 
                                           FontSize="Large" 
                                           FontAttributes="Bold"
                                           LineBreakMode="WordWrap"
                                           MaxLines="2"/>
                                    <Label Grid.Row="1"
                                           Grid.ColumnSpan="2"
                                           Text="{Binding ., Converter={StaticResource AgriFarmToWeatherConditionDescriptionConverter}, Mode=OneWay}" 
                                           FontSize="Subtitle"
                                           LineBreakMode="WordWrap"
                                           MaxLines="2"
                                           HorizontalTextAlignment="Center"/>
                                    <StackLayout Grid.Row="2" Grid.Column="0">
                                        <Label Text="Temperature" FontSize="Small" HorizontalTextAlignment="Center"/>
                                        <Label HorizontalTextAlignment="Center">
                                            <Label.FormattedText>
                                                <FormattedString>
                                                    <Span Text="{Binding WeatherVariables.Value.Temperature, StringFormat='{}{0:N2}'}"
                                                          FontSize="Title"
                                                          FontAttributes="Bold"/>
                                                    <Span Text=" ºC" FontSize="Micro"/>
                                                </FormattedString>
                                            </Label.FormattedText>
                                        </Label>
                                    </StackLayout>
                                    <StackLayout Grid.Row="2" Grid.Column="1">
                                        <Label Text="Humidity" FontSize="Small" HorizontalTextAlignment="Center"/>
                                        <Label HorizontalTextAlignment="Center">
                                            <Label.FormattedText>
                                                <FormattedString>
                                                    <Span Text="{Binding WeatherVariables.Value.Humidity, StringFormat='{}{0:N0}'}"
                                                          FontSize="Title"
                                                          FontAttributes="Bold"/>
                                                    <Span Text=" %" FontSize="Micro"/>
                                                </FormattedString>
                                            </Label.FormattedText>
                                        </Label>
                                    </StackLayout>
                                    <StackLayout Grid.Row="3" Grid.Column="0">
                                        <Label Text="Wind speed" FontSize="Small" HorizontalTextAlignment="Center"/>
                                        <Label HorizontalTextAlignment="Center">
                                            <Label.FormattedText>
                                                <FormattedString>
                                                    <Span Text="{Binding WeatherVariables.Value.WindSpeed, StringFormat='{}{0:N2}'}"
                                                          FontSize="Title"
                                                          FontAttributes="Bold"/>
                                                    <Span Text=" m/sec" FontSize="Micro"/>
                                                </FormattedString>
                                            </Label.FormattedText>
                                        </Label>
                                    </StackLayout>
                                    <StackLayout Grid.Row="3" Grid.Column="1">
                                        <Label Text="Wind degrees" FontSize="Small" HorizontalTextAlignment="Center"/>
                                        <Label HorizontalTextAlignment="Center">
                                            <Label.FormattedText>
                                                <FormattedString>
                                                    <Span Text="{Binding WeatherVariables.Value.WindDeg, StringFormat='{}{0:N0}'}"
                                                          FontSize="Title"
                                                          FontAttributes="Bold"/>
                                                    <Span Text=" º" FontSize="Micro"/>
                                                </FormattedString>
                                            </Label.FormattedText>
                                        </Label>
                                    </StackLayout>
                                    <StackLayout Grid.Row="4" Grid.Column="0" Grid.ColumnSpan="2">
                                        <Label Text="Pressure" FontSize="Small" HorizontalTextAlignment="Center"/>
                                        <Label HorizontalTextAlignment="Center">
                                            <Label.FormattedText>
                                                <FormattedString>
                                                    <Span Text="{Binding WeatherVariables.Value.Pressure, StringFormat='{}{0:N0}'}"
                                                          FontSize="Title"
                                                          FontAttributes="Bold"/>
                                                    <Span Text=" hPa" FontSize="Micro"/>
                                                </FormattedString>
                                            </Label.FormattedText>
                                        </Label>
                                    </StackLayout>
                                    <Label Grid.Row="5" 
                                           Grid.ColumnSpan="2" 
                                           Text="{Binding WeatherVariables.Metadata.DateModified.Value, Converter={StaticResource UtcToLocalDateConverter}, StringFormat='Last updated {0}'}"
                                           HorizontalTextAlignment="End"
                                           VerticalOptions="Center"
                                           FontSize="Small"/>
                                </Grid>
                            </Border>
                            <Border Grid.Row="0" 
                                        Grid.RowSpan="2" 
                                        HorizontalOptions="Center" 
                                        VerticalOptions="Center"
                                    Background="White"
                                        StrokeShape="RoundRectangle 50,50,50,50">
                                <Border.Shadow>
                                    <Shadow Brush="Black" Offset="10,15" Radius="40" Opacity="0.20"/>
                                </Border.Shadow>
                                <Image Source="{Binding ., Converter={StaticResource AgriFarmToWeatherIconUrlConverter}, Mode=OneWay}" 
                                           HorizontalOptions="Center"
                                           VerticalOptions="Center" 
                                           HeightRequest="100" 
                                           WidthRequest="100" 
                                           Aspect="AspectFit"/>
                            </Border>
                        </Grid>
                    </DataTemplate>
                </CarouselView.ItemTemplate>
            </CarouselView>
            <IndicatorView x:Name="indicatorView"
                           Grid.Row="2"
                           HeightRequest="30"
                           IndicatorColor="{StaticResource Gray100}"
                           SelectedIndicatorColor="{StaticResource Primary}"
                           HorizontalOptions="Center" />
        </Grid>
    </pages:TaskPage.MainContent>
</pages:TaskPage>

Link to public reproduction project repository

There is no public repository.

Version with bug

7.0 (current)

Last version that worked well

Unknown/Other

Affected platforms

Windows

Affected platform versions

Windows 11

Did you find any workaround?

No response

Relevant log output

No response

ghost commented 1 year ago

Hi @pitasoft. We have added the "s/needs-repro" label to this issue, which indicates that we require steps and sample code to reproduce the issue before we can take further action. Please try to create a minimal sample project/solution or code samples which reproduce the issue, ideally as a GitHub repo that we can clone. See more details about creating repros here: https://github.com/dotnet/maui/blob/main/.github/repro.md

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 1 year ago

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 commented 1 year ago

This issue has been automatically marked as stale because it has been marked as requiring author feedback to reproduce the issue 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.