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.26k stars 1.76k forks source link

CollectionView SelectionChanged not working when item is in Frame #15016

Open janseris opened 1 year ago

janseris commented 1 year ago

Description

SelectionChanged command is not called when Frame is in CollectionView item template. MAUI 7.0.81

<CollectionView ItemsSource="{Binding DiscoveredBeacons}" Margin="10"
                        SelectionMode="Single" SelectedItem="{Binding Selected}" SelectionChangedCommand="{Binding SelectedItemChangedCommand}"
                        >
            <CollectionView.ItemsLayout>
                <LinearItemsLayout ItemSpacing="5" Orientation="Vertical" />
            </CollectionView.ItemsLayout>

            <CollectionView.ItemTemplate>
                <DataTemplate x:DataType="kontrolniBody:KontrolniBod">
                    <Frame BackgroundColor="{StaticResource Secondary}" 
                                   Padding="10, 5" CornerRadius="10" >

                        <Grid ColumnDefinitions="*, *, *, *, *, *, *, *, *, *, *, *" RowDefinitions="Auto">

                            <!-- Row 1 (ID, Nazev, MAC) -->
                            <Label Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="1" 
                                   VerticalTextAlignment="Center" HorizontalTextAlignment="Center"
                                   Text="{x:Static fonts:MaterialIconsFont.Identifier}" FontFamily="MaterialIcons" FontSize="Large" />

                            <Label Grid.Row="0" Grid.Column="1" Grid.ColumnSpan="1" 
                                   VerticalTextAlignment="Center" HorizontalTextAlignment="Center"
                                   Text="{Binding ID}" />

                            <BoxView Grid.Row="0" Grid.Column="2" WidthRequest="1" HeightRequest="20" BackgroundColor="Gray" />

                            <Label Grid.Row="0" Grid.Column="3" Grid.ColumnSpan="3" 
                                   VerticalTextAlignment="Center" HorizontalTextAlignment="Start"
                                   Text="{Binding Nazev}" />

                            <BoxView Grid.Row="0" Grid.Column="6" WidthRequest="1" HeightRequest="20" BackgroundColor="Gray" />

                            <Label Grid.Row="0" Grid.Column="7" Grid.ColumnSpan="5" VerticalTextAlignment="Center"
                                   Text="{Binding Identifikator}" />
                        </Grid>
                    </Frame>

                </DataTemplate>
            </CollectionView.ItemTemplate>

            <CollectionView.EmptyView>
                Žádné záznamy k dispozici
                <!-- BUG: UI element content doesn't work on Android: https://github.com/dotnet/maui/issues/10819: -->
                <!-- <Label Text="No items" />-->
            </CollectionView.EmptyView>
        </CollectionView>

ViewModel:

partial class KontrolniBodyViewModel
    {
        /// <summary>The backing field for <see cref="SelectedItemChangedCommand"/>.</summary>
        [global::System.CodeDom.Compiler.GeneratedCode("CommunityToolkit.Mvvm.SourceGenerators.RelayCommandGenerator", "8.1.0.0")]
        private global::CommunityToolkit.Mvvm.Input.AsyncRelayCommand? selectedItemChangedCommand;
        /// <summary>Gets an <see cref="global::CommunityToolkit.Mvvm.Input.IAsyncRelayCommand"/> instance wrapping <see cref="SelectedItemChanged"/>.</summary>
        [global::System.CodeDom.Compiler.GeneratedCode("CommunityToolkit.Mvvm.SourceGenerators.RelayCommandGenerator", "8.1.0.0")]
        [global::System.Diagnostics.CodeAnalysis.ExcludeFromCodeCoverage]
        public global::CommunityToolkit.Mvvm.Input.IAsyncRelayCommand SelectedItemChangedCommand => selectedItemChangedCommand ??= new global::CommunityToolkit.Mvvm.Input.AsyncRelayCommand(new global::System.Func<global::System.Threading.Tasks.Task>(SelectedItemChanged));
    }
 [RelayCommand]
        async Task SelectedItemChanged()
        {
            if (Selected is null)
            {
                return;
            }
            if (SendingResultToDB)
            {
                return;
            }
            int beaconID = Selected.ID;
            //unselect for next page visit (makes user stuck when there is only 1 item)
            Selected = null;
            ... etc
        }

When you comment out the Frame, the command starts running (breakpoint is hit etc.) on selection changed.

Edit: I had to remove Frame in all places where I wanted SelectionChanged work in CollectionView item template.

Steps to Reproduce

Click collectionview with the item template

Link to public reproduction project repository

none

Version with bug

7.0 (current)

Last version that worked well

Unknown/Other

Affected platforms

Android, I was not able test on other platforms

Affected platform versions

Android 12

Did you find any workaround?

No response

Relevant log output

No response

mattleibow commented 1 year ago

@PureWeen thoughts?

ghost commented 1 year ago

We've added this issue to our backlog, and we will work to address it as time and resources allow. If you have any additional information or questions about this issue, please leave a comment. For additional info about issue management, please read our Triage Process.

echolumaque commented 1 year ago

Verified that this still exists in the latest version of MAUI, Any updates? @PureWeen @mattleibow. Must be related to this: https://github.com/dotnet/maui/issues/8416

axeldietz commented 10 months ago

Still an issue. .NET8

vishalpr-hs commented 10 months ago

I am still experiencing this problem. Do you have any solutions or suggestions that could help me resolve it?

andersondamasio commented 10 months ago

I'm also having this problem, any alternative suggestions?

jl-mobitech commented 10 months ago

@axeldietz, @vishalpr-hs, @andersondamasio, try using Border instead of Frame as I believe Frame is being deprecated on MAUI: https://learn.microsoft.com/en-us/dotnet/maui/user-interface/controls/frame?view=net-maui-8.0#:~:text=If%20you%27re%20building%20a%20new%20.NET%20MAUI%20app%20it%27s%20recommended%20to%20use%20Border%20instead

andersondamasio commented 10 months ago

Hello, thanks @jl-mobitech

I changed it to Border, but if I use StrokeShape="RoundRectangle 40,40,40,40" for rounding , the page is displayed blank for some reason.

In this case, to round the edges I used a custom Behavior instead of "RoundRectangle" and resolved it to min.

I believe that the StrokeShape must be some secondary problem.

I'm using .net 8 Maui

Zhanglirong-Winnie commented 10 months ago

Verified this issue with Visual Studio Enterprise 17.9.0 Preview 2.1. Can repro on Android platforms with above code. It works fine on Windows and iOS platforms.