ui(manager): use Menus with HeaderMenuItems instead of ImageDropDownButtons

ModpackUpdater.Apps.Manager/Ui/MainWindow.axaml

@@ -3,7 +3,6 @@
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
   xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
   xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
-  xmlns:local="clr-namespace:ModpackUpdater.Apps.Manager.Ui"
   xmlns:pilz="https://git.pilzinsel64.de/pilz-framework/pilz"
   xmlns:symbols="clr-namespace:Pilz.UI.Symbols;assembly=Pilz.UI"
   xmlns:mainWindow="clr-namespace:ModpackUpdater.Apps.Manager.Ui.Models.MainWindow"
@@ -15,7 +14,7 @@
   Loaded="Window_OnLoaded"
   Closed="Window_OnClosed"
   KeyDown="Window_OnKeyDown">
-  
+
   <Grid
     x:Name="GridMain"
     x:DataType="mainWindow:MainWindowViewModel"
@@ -25,55 +24,45 @@
     ColumnSpacing="6"
     Margin="3">
 
-    <!-- StackPanel: Workspace -->
-    <StackPanel
+    <!-- Menu: Workspace -->
+    <Menu
       Grid.Column="0"
-      Grid.Row="0"
-      Orientation="Horizontal">
+      Grid.Row="0">
+      
+      <Menu.Items>
+        <!-- MenuItem: Workspace -->
+        <pilz:HeaderMenuItem
+          x:Name="MenuItemWorkspace"
+          HeaderText="{x:Static langRes:GeneralLangRes.Workspace}">
 
-      <!-- Button: Workspace -->
-      <pilz:ImageButton
-        x:Name="ButtonWorkspace"
-        Text="{x:Static langRes:GeneralLangRes.Workspace}"
-        Background="Transparent">
+          <pilz:HeaderMenuItem.Items>
+            <MenuItem x:Name="MenuItemWorkspacePreferences" Header="{x:Static langRes:GeneralLangRes.WorkspacePreferences}" Click="MenuItemWorkspacePreferences_OnClick"/>
+            <MenuItem x:Name="MenuItemSaveWorkspace" Header="{x:Static langRes:GeneralLangRes.SaveWorkspace}" HotKey="Ctrl+S" Click="MenuItemSaveWorkspace_OnClick"/>
+            <Separator/>
+            <MenuItem x:Name="MenuItemNewWorkspace" Header="{x:Static langRes:GeneralLangRes.NewWorkspace}"/>
+            <Separator/>
+            <MenuItem x:Name="MenuItemRecentWorkspaces" Header="{x:Static langRes:GeneralLangRes.RecentWorkspaces}"/>
+          </pilz:HeaderMenuItem.Items>
+        </pilz:HeaderMenuItem>
 
-        <pilz:ImageButton.Flyout>
-          <MenuFlyout>
-            <MenuFlyout.Items>
-              <MenuItem x:Name="MenuItemWorkspacePreferences" Header="{x:Static langRes:GeneralLangRes.WorkspacePreferences}" Click="MenuItemWorkspacePreferences_OnClick"/>
-              <MenuItem x:Name="MenuItemSaveWorkspace" Header="{x:Static langRes:GeneralLangRes.SaveWorkspace}" HotKey="Ctrl+S" Click="MenuItemSaveWorkspace_OnClick"/>
-              <Separator/>
-              <MenuItem x:Name="MenuItemNewWorkspace" Header="{x:Static langRes:GeneralLangRes.NewWorkspace}"/>
-              <Separator/>
-              <MenuItem x:Name="MenuItemRecentWorkspaces" Header="{x:Static langRes:GeneralLangRes.RecentWorkspaces}"/>
-            </MenuFlyout.Items>
-          </MenuFlyout>
-        </pilz:ImageButton.Flyout>
-      </pilz:ImageButton>
+        <!-- MenuItem: Update -->
+        <pilz:HeaderMenuItem
+          x:Name="MenuItemUpdate"
+          HeaderText="{x:Static langRes:GeneralLangRes.Update}">
 
-      <!-- Button: Update -->
-      <pilz:ImageButton
-        x:Name="ButtonUpdate"
-        Text="{x:Static langRes:GeneralLangRes.Update}"
-        Background="Transparent">
+          <pilz:HeaderMenuItem.Items>
+            <MenuItem x:Name="MenuItemCreateUpdate" Header="{x:Static langRes:GeneralLangRes.CreateUpdate}" Click="MenuItemCreateUpdate_OnClick"/>
+            <MenuItem x:Name="MenuItemRemoveUpdate" Header="{x:Static langRes:GeneralLangRes.RemoveUpdate}" Click="MenuItemRemoveUpdate_OnClick"/>
+          </pilz:HeaderMenuItem.Items>
+        </pilz:HeaderMenuItem>
 
-        <pilz:ImageButton.Flyout>
-          <MenuFlyout>
-            <MenuFlyout.Items>
-              <MenuItem x:Name="MenuItemCreateUpdate" Header="{x:Static langRes:GeneralLangRes.CreateUpdate}" Click="MenuItemCreateUpdate_OnClick"/>
-              <MenuItem x:Name="MenuItemRemoveUpdate" Header="{x:Static langRes:GeneralLangRes.RemoveUpdate}" Click="MenuItemRemoveUpdate_OnClick"/>
-            </MenuFlyout.Items>
-          </MenuFlyout>
-        </pilz:ImageButton.Flyout>
-      </pilz:ImageButton>
+        <!-- MenuItem: Workspace -->
+        <pilz:HeaderMenuItem
+          x:Name="MenuItemTools"
+          HeaderText="{x:Static langRes:GeneralLangRes.Tools}"/>
+      </Menu.Items>
+    </Menu>
 
-      <!-- Button: Tools -->
-      <pilz:ImageButton
-        x:Name="ButtonTools"
-        Text="{x:Static langRes:GeneralLangRes.Tools}"
-        Background="Transparent"/>
-    </StackPanel>
-    
     <!-- TreeView: Workspace -->
     <ScrollViewer
       Grid.Column="0"
@@ -110,27 +99,14 @@
       Orientation="Horizontal"
       VerticalAlignment="Center">
 
-      <!-- Panel: Menu list -->
-      <StackPanel
-        Orientation="Horizontal">
-        
-        <!-- Button: Add action -->
-        <pilz:ImageButton
-          x:Name="ButtonAddAction"
-          Text="{x:Static langRes:GeneralLangRes.Add}"
-          ImageSource="{x:Static local:MainWindow.ButtonImageAddAction}"
-          Background="Transparent"
-          Click="ButtonAddAction_OnClick"/>
+      <!-- Menu: Actions -->
+      <Menu>
+        <Menu.Items>
+          <pilz:HeaderMenuItem x:Name="MenuItemAddAction" HeaderText="{x:Static langRes:GeneralLangRes.Add}" Click="ButtonAddAction_OnClick"/>
+          <pilz:HeaderMenuItem x:Name="MenuItemRemoveAction" HeaderText="{x:Static langRes:GeneralLangRes.Remove}" Click="ButtonRemoveAction_OnClick"/>
+        </Menu.Items>
+      </Menu>
 
-        <!-- Button: Remove action -->
-        <pilz:ImageButton
-          x:Name="ButtonRemoveAction"
-          Text="{x:Static langRes:GeneralLangRes.Remove}"
-          ImageSource="{x:Static local:MainWindow.ButtonImageRemoveAction}"
-          Background="Transparent"
-          Click="ButtonRemoveAction_OnClick"/>
-      </StackPanel>
-      
       <!-- TextBox: Search -->
       <TextBox
         Width="200"
@@ -139,8 +115,7 @@
 
       <!-- Panel: Menu -->
       <ContentControl
-        Content="{Binding SelectedTreeNode}"
-        >
+        Content="{Binding SelectedTreeNode}">
 
         <ContentControl.DataTemplates>
           <DataTemplate
@@ -186,11 +161,11 @@
       VerticalAlignment="Stretch"
       ItemsSource="{Binding CurrentGridRows.View}"
       SelectedItem="{Binding SelectedGridRow}">
-      
+
       <DataGrid.ContextMenu>
         <ContextMenu x:Name="ContextMenuActions"/>
       </DataGrid.ContextMenu>
-      
+
       <DataGrid.Columns>
         <DataGridTextColumn
           Header="{x:Static langRes:GeneralLangRes.Id}"
@@ -219,10 +194,10 @@
           Header="{x:Static langRes:GeneralLangRes.DestinationPath}"
           Binding="{Binding InheritedDestPath}"
           Width="*"/>
-        
+
         <DataGridTemplateColumn
           Header="{x:Static langRes:GeneralLangRes.State}">
-          
+
           <DataGridTemplateColumn.CellTemplate>
             <DataTemplate>
               <Image

ModpackUpdater.Apps.Manager/Ui/MainWindow.axaml.cs

@@ -2,7 +2,6 @@ using System.Reflection;
 using Avalonia.Controls;
 using Avalonia.Input;
 using Avalonia.Interactivity;
-using Avalonia.Media;
 using DynamicData;
 using ModpackUpdater.Apps.Manager.Api;
 using ModpackUpdater.Apps.Manager.Api.Model;
@@ -20,9 +19,6 @@ namespace ModpackUpdater.Apps.Manager.Ui;
 
 public partial class MainWindow : Window, IMainApi
 {
-    public static IImage? ButtonImageAddAction => AppGlobals.Symbols.GetImageSource(AppSymbols.add);
-    public static IImage? ButtonImageRemoveAction => AppGlobals.Symbols.GetImageSource(AppSymbols.remove);
-
     private WorkspaceFeature? curWs;
     
     public MainWindowViewModel Model { get; } = new();
@@ -38,15 +34,17 @@ public partial class MainWindow : Window, IMainApi
         
         GridMain.DataContext = Model;
         
-        ButtonWorkspace.ImageSource = AppGlobals.Symbols.GetImageSource(AppSymbols.workspace);
+        MenuItemWorkspace.Icon = AppGlobals.Symbols.GetImage(AppSymbols.workspace, SymbolSize.Small);
         MenuItemWorkspacePreferences.Icon = AppGlobals.Symbols.GetImage(AppSymbols.settings, SymbolSize.Small);
         MenuItemSaveWorkspace.Icon = AppGlobals.Symbols.GetImage(AppSymbols.save, SymbolSize.Small);
         MenuItemNewWorkspace.Icon = AppGlobals.Symbols.GetImage(AppSymbols.new_window, SymbolSize.Small);
         MenuItemRecentWorkspaces.Icon = AppGlobals.Symbols.GetImage(AppSymbols.time_machine, SymbolSize.Small);
-        ButtonUpdate.ImageSource = AppGlobals.Symbols.GetImageSource(AppSymbols.update_done);
-        ButtonTools.ImageSource = AppGlobals.Symbols.GetImageSource(AppSymbols.tools);
+        MenuItemUpdate.Icon = AppGlobals.Symbols.GetImage(AppSymbols.update_done, SymbolSize.Small);
+        MenuItemTools.Icon = AppGlobals.Symbols.GetImage(AppSymbols.tools, SymbolSize.Small);
         MenuItemCreateUpdate.Icon = AppGlobals.Symbols.GetImage(AppSymbols.add, SymbolSize.Small);
         MenuItemRemoveUpdate.Icon = AppGlobals.Symbols.GetImage(AppSymbols.remove, SymbolSize.Small);
+        MenuItemAddAction.HeaderIcon = AppGlobals.Symbols.GetImage(AppSymbols.add, SymbolSize.Small);
+        MenuItemRemoveAction.HeaderIcon = AppGlobals.Symbols.GetImage(AppSymbols.remove, SymbolSize.Small);
         ImageUpdate.Source = AppGlobals.Symbols.GetImageSource(AppSymbols.update_done);
         ImageMetadata.Source = AppGlobals.Symbols.GetImageSource(AppSymbols.show_property);
         ImageGeneral.Source = AppGlobals.Symbols.GetImageSource(AppSymbols.normal_screen);
@@ -61,9 +59,7 @@ public partial class MainWindow : Window, IMainApi
             customClickHandler: MenuItemActionItem_Click,
             insertPrioSplitters: true);
         
-        var menuFlyoutTools = new MenuFlyout();
-        ButtonTools.Flyout = menuFlyoutTools;
-        PluginFeatureController.Instance.Functions.Get(FeatureTypes.Tools).InsertItemsTo(menuFlyoutTools.Items,
+        PluginFeatureController.Instance.Functions.Get(FeatureTypes.Tools).InsertItemsTo(MenuItemTools.Items,
             customClickHandler: MenuItemToolsItem_Click,
             insertPrioSplitters: true);
     }