CollectionView does not select an element with a Frame as DataTemplate

[hprez21]

Description

When you have a selection mode other than None, and a DataTemplate with a Frame, it is not possible to select one of the elements by clicking on the content of the frame, only outside the Frame control.

Steps to Reproduce

1.- Create a new .NET MAUI project. 2.- Remove default content. 3.- In the XAML file:

<CollectionView SelectionMode="Single">
        <CollectionView.ItemsSource>
            <x:Array Type="{x:Type x:String}">
                <x:String>mono</x:String>
                <x:String>monodroid</x:String>
                <x:String>monotouch</x:String>
                <x:String>monorail</x:String>
                <x:String>monodevelop</x:String>
                <x:String>monotone</x:String>
                <x:String>monopoly</x:String>
                <x:String>monomodal</x:String>
                <x:String>mononucleosis</x:String>
            </x:Array>
        </CollectionView.ItemsSource>
        <CollectionView.ItemTemplate>
            <DataTemplate>
                <Frame Margin="5">
                    <Label Text="{Binding .}" />
                </Frame>
            </DataTemplate>
        </CollectionView.ItemTemplate>
    </CollectionView>

Test the application. 5.- Try to select an element, and see that it is only possible to do it by clicking outside the Frame border.

Version with bug

6.0.400 (current)

Last version that worked well

Unknown/Other

Affected platforms

Android, I was not able test on other platforms

Affected platform versions

Android 10

Did you find any workaround?

The selection occurs well without a Data Template.

Relevant log output

No response

[kristinx0211]

verified repro on android with above project.

[ghost]

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.

[myrup]

Verified with maui-android 7.0.58/7.0.100.

[dolessapps]

Hi, another workaround is to place a button with no background and select in code behind when button is clicked. You can bind the item in button command parameter. Works on android.

[myrup]

Frame is apparently there for legacy reasons. Consider using Border instead (untested).

[XamlTest]

Verified this on Visual Studio Enterprise 17.7.0 Preview 1.0. Repro on Android 13.0 with below Project: MauiApp6.zip

[vr4guid]

It doesn't appear that there have been any progress on this issue which is nearly a year old. Can we expect this to be assigned a target release?

[sbkrishnan2506]

I am seeing this issue with .Net 7 with latest visual studio, Any update or workaround for this issue will be very helpful.

[C0D3Name]

This issue hasn't seen any progress. If Frame is deprecated (MSDN documentation mentions it is), it should be clearly identified as such in the code with the [Obsolete] attribute with a message stating to only use in older Xamarin applications, and referencing Border as the preferred control.

I just spent the morning trying to determine why a simple command wasn't firing when tapping on the content. I accidentally clicked in the corner region and realized it was the Frame content which brought me here. This is a pretty big waste of time for a known bug related to a core component of the .NET MAUI framework.

[echolumaque]

The workaround for this is to use Border. Perhaps MSFT should add the [Obsolete] attribute so that future developers are aware about this issue? Thanks to @myrup for this workaround.

[rupisaini123]

Using Border worked for android. But not working on Mac. Is there any workaround for mac? --Update I tried again, I found out that i have hold the click for atleast 3 seconds in order to change the selection.

[Elmigo]

Managed to reproduce this exact issue but slightly different.<CollectionView> within a <Frame> within a <VerticalStackLayout>** causes this issue for me. When I do not put the Frame in a VerticalStackLayout everything works fine.

[freezersharp]

Managed to reproduce this exact issue but slightly different.<CollectionView> within a <Frame> within a <VerticalStackLayout>** causes this issue for me. When I do not put the Frame in a VerticalStackLayout everything works fine.

I use a grid and the issue persists.

in fact, we are in sept 2023... :/

[echolumaque]

Managed to reproduce this exact issue but slightly different.<CollectionView> within a <Frame> within a <VerticalStackLayout>** causes this issue for me. When I do not put the Frame in a VerticalStackLayout everything works fine.

I use a grid and the issue persists.

in fact, we are in sept 2023... :/

Nothing new here 🤣

[LennoxP90]

Don't worry when it doesn't get fixed in .NET 8 MAUI release (November 2023), we will get the perpetual answer of, "just wait till .NET 9 (November 2024)"

[CedreLo]

using focused event and a grid work for me with MVVM 👍

<CollectionView x:Name="myCollection"
    ItemSizingStrategy="MeasureAllItems"
    ItemsSource="{Binding AvailableNetworks}"
    SelectedItem="{Binding SelectedNetwork}"
    SelectionMode="Single">
    <CollectionView.ItemsLayout>
        <LinearItemsLayout ItemSpacing="0" Orientation="Vertical" />
    </CollectionView.ItemsLayout>
    <CollectionView.ItemTemplate>
        <DataTemplate>
            <Grid Focused="OnGridFocused"
            ...

and

 private void OnGridFocused(object sender, FocusEventArgs e)
 {
     if (_viewModel != null && sender != null && sender is Grid)
     {
         var myGrid = sender as Grid;
         if (myGrid != null && myGrid.BindingContext != null)
         {
             var myNetwork = myGrid.BindingContext as NetworkModel;
             if (myNetwork != null)
             {
                 _viewModel.SelectedNetwork = myNetwork;
                 myCollection.SelectedItem = myNetwork;
             }
         }
     }
 }

[SamuelBachar]

Still problem even with Border. Tapgesturerecognizer do not works for iOS., .NET 7, Microsoft Visual Studio Community 2022 (64-bit) - Current Version 17.7.5

[SamuelBachar]

I fixed my issue of not Invoking TapgestureRecognize Event by deleting Grid which was wrapping whole Page View. Maybe this might help to some one

.NET 7, Microsoft Visual Studio Community 2022 (64-bit) 17.7.5, iOS deploy to device

_iOSRuntimeIdentifier: ios-arm64, IsHotRestartBuild: True architecture: ARMv6, ARMv7, ARMv7s, ARM64 Model: iPhone 12,1 Os-Version: 16.1 OS: iOS

**<Grid>**  -> this I have deleted
  <ScrollView>
    <CollectionView>
      <CollectionView.ItemTemplate>
        <DataTemplate>
          <Border>
             <Grid>
               <Image />
               <Label />
             </Grid>
         </Border>
         <Border.GestureRecognizers>
            <TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped123" CommandParameter="{Binding .}" />
         </Border.GestureRecognizers>
      </DataTemplate>
   </CollectionView.ItemTemplate>
</CollectionView>
</ScrollView>
**</Grid>**  -> this I have deleted

[PureWeen]

If you set InputTransparent to True on the Frame this works now

[ghost]

Hi @hprez21. We have added the "s/try-latest-version" label to this issue, which indicates that we'd like you to try and reproduce this issue on the latest available public version. This can happen because we think that this issue was fixed in a version that has just been released, or the information provided by you indicates that you might be working with an older version.

You can install the latest version by installing the latest Visual Studio (Preview) with the .NET MAUI workload installed. If the issue still persists, please let us know with any additional details and ideally a reproduction project provided through a GitHub repository.

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.