ARTICLE AD BOX
I am building a .NET MAUI 10 app to support Android, iOS and Windows. I am also using the MVVM Community Toolkit. I have an Orders page containing a CollectionView, and the direction I was given is as follows:
On iOS, add a left-swipe to show a Delete command and a show an Accessory Detail button for displaying an Edit Order page. Row tap will navigate to an Order Details page showing the individual items for the order.
On Android and Windows, show an overflow button (3 vertical dots) for each row. Tapping the overflow button should display a menu with options for Edit and Delete. Row tap will navigate to an Order Details page showing the individual items for the order.
I am awaiting access to a Mac to test the iOS behavior. While running this on the debugger for Windows, the menu works as expected by right-clicking the Overflow button. In the Android emulator, clicking the Overflow button is treated as a row tap and navigates to the Order Details page. How do I get the Overflow button to show the menu on Android? I tried adding a Clicked event handler to the button and using FlyoutBase.ShowAttachedFlyout(btn), but I get an error stating "'FlyoutBase' does not contain a definition for 'ShowAttachedFlyout'".
<CollectionView.ItemTemplate> <DataTemplate> <SwipeView> <!-- Left swipe: Delete --> <SwipeView.LeftItems> <SwipeItems Mode="Execute"> <SwipeItem Text="Delete" BackgroundColor="Red" Command="{Binding BindingContext.DeleteCommand, Source={x:Reference OrdersPageRoot}}" CommandParameter="{Binding .}" /> </SwipeItems> </SwipeView.LeftItems> <!-- Content of the item with accessory / overflow --> <Grid Padding="12" ColumnDefinitions="*, Auto"> <Label Text="{Binding OrderNumberDisplay}" Style="{StaticResource TitleLabelStyle}" /> <!-- Accessory for iOS --> <Button Grid.Column="1" Text="›" FontSize="18" BackgroundColor="Transparent" Padding="8" Command="{Binding BindingContext.EditCommand, Source={x:Reference OrdersPageRoot}}" CommandParameter="{Binding .}"> <Button.IsVisible> <OnPlatform x:TypeArguments="x:Boolean"> <On Platform="iOS" Value="True" /> <On Platform="Android" Value="False" /> <On Platform="WinUI" Value="False" /> </OnPlatform> </Button.IsVisible> </Button> <!-- Overflow for Android/Windows: shows flyout with Edit/Delete --> <Button Grid.Column="1" Style="{StaticResource OverflowMenuButtonStyle}" <Button.IsVisible> <OnPlatform x:TypeArguments="x:Boolean"> <On Platform="iOS" Value="False" /> <On Platform="Android" Value="True" /> <On Platform="WinUI" Value="True" /> </OnPlatform> </Button.IsVisible> <FlyoutBase.ContextFlyout> <MenuFlyout> <MenuFlyoutItem Text="Edit" Command="{Binding BindingContext.EditCommand, Source={x:Reference OrdersPageRoot}}" CommandParameter="{Binding .}" /> <MenuFlyoutItem Text="Delete" Command="{Binding BindingContext.DeleteCommand, Source={x:Reference OrdersPageRoot}}" CommandParameter="{Binding .}" /> </MenuFlyout> </FlyoutBase.ContextFlyout> </Button> </Grid> </SwipeView> </DataTemplate> </CollectionView.ItemTemplate>