Customizable Flyout or Flyout for MenuItem

[nextcodelab]

Summary

The ToolbarItem in Xamarin Forms is not really customizable, you cannot change background color without pain and does not really support svg icons and path data geometry. I hope this features will be added to MAUI Control. So that we can fully customize the look and show flyout at any position of screen. Here is the sample for UWP Xaml Flyout.

Intended Use Case

<Grid x:Name="rootGrid">
 <Flyout x:Name="searchFlyout">
                                <Grid>
                                    <Grid.RowDefinitions>
                                        <RowDefinition Height="auto" />
                                        <RowDefinition Height="auto" />
                                    </Grid.RowDefinitions>
                                    <TextBox
                                        x:Name="searchtbx"
                                        Width="200"
                                        PlaceholderText="{Binding SearchIconsPlaceHolder}"
                                        Style="{StaticResource TextBoxStyleTransparent}" />
                                    <Grid Grid.Row="1">
                                        <Grid.RowDefinitions>
                                            <RowDefinition Height="auto" />
                                            <RowDefinition Height="auto" />
                                        </Grid.RowDefinitions>
                                        <ListView
                                            x:Name="searchListView"
                                            Width="200"
                                            MaxHeight="450"
                                            IsItemClickEnabled="True"
                                            SelectionMode="Single">
                                            <ListView.ItemTemplate>
                                                <DataTemplate>
                                                    <Grid ToolTipService.ToolTip="{Binding Name}">
                                                        <Grid.ColumnDefinitions>
                                                            <ColumnDefinition Width="20" />
                                                            <ColumnDefinition Width="auto" />
                                                        </Grid.ColumnDefinitions>

                                                        <Grid
                                                            Margin="0"
                                                            VerticalAlignment="Center"
                                                            ToolTipService.ToolTip="{Binding Name}">
                                                            <Path
                                                                xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                                                                Width="20"
                                                                Height="20"
                                                                Data="{Binding Data}"
                                                                Fill="{ThemeResource SystemControlForegroundBaseHighBrush}"
                                                                IsRightTapEnabled="True"
                                                                Stretch="Uniform" />
                                                            <Path
                                                                xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                                                                Width="20"
                                                                Height="20"
                                                                Data="{Binding Data}"
                                                                Fill="{Binding IconColor}"
                                                                IsRightTapEnabled="True"
                                                                Stretch="Uniform" />
                                                        </Grid>
                                                        <TextBlock
                                                            Grid.Column="1"
                                                            Margin="10,0,0,0"
                                                            VerticalAlignment="Center"
                                                            Text="{Binding Name}"
                                                            TextWrapping="NoWrap" />
                                                    </Grid>
                                                </DataTemplate>
                                            </ListView.ItemTemplate>
                                        </ListView>
                                        <HyperlinkButton
                                            x:Name="moreBttn"
                                            Grid.Row="1"
                                            HorizontalAlignment="Center"
                                            Command="{x:Bind SearchMoreCommand}"
                                            Content="{x:Bind MoreResultsLabel}"
                                            ToolTipService.ToolTip="{x:Bind MoreResultsLabel}"
                                            Visibility="Collapsed" />
                                    </Grid>
                                </Grid>
                            </Flyout>
</Grid>

Show to the specific position by finding the ui location.

private void iconDataGrid_RightTapped(object sender, RightTappedRoutedEventArgs e)
        {
            var data = (sender as FrameworkElement).DataContext;
            if (data != null && data is PathIcon)
            {
                var tappedItem = (UIElement)e.OriginalSource;
                var attachedFlyout = (Flyout)FlyoutBase.GetAttachedFlyout(this.rootGrid);
                attachedFlyout.ShowAt(tappedItem, e.GetPosition(tappedItem));
            }

        }

Results

[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.