inabox/InABox.Mobile/InABox.Mobile.Shared/Components/MobileMenuButton/MobileMenuButtonMenu.xaml

<?xml version="1.0" encoding="utf-8"?>

<ContentView xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:mobile="clr-namespace:InABox.Mobile;assembly=InABox.Mobile.Shared"
             xmlns:views="http://xamarin.com/schemas/2020/toolkit"
             x:Class="InABox.Mobile.MobileMenuButtonMenu">
    
    <ContentView.Resources>
        <mobile:MobileMenuButtonMenuImagePositionConverter x:Key="ImagePositionConverter" />
        <DataTemplate 
            x:DataType="mobile:MobileMenuItem" x:Key="ItemTemplate">
                <views:DockLayout
                    IsVisible="{Binding IsVisible}"
                    HorizontalOptions="Fill"
                    Grid.Row="{Binding Index}">
                    <Image 
                        views:DockLayout.Dock="{Binding ImagePosition, Source={x:Reference _viewModel}, Converter={StaticResource ImagePositionConverter}}" 
                        Source="{Binding Image}"
                        IsVisible="{Binding ShowImages, Source={x:Reference _viewModel}}"
                        Aspect="AspectFit"
                        HeightRequest="20"
                        WidthRequest="20"
                        Margin="2">
                        
                        <Image.GestureRecognizers>
                            <TapGestureRecognizer Tapped="TapGestureRecognizer_OnTapped" />
                        </Image.GestureRecognizers> 
                        
                    </Image>
                    
                    <Label
                        views:DockLayout.Dock="Left"
                        Text="{Binding Text}" 
                        VerticalOptions="CenterAndExpand" 
                        HorizontalOptions="Fill" 
                        HorizontalTextAlignment="Start"
                        VerticalTextAlignment="Center"
                        FontSize="Small"
                        Padding="2,5,2,2"
                        TextColor="Black">
                        
                        <Label.GestureRecognizers>
                            <TapGestureRecognizer Tapped="TapGestureRecognizer_OnTapped" />
                        </Label.GestureRecognizers>    
                        
                    </Label>
                    
                </views:DockLayout>
            </DataTemplate>
        
        <DataTemplate x:Key="SeparatorTemplate" x:DataType="mobile:MobileMenuSeparator">
            <BoxView
                HeightRequest="1"
                VerticalOptions="Center"
                HorizontalOptions="Fill"
                IsVisible="{Binding IsVisible}"
                BackgroundColor="Gray"
                Grid.Row="{Binding Index}"
                Opacity="0.5"
                Margin="2,5,2,2"/>
        </DataTemplate>
        
        <mobile:MobileMenuButtonTemplateSelector x:Key="ItemTemplateSelector" Item="{StaticResource ItemTemplate}" Separator="{StaticResource SeparatorTemplate}" />
        
    </ContentView.Resources>
    
    <ContentView.BindingContext>
        <mobile:MobileMenuButtonMenuViewModel 
            x:Name="_viewModel" 
            LayoutChanged="_viewModel_OnLayoutChanged" 
            ItemClicked="_viewModel_OnItemClicked"/>
    </ContentView.BindingContext>
    
    <ContentView.Content>
        <Grid 
            x:Name="_menu" 
            VerticalOptions="StartAndExpand" 
            HorizontalOptions="StartAndExpand"
            Margin="2,5,-5,-2"
            RowSpacing="5"
            BindableLayout.ItemsSource = "{Binding VisibleItems}"
            BindableLayout.ItemTemplateSelector="{StaticResource ItemTemplateSelector}"
            >
            <BindableLayout.EmptyView>
                <Label 
                    FontSize="Small"
                    Text="(No Options)"
                    TextColor="Gray"/>
            </BindableLayout.EmptyView>
            
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto"/>
            </Grid.ColumnDefinitions>
            
        </Grid>
    </ContentView.Content>
</ContentView>