Fixing menu item scrolling issue with nav bar.

Wino.Calendar.ViewModels/CalendarAppShellViewModel.cs

@@ -87,7 +87,6 @@ public partial class CalendarAppShellViewModel : CalendarBaseViewModel,
 
     private readonly SettingsItem _settingsItem = new();
     private readonly StoreUpdateMenuItem _storeUpdateMenuItem = new();
-    private readonly NewCalendarEventMenuItem _newEventMenuItem = new();
 
     // For updating account calendars asynchronously.
     private SemaphoreSlim _accountCalendarUpdateSemaphoreSlim = new(1);
@@ -126,7 +125,6 @@ public partial class CalendarAppShellViewModel : CalendarBaseViewModel,
         AccountCalendarStateService.Dispatcher = Dispatcher;
         MenuItems = new MenuItemCollection(Dispatcher);
         FooterItems = new MenuItemCollection(Dispatcher);
-        MenuItems.Add(_newEventMenuItem);
         _ = RefreshFooterItemsAsync(false);
     }
 

Wino.Mail.WinUI/Styles/CalendarShellNavigationViewStyle.xaml

@@ -347,14 +347,18 @@
                                                 </Button.Resources>
                                             </Button>
                                         </Grid>
-
+                                        <ContentControl
+                                            x:Name="PaneCustomContentBorder"
+                                            Grid.Row="4"
+                                            HorizontalContentAlignment="Stretch"
+                                            VerticalContentAlignment="Stretch"
+                                            IsTabStop="False" />
                                         <!--  "Non header" content  -->
                                         <Grid x:Name="ItemsContainerGrid" Grid.Row="6">
                                             <Grid.RowDefinitions>
-                                                <!--  Custom pane custom content  -->
-                                                <RowDefinition Height="Auto" />
-                                                <!--  MenuItems  -->
                                                 <RowDefinition Height="*" />
+                                                <!--  MenuItems  -->
+                                                <RowDefinition Height="Auto" />
                                                 <!--  Separator if overflow  -->
                                                 <RowDefinition Height="Auto" />
                                                 <!--  PaneFooter  -->
@@ -365,7 +369,6 @@
                                             <controls:ItemsRepeaterScrollHost HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
                                                 <ScrollViewer
                                                     x:Name="MenuItemsScrollViewer"
-                                                    VerticalAlignment="Top"
                                                     TabNavigation="Local"
                                                     VerticalScrollBarVisibility="Auto">
                                                     <!--  Left nav ItemsRepeater  -->
@@ -386,12 +389,6 @@
                                                 HorizontalAlignment="Stretch"
                                                 VerticalAlignment="Center"
                                                 Visibility="Collapsed" />
-                                            <ContentControl
-                                                x:Name="PaneCustomContentBorder"
-                                                Grid.Row="1"
-                                                HorizontalContentAlignment="Stretch"
-                                                VerticalContentAlignment="Stretch"
-                                                IsTabStop="False" />
                                             <!--  PaneFooter  -->
                                             <ContentControl
                                                 x:Name="FooterContentBorder"
@@ -400,6 +397,7 @@
                                                 HorizontalContentAlignment="Stretch"
                                                 VerticalContentAlignment="Stretch"
                                                 IsTabStop="False" />
+
                                             <Border
                                                 x:Name="FooterAppModeSwitcherBorder"
                                                 Grid.Row="3"
@@ -409,6 +407,20 @@
                                                 CornerRadius="{ThemeResource OverlayCornerRadius}">
                                                 <winoControls:AppModeFooterSwitcherControl x:Name="FooterAppModeSwitcher" />
                                             </Border>
+
+                                            <!--  FooterItems - Disabled  -->
+                                            <controls:ItemsRepeaterScrollHost Grid.Row="3" Visibility="Collapsed">
+                                                <ScrollViewer
+                                                    x:Name="FooterItemsScrollViewer"
+                                                    VerticalAnchorRatio="1"
+                                                    VerticalScrollBarVisibility="Auto">
+                                                    <controls:ItemsRepeater x:Name="FooterMenuItemsHost" AutomationProperties.AccessibilityView="Content">
+                                                        <controls:ItemsRepeater.Layout>
+                                                            <controls:StackLayout />
+                                                        </controls:ItemsRepeater.Layout>
+                                                    </controls:ItemsRepeater>
+                                                </ScrollViewer>
+                                            </controls:ItemsRepeaterScrollHost>
                                         </Grid>
                                     </Grid>
                                 </SplitView.Pane>

Wino.Mail.WinUI/Styles/DataTemplates.xaml

@@ -55,9 +55,7 @@
     </DataTemplate>
 
     <DataTemplate x:Key="SettingsShellPageItemTemplate" x:DataType="menu:SettingsShellPageMenuItem">
-        <coreControls:WinoNavigationViewItem
+        <coreControls:WinoNavigationViewItem Content="{x:Bind Title}" DataContext="{x:Bind}">
-            Content="{x:Bind Title}"
-            DataContext="{x:Bind}">
             <muxc:NavigationViewItem.Icon>
                 <FontIcon FontFamily="{StaticResource SymbolThemeFontFamily}" Glyph="{x:Bind Glyph}" />
             </muxc:NavigationViewItem.Icon>

Wino.Mail.WinUI/Views/Calendar/CalendarAppShell.xaml

@@ -22,23 +22,6 @@
     mc:Ignorable="d">
 
     <Page.Resources>
-        <DataTemplate x:Key="CalendarNewEventTemplate" x:DataType="menu:NewCalendarEventMenuItem">
-            <coreControls:WinoNavigationViewItem
-                Height="50"
-                DataContext="{x:Bind}"
-                SelectsOnInvoked="False">
-                <muxc:NavigationViewItem.Icon>
-                    <coreControls:WinoFontIcon Icon="NewMail" />
-                </muxc:NavigationViewItem.Icon>
-                <TextBlock
-                    Margin="0,-2,0,0"
-                    VerticalAlignment="Center"
-                    FontSize="16"
-                    Style="{StaticResource FlyoutPickerTitleTextBlockStyle}"
-                    Text="{x:Bind domain:Translator.CalendarEventCompose_NewEventButton}" />
-            </coreControls:WinoNavigationViewItem>
-        </DataTemplate>
-
         <DataTemplate x:Key="CalendarSettingsItemTemplate" x:DataType="menu:SettingsItem">
             <coreControls:WinoNavigationViewItem DataContext="{x:Bind}" SelectsOnInvoked="False">
                 <coreControls:WinoNavigationViewItem.Icon>
@@ -66,8 +49,6 @@
 
         <coreSelectors:NavigationMenuTemplateSelector
             x:Key="NavigationMenuTemplateSelector"
-            CalendarNewEventTemplate="{StaticResource CalendarNewEventTemplate}"
-            NewMailTemplate="{StaticResource CalendarNewEventTemplate}"
             RatingItemTemplate="{StaticResource RatingItemTemplate}"
             SeperatorTemplate="{StaticResource SeperatorTemplate}" />
 
@@ -203,14 +184,35 @@
             <muxc:NavigationView.PaneCustomContent>
                 <Grid x:Name="PaneCustomContent" Padding="0,0,0,6">
                     <Grid.RowDefinitions>
+                        <RowDefinition Height="Auto" />
                         <RowDefinition Height="Auto" />
                         <RowDefinition Height="*" />
                     </Grid.RowDefinitions>
 
+                    <coreControls:WinoNavigationViewItem
+                        x:Name="NewCalendarEventNavigationItem"
+                        Grid.Row="0"
+                        Height="50"
+                        Margin="0,0,0,12"
+                        AutomationProperties.Name="{x:Bind domain:Translator.CalendarEventCompose_NewEventButton, Mode=OneTime}"
+                        IsTabStop="True"
+                        KeyDown="NewCalendarEventNavigationItemKeyDown"
+                        SelectsOnInvoked="False"
+                        Tapped="NewCalendarEventNavigationItemTapped">
+                        <muxc:NavigationViewItem.Icon>
+                            <coreControls:WinoFontIcon Icon="NewMail" />
+                        </muxc:NavigationViewItem.Icon>
+                        <TextBlock
+                            Margin="0,-2,0,0"
+                            VerticalAlignment="Center"
+                            FontSize="16"
+                            Style="{StaticResource FlyoutPickerTitleTextBlockStyle}"
+                            Text="{x:Bind domain:Translator.CalendarEventCompose_NewEventButton, Mode=OneTime}" />
+                    </coreControls:WinoNavigationViewItem>
+
                     <calendarControls:WinoCalendarView
                         x:Name="CalendarView"
-                        Grid.Row="0"
+                        Grid.Row="1"
-                        Margin="0,12,0,0"
                         HorizontalAlignment="Center"
                         DateClickedCommand="{x:Bind ViewModel.DateClickedCommand}"
                         HighlightedDateRange="{x:Bind ViewModel.HighlightedDateRange, Mode=OneWay}"
@@ -219,7 +221,7 @@
                     <!--  Account Calendars Host  -->
                     <ListView
                         x:Name="CalendarHostListView"
-                        Grid.Row="1"
+                        Grid.Row="2"
                         ItemsSource="{x:Bind ViewModel.AccountCalendarStateService.GroupedAccountCalendars}"
                         SelectionMode="None">
                         <ListView.Header>

Wino.Mail.WinUI/Views/Calendar/CalendarAppShell.xaml.cs

@@ -1,5 +1,6 @@
 using System;
 using System.Diagnostics;
+using System.Threading.Tasks;
 using CommunityToolkit.Mvvm.Messaging;
 using Microsoft.Extensions.DependencyInjection;
 using Microsoft.UI.Xaml;
@@ -8,9 +9,11 @@ using Microsoft.UI.Xaml.Input;
 using Microsoft.UI.Xaml.Navigation;
 using Wino.Core.Domain.Enums;
 using Wino.Core.Domain.Interfaces;
+using Wino.Core.Domain.MenuItems;
 using Wino.Core.Domain.Models;
 using Wino.Mail.Views.Abstract;
 using Wino.Messaging.Client.Calendar;
+using Windows.System;
 
 namespace Wino.Mail.WinUI.Views.Calendar;
 
@@ -50,6 +53,21 @@ public sealed partial class CalendarAppShell : CalendarAppShellAbstract,
 
     private void NextDateClicked(object sender, RoutedEventArgs e) => WeakReferenceMessenger.Default.Send(new GoNextDateRequestedMessage());
 
+    private async void NewCalendarEventNavigationItemTapped(object sender, TappedRoutedEventArgs e)
+    {
+        e.Handled = true;
+        await InvokeNewCalendarEventAsync();
+    }
+
+    private async void NewCalendarEventNavigationItemKeyDown(object sender, KeyRoutedEventArgs e)
+    {
+        if (e.Key is not (VirtualKey.Enter or VirtualKey.Space))
+            return;
+
+        e.Handled = true;
+        await InvokeNewCalendarEventAsync();
+    }
+
     private async void NavigationViewItemInvoked(NavigationView sender, NavigationViewItemInvokedEventArgs args)
     {
         if (args.InvokedItemContainer is FrameworkElement { DataContext: IMenuItem menuItem })
@@ -61,6 +79,9 @@ public sealed partial class CalendarAppShell : CalendarAppShellAbstract,
     private void NavigationViewDisplayModeChanged(NavigationView sender, NavigationViewDisplayModeChangedEventArgs args)
         => UpdateNavigationPaneLayout(args.DisplayMode);
 
+    private Task InvokeNewCalendarEventAsync()
+        => ViewModel.HandleNavigationItemInvokedAsync(new NewCalendarEventMenuItem());
+
     private void UpdateNavigationPaneLayout(NavigationViewDisplayMode displayMode)
     {
         var paneContentVisibility = displayMode == NavigationViewDisplayMode.Expanded && navigationView.IsPaneOpen

Wino.Mail.WinUI/Views/WinoAppShell.xaml

@@ -377,23 +377,6 @@
             </coreControls:WinoNavigationViewItem>
         </DataTemplate>
 
-        <DataTemplate x:Key="CalendarNewEventTemplate" x:DataType="menu:NewCalendarEventMenuItem">
-            <coreControls:WinoNavigationViewItem
-                Height="50"
-                DataContext="{x:Bind}"
-                SelectsOnInvoked="False">
-                <muxc:NavigationViewItem.Icon>
-                    <coreControls:WinoFontIcon Icon="NewMail" />
-                </muxc:NavigationViewItem.Icon>
-                <TextBlock
-                    Margin="0,-2,0,0"
-                    VerticalAlignment="Center"
-                    FontSize="16"
-                    Style="{StaticResource FlyoutPickerTitleTextBlockStyle}"
-                    Text="{x:Bind domain:Translator.CalendarEventCompose_NewEventButton}" />
-            </coreControls:WinoNavigationViewItem>
-        </DataTemplate>
-
         <DataTemplate x:Key="NewContactTemplate" x:DataType="menu:NewContactMenuItem">
             <coreControls:WinoNavigationViewItem
                 Height="50"
@@ -413,7 +396,6 @@
 
         <coreSelectors:NavigationMenuTemplateSelector
             x:Key="NavigationMenuTemplateSelector"
-            CalendarNewEventTemplate="{StaticResource CalendarNewEventTemplate}"
             ClickableAccountMenuTemplate="{StaticResource ClickableAccountMenuTemplate}"
             FixAuthenticationIssueTemplate="{StaticResource FixAuthenticationIssueTemplate}"
             FixMissingFolderConfigTemplate="{StaticResource FixMissingFolderConfig}"
@@ -556,24 +538,43 @@
                     x:Name="PaneCustomContent"
                     Padding="0,0,0,6"
                     Visibility="Collapsed">
-                    <Grid
+                    <Grid x:Name="CalendarPaneContent" Visibility="Collapsed">
-                        x:Name="CalendarPaneContent"
-                        Visibility="Collapsed">
                         <Grid.RowDefinitions>
+                            <RowDefinition Height="Auto" />
                             <RowDefinition Height="Auto" />
                             <RowDefinition Height="*" />
                         </Grid.RowDefinitions>
 
+                        <coreControls:WinoNavigationViewItem
+                            x:Name="NewCalendarEventNavigationItem"
+                            Grid.Row="0"
+                            Height="50"
+                            Margin="0,0,0,12"
+                            AutomationProperties.Name="{x:Bind domain:Translator.CalendarEventCompose_NewEventButton, Mode=OneTime}"
+                            IsTabStop="True"
+                            KeyDown="NewCalendarEventNavigationItemKeyDown"
+                            SelectsOnInvoked="False"
+                            Tapped="NewCalendarEventNavigationItemTapped">
+                            <muxc:NavigationViewItem.Icon>
+                                <coreControls:WinoFontIcon Icon="NewMail" />
+                            </muxc:NavigationViewItem.Icon>
+                            <TextBlock
+                                Margin="0,-2,0,0"
+                                VerticalAlignment="Center"
+                                FontSize="16"
+                                Style="{StaticResource FlyoutPickerTitleTextBlockStyle}"
+                                Text="{x:Bind domain:Translator.CalendarEventCompose_NewEventButton, Mode=OneTime}" />
+                        </coreControls:WinoNavigationViewItem>
+
                         <calendarControls:WinoCalendarView
                             x:Name="CalendarView"
-                            Grid.Row="0"
+                            Grid.Row="1"
-                            Margin="0,12,0,0"
                             HorizontalAlignment="Center"
                             TodayBackgroundColor="{ThemeResource SystemAccentColor}" />
 
                         <ListView
                             x:Name="CalendarHostListView"
-                            Grid.Row="1"
+                            Grid.Row="2"
                             SelectionMode="None">
                             <ListView.Header>
                                 <TextBlock
@@ -651,8 +652,8 @@
                     <StackPanel
                         x:Name="ContactsPaneContent"
                         Margin="20,20,16,0"
-                        Visibility="Collapsed"
+                        Spacing="6"
-                        Spacing="6">
+                        Visibility="Collapsed">
                         <TextBlock
                             FontSize="16"
                             FontWeight="SemiBold"

Wino.Mail.WinUI/Views/WinoAppShell.xaml.cs

@@ -19,6 +19,7 @@ using Wino.Core.Domain;
 using Wino.Core.Domain.Entities.Mail;
 using Wino.Core.Domain.Enums;
 using Wino.Core.Domain.Interfaces;
+using Wino.Core.Domain.MenuItems;
 using Wino.Core.Domain.Models;
 using Wino.Core.Domain.Models.Folders;
 using Wino.Core.Domain.Models.MailItem;
@@ -35,6 +36,7 @@ using Wino.Messaging.Client.Shell;
 using Wino.Views.Mail;
 using Wino.Views;
 using Wino.Views.Settings;
+using Windows.System;
 
 namespace Wino.Mail.WinUI.Views;
 
@@ -258,10 +260,28 @@ public sealed partial class WinoAppShell : Views.Abstract.WinoAppShellAbstract,
         }
     }
 
+    private async void NewCalendarEventNavigationItemTapped(object sender, TappedRoutedEventArgs e)
+    {
+        e.Handled = true;
+        await InvokeNewCalendarEventAsync();
+    }
+
+    private async void NewCalendarEventNavigationItemKeyDown(object sender, KeyRoutedEventArgs e)
+    {
+        if (e.Key is not (VirtualKey.Enter or VirtualKey.Space))
+            return;
+
+        e.Handled = true;
+        await InvokeNewCalendarEventAsync();
+    }
+
     private void PreviousDateClicked(object sender, RoutedEventArgs e) => WeakReferenceMessenger.Default.Send(new GoPreviousDateRequestedMessage());
 
     private void NextDateClicked(object sender, RoutedEventArgs e) => WeakReferenceMessenger.Default.Send(new GoNextDateRequestedMessage());
 
+    private Task InvokeNewCalendarEventAsync()
+        => ViewModel.CalendarClient.HandleNavigationItemInvokedAsync(new NewCalendarEventMenuItem());
+
     public void Receive(CalendarDisplayTypeChangedMessage message) => ManageCalendarDisplayType(message.NewDisplayType);
 
     private async void NavigationViewItemInvoked(NavigationView sender, NavigationViewItemInvokedEventArgs args)