Added MobileMenuButtonMenu Images and Layout Options

InABox.Mobile/InABox.Mobile.Shared/Components/MobileMenuButton/MobileMenuButton.xaml.cs

@@ -10,7 +10,6 @@ using XF.Material.Forms.UI;
 namespace InABox.Mobile
 {
     
-    
     [XamlCompilation(XamlCompilationOptions.Compile)]
     public partial class MobileMenuButton
     {
@@ -43,6 +42,18 @@ namespace InABox.Mobile
             }
         }
         
+        public bool ShowImages
+        {
+            get => _menu.ShowImages;
+            set => _menu.ShowImages = value;
+        }
+
+        public MobileMenuButtonMenuImagePosition ImagePosition
+        {
+            get => _menu.ImagePosition;
+            set => _menu.ImagePosition = value;
+        }
+        
         public event MobileMenuButtonClickedEvent Clicked;
         
         public MobileMenuButton()
@@ -50,6 +61,7 @@ namespace InABox.Mobile
             _menu = new MobileMenuButtonMenu();
             _menu.ItemClicked += (sender,args) => _popup.Dismiss();
             InitializeComponent();
+            ShowImages = false;
             _popup = new SfPopupLayout();
             Position = RelativePosition.AlignToLeftOf;
         }

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

@@ -3,21 +3,84 @@
 <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"
-             x:Class="InABox.Mobile.MobileMenuButtonMenu" Padding="5">
+             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="0,5,0,0"
+            Margin="2,5,-5,-2"
             RowSpacing="5"
             BindableLayout.ItemsSource = "{Binding VisibleItems}"
+            BindableLayout.ItemTemplateSelector="{StaticResource ItemTemplateSelector}"
             >
             <BindableLayout.EmptyView>
                 <Label 
@@ -30,58 +93,6 @@
                 <ColumnDefinition Width="Auto"/>
             </Grid.ColumnDefinitions>
             
-            <BindableLayout.ItemTemplate>
-                <DataTemplate x:DataType="mobile:MobileMenuEntry">
-                    
-                    <StackLayout
-                        Orientation="Vertical"
-                        IsVisible="{Binding IsVisible}"
-                        HorizontalOptions="Fill"
-                        Grid.Row="{Binding Index}">
-                        
-                        <Label 
-                            Text="{Binding Text}" 
-                            VerticalOptions="CenterAndExpand" 
-                            HorizontalOptions="Fill" 
-                            HorizontalTextAlignment="Start"
-                            VerticalTextAlignment="Center"
-                            FontSize="Small"
-                            Padding="2,5,2,2"
-                            IsVisible="False"
-                            TextColor="Black">
-                            
-                            <Label.GestureRecognizers>
-                                <TapGestureRecognizer Tapped="TapGestureRecognizer_OnTapped" />
-                            </Label.GestureRecognizers>    
-                            
-                            <Label.Triggers>
-                                <DataTrigger TargetType="Label" Binding="{Binding Type}" Value="Item">
-                                    <Setter Property="IsVisible" Value="True" />
-                                </DataTrigger>
-                            </Label.Triggers>
-                            
-                        </Label>
-                        
-                        <BoxView
-                            HeightRequest="1"
-                            VerticalOptions="Center"
-                            HorizontalOptions="Fill"
-                            BackgroundColor="Gray"
-                            Opacity="0.5"
-                            Margin="2,5,2,2"
-                            IsVisible="False">
-                            <BoxView.Triggers>
-                                <DataTrigger TargetType="BoxView" Binding="{Binding Type}" Value="Separator">
-                                    <Setter Property="IsVisible" Value="True" />
-                                </DataTrigger>
-                            </BoxView.Triggers>
-                        </BoxView>
-                        
-                    </StackLayout>
-                    
-                </DataTemplate>
-            </BindableLayout.ItemTemplate>
-            
         </Grid>
     </ContentView.Content>
 </ContentView>

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

@@ -3,18 +3,68 @@ using System.Collections.Generic;
 using System.Linq;
 using System.Text;
 using System.Threading.Tasks;
-
+using Xamarin.CommunityToolkit.Converters;
+using Xamarin.CommunityToolkit.UI.Views;
 using Xamarin.Forms;
 using Xamarin.Forms.Xaml;
 
 namespace InABox.Mobile
 {
+
+    public class MobileMenuButtonMenuImagePositionConverter : BaseConverter<MobileMenuButtonMenuImagePosition, Dock>
+    {
+        public override Dock ConvertFrom(MobileMenuButtonMenuImagePosition value)
+        {
+            return value == MobileMenuButtonMenuImagePosition.Left
+                ? Dock.Left
+                : Dock.Right;
+        }
+
+        public override MobileMenuButtonMenuImagePosition ConvertBackTo(Dock value)
+        {
+            return value == Dock.Right
+                ? MobileMenuButtonMenuImagePosition.Right
+                : MobileMenuButtonMenuImagePosition.Left;
+        }
+    }
+    
+    public enum MobileMenuButtonMenuImagePosition
+    {
+        Left,
+        Right
+    }
+    
+    public class MobileMenuButtonTemplateSelector : DataTemplateSelector
+    {
+        public DataTemplate Item { get; set; }
+        public DataTemplate Separator { get; set; }
+
+        protected override DataTemplate OnSelectTemplate (object item, BindableObject container)
+        {
+            return item is MobileMenuItem
+                ? Item
+                : Separator;
+        }
+    }
+    
     [XamlCompilation(XamlCompilationOptions.Compile)]
     public partial class MobileMenuButtonMenu
     {
         public IList<MobileMenuEntry> Items => _viewModel.Items;
         
         public IList<MobileMenuEntry> VisibleItems => _viewModel.VisibleItems;
+
+        public bool ShowImages
+        {
+            get => _viewModel.ShowImages;
+            set => _viewModel.ShowImages = value;
+        }
+
+        public MobileMenuButtonMenuImagePosition ImagePosition
+        {
+            get => _viewModel.ImagePosition;
+            set => _viewModel.ImagePosition = value;
+        }
         
         public MobileMenuButtonMenu()
         {
@@ -23,7 +73,7 @@ namespace InABox.Mobile
 
         private void TapGestureRecognizer_OnTapped(object sender, EventArgs e)
         {
-            if ((sender as Label)?.BindingContext is MobileMenuItem item)
+            if ((sender as BindableObject)?.BindingContext is MobileMenuItem item)
                 item.DoClicked();
         }
 

InABox.Mobile/InABox.Mobile.Shared/Components/MobileMenuButton/MobileMenuButtonMenuViewModel.cs

@@ -29,7 +29,10 @@ namespace InABox.Mobile
         public event MobileMenuButtonLayoutChangedEvent LayoutChanged;
 
         public event EventHandler ItemClicked;
-        
+
+        public bool ShowImages { get; set; }
+        public MobileMenuButtonMenuImagePosition ImagePosition { get; set; }
+
         public MobileMenuButtonMenuViewModel()
         {
             _items = new ObservableCollection<MobileMenuEntry>();

InABox.Mobile/InABox.Mobile.Shared/Components/MobileMenuButton/MobileMenuEntry.cs

@@ -23,6 +23,6 @@ namespace InABox.Mobile
 
         public abstract MobileMenuEntryType Type { get; }
         public int Index { get; set; }
-        public string Text { get; set; }
+
     }
 }

InABox.Mobile/InABox.Mobile.Shared/Components/MobileMenuButton/MobileMenuItem.cs

@@ -1,4 +1,5 @@
 using System;
+using Xamarin.Forms;
 
 namespace InABox.Mobile
 {
@@ -8,9 +9,7 @@ namespace InABox.Mobile
         public override MobileMenuEntryType Type => MobileMenuEntryType.Item;
         
         public event EventHandler Clicked;
-
         
-
         public void DoClicked()
         {
             Clicked?.Invoke(this, EventArgs.Empty);
@@ -21,5 +20,10 @@ namespace InABox.Mobile
         {
             IsVisible = true;
         }
+        
+        public string Text { get; set; }
+        
+        public ImageSource Image { get; set; }
+        
     }
 }