Event details page basic layout.

Wino.Calendar.ViewModels/AppShellViewModel.cs

@@ -27,16 +27,18 @@ namespace Wino.Calendar.ViewModels
         IRecipient<VisibleDateRangeChangedMessage>,
         IRecipient<CalendarEnableStatusChangedMessage>,
         IRecipient<NavigateManageAccountsRequested>,
-        IRecipient<CalendarDisplayTypeChangedMessage>
+        IRecipient<CalendarDisplayTypeChangedMessage>,
+        IRecipient<DetailsPageStateChangedMessage>
     {
-
-
         public IPreferencesService PreferencesService { get; }
         public IStatePersistanceService StatePersistenceService { get; }
         public IAccountCalendarStateService AccountCalendarStateService { get; }
         public INavigationService NavigationService { get; }
         public IWinoServerConnectionManager ServerConnectionManager { get; }
 
+        [ObservableProperty]
+        private bool _isEventDetailsPageActive;
+
         [ObservableProperty]
         private int _selectedMenuItemIndex = -1;
 
@@ -348,9 +350,18 @@ namespace Wino.Calendar.ViewModels
 
         public void Receive(NavigateManageAccountsRequested message) => SelectedMenuItemIndex = 1;
 
-        public void Receive(CalendarDisplayTypeChangedMessage message)
+        public void Receive(CalendarDisplayTypeChangedMessage message) => OnPropertyChanged(nameof(IsVerticalCalendar));
+
+        public async void Receive(DetailsPageStateChangedMessage message)
         {
-            OnPropertyChanged(nameof(IsVerticalCalendar));
+            await ExecuteUIThread(() =>
+            {
+                IsEventDetailsPageActive = message.IsActivated;
+
+                // TODO: This is for Wino Mail. Generalize this later on.
+                StatePersistenceService.IsReaderNarrowed = message.IsActivated;
+                StatePersistenceService.IsReadingMail = message.IsActivated;
+            });
         }
     }
 }

Wino.Calendar.ViewModels/CalendarPageViewModel.cs

@@ -125,6 +125,7 @@ namespace Wino.Calendar.ViewModels
         private const int maxDayRangeSize = 10;
 
         private readonly ICalendarService _calendarService;
+        private readonly INavigationService _navigationService;
         private readonly IKeyPressService _keyPressService;
         private readonly IPreferencesService _preferencesService;
 
@@ -143,6 +144,7 @@ namespace Wino.Calendar.ViewModels
 
         public CalendarPageViewModel(IStatePersistanceService statePersistanceService,
                                      ICalendarService calendarService,
+                                     INavigationService navigationService,
                                      IKeyPressService keyPressService,
                                      IAccountCalendarStateService accountCalendarStateService,
                                      IPreferencesService preferencesService)
@@ -151,6 +153,7 @@ namespace Wino.Calendar.ViewModels
             AccountCalendarStateService = accountCalendarStateService;
 
             _calendarService = calendarService;
+            _navigationService = navigationService;
             _keyPressService = keyPressService;
             _preferencesService = preferencesService;
 
@@ -191,6 +194,7 @@ namespace Wino.Calendar.ViewModels
 
         public override void OnNavigatedFrom(NavigationMode mode, object parameters)
         {
+            ;
             // Do not call base method because that will unregister messenger recipient.
             // This is a singleton view model and should not be unregistered.
         }
@@ -199,6 +203,8 @@ namespace Wino.Calendar.ViewModels
         {
             base.OnNavigatedTo(mode, parameters);
 
+            if (mode == NavigationMode.Back) return;
+
             RefreshSettings();
 
             // Automatically select the first primary calendar for quick event dialog.
@@ -208,7 +214,6 @@ namespace Wino.Calendar.ViewModels
         [RelayCommand]
         private void NavigateSeries()
         {
-
         }
 
         [RelayCommand]
@@ -223,6 +228,7 @@ namespace Wino.Calendar.ViewModels
         private void NavigateEvent(CalendarItemViewModel calendarItemViewModel)
         {
             // Double tap or clicked 'view details' of the event detail popup.
+            _navigationService.Navigate(WinoPage.EventDetailsPage, calendarItemViewModel);
         }
 
         [RelayCommand(AllowConcurrentExecutions = false, CanExecute = nameof(CanSaveQuickEvent))]

Wino.Calendar.ViewModels/EventDetailsPageViewModel.cs

@@ -0,0 +1,88 @@
+using System;
+using System.Threading.Tasks;
+using CommunityToolkit.Mvvm.ComponentModel;
+using CommunityToolkit.Mvvm.Input;
+using CommunityToolkit.Mvvm.Messaging;
+using Wino.Calendar.ViewModels.Data;
+using Wino.Core.Domain.Enums;
+using Wino.Core.Domain.Interfaces;
+using Wino.Core.Domain.Models.Calendar;
+using Wino.Core.Domain.Models.Navigation;
+using Wino.Core.ViewModels;
+using Wino.Messaging.Client.Calendar;
+
+namespace Wino.Calendar.ViewModels
+{
+    public partial class EventDetailsPageViewModel : CalendarBaseViewModel
+    {
+        private readonly ICalendarService _calendarService;
+        private readonly INativeAppService _nativeAppService;
+        private readonly IPreferencesService _preferencesService;
+
+        public CalendarSettings CurrentSettings { get; }
+
+        #region Details
+
+        [ObservableProperty]
+        [NotifyPropertyChangedFor(nameof(CanViewSeries))]
+        private CalendarItemViewModel _currentEvent;
+
+        public bool CanViewSeries => CurrentEvent?.CalendarItem.RecurringCalendarItemId != null;
+
+        #endregion
+
+        public EventDetailsPageViewModel(ICalendarService calendarService, INativeAppService nativeAppService, IPreferencesService preferencesService)
+        {
+            _calendarService = calendarService;
+            _nativeAppService = nativeAppService;
+            _preferencesService = preferencesService;
+
+            CurrentSettings = _preferencesService.GetCurrentCalendarSettings();
+        }
+
+        public override void OnNavigatedTo(NavigationMode mode, object parameters)
+        {
+            base.OnNavigatedTo(mode, parameters);
+
+            Messenger.Send(new DetailsPageStateChangedMessage(true));
+
+            if (parameters == null || parameters is not CalendarItemViewModel passedCalendarItem)
+                return;
+
+            CurrentEvent = passedCalendarItem;
+        }
+
+        public override void OnNavigatedFrom(NavigationMode mode, object parameters)
+        {
+            base.OnNavigatedFrom(mode, parameters);
+
+            Messenger.Send(new DetailsPageStateChangedMessage(false));
+        }
+
+        [RelayCommand]
+        private async Task SaveAsync()
+        {
+
+        }
+
+        [RelayCommand]
+        private async Task DeleteAsync()
+        {
+
+        }
+
+        [RelayCommand]
+        private Task JoinOnline()
+        {
+            if (CurrentEvent == null || string.IsNullOrEmpty(CurrentEvent.CalendarItem.HtmlLink)) return Task.CompletedTask;
+
+            return _nativeAppService.LaunchUriAsync(new Uri(CurrentEvent.CalendarItem.HtmlLink));
+        }
+
+        [RelayCommand]
+        private async Task Respond(CalendarItemStatus status)
+        {
+            if (CurrentEvent == null) return;
+        }
+    }
+}

Wino.Calendar/App.xaml.cs

@@ -83,6 +83,7 @@ namespace Wino.Calendar
             services.AddTransient(typeof(AccountManagementViewModel));
             services.AddTransient(typeof(PersonalizationPageViewModel));
             services.AddTransient(typeof(AccountDetailsPageViewModel));
+            services.AddTransient(typeof(EventDetailsPageViewModel));
         }
 
         #endregion

Wino.Calendar/Controls/CalendarItemCommandBarFlyout.cs

@@ -0,0 +1,31 @@
+using Microsoft.UI.Xaml.Controls;
+using Windows.UI.Xaml;
+using Wino.Calendar.ViewModels.Data;
+
+namespace Wino.Calendar.Controls
+{
+    public class CalendarItemCommandBarFlyout : CommandBarFlyout
+    {
+        public static readonly DependencyProperty ItemProperty = DependencyProperty.Register(nameof(Item), typeof(CalendarItemViewModel), typeof(CalendarItemCommandBarFlyout), new PropertyMetadata(null, new PropertyChangedCallback(OnItemChanged)));
+
+        public CalendarItemViewModel Item
+        {
+            get { return (CalendarItemViewModel)GetValue(ItemProperty); }
+            set { SetValue(ItemProperty, value); }
+        }
+
+
+        private static void OnItemChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
+        {
+            if (d is CalendarItemCommandBarFlyout flyout)
+            {
+                flyout.UpdateMenuItems();
+            }
+        }
+
+        private void UpdateMenuItems()
+        {
+
+        }
+    }
+}

Wino.Calendar/Controls/CalendarItemControl.xaml

@@ -7,6 +7,7 @@
     xmlns:helpers="using:Wino.Helpers"
     xmlns:local="using:Wino.Calendar.Controls"
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+    xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
     d:DesignHeight="300"
     d:DesignWidth="400"
     CanDrag="True"
@@ -27,11 +28,12 @@
         </Grid.ColumnDefinitions>
 
         <Grid.ContextFlyout>
-            <MenuFlyout Opened="ContextFlyoutOpened">
+            <local:CalendarItemCommandBarFlyout Placement="Top">
-                <MenuFlyoutItem Text="as" />
+                <local:CalendarItemCommandBarFlyout.PrimaryCommands>
-                <MenuFlyoutItem Text="as" />
+                    <AppBarButton Icon="Save" Label="save" />
-                <MenuFlyoutItem Text="as" />
+                    <AppBarButton Icon="Delete" Label="Delet" />
-            </MenuFlyout>
+                </local:CalendarItemCommandBarFlyout.PrimaryCommands>
+            </local:CalendarItemCommandBarFlyout>
         </Grid.ContextFlyout>
 
         <Grid
@@ -143,7 +145,6 @@
 
                 <VisualState x:Name="MultiDayEvent">
                     <VisualState.Setters>
-
                         <Setter Target="MainGrid.CornerRadius" Value="0" />
                         <Setter Target="MainBackground.Opacity" Value="0.2" />
                         <Setter Target="MainGrid.IsHitTestVisible" Value="False" />

Wino.Calendar/Controls/CalendarItemControl.xaml.cs

@@ -194,11 +194,5 @@ namespace Wino.Calendar.Controls
 
             WeakReferenceMessenger.Default.Send(new CalendarItemRightTappedMessage(CalendarItem));
         }
-
-        private void ContextFlyoutOpened(object sender, object e)
-        {
-            if (CalendarItem == null) return;
-
-        }
     }
 }

Wino.Calendar/Helpers/CalendarXamlHelpers.cs

@@ -1,4 +1,7 @@
 using System.Linq;
+using System.Text.RegularExpressions;
+using Ical.Net.CalendarComponents;
+using Ical.Net.DataTypes;
 using Windows.UI.Xaml.Controls.Primitives;
 using Wino.Calendar.ViewModels.Data;
 using Wino.Core.Domain;
@@ -14,6 +17,61 @@ namespace Wino.Calendar.Helpers
         public static CalendarItemViewModel GetFirstAllDayEvent(CalendarEventCollection collection)
             => (CalendarItemViewModel)collection.AllDayEvents.FirstOrDefault();
 
+        /// <summary>
+        /// Returns full date + duration info in Event Details page details title.
+        /// </summary>
+        public static string GetEventDetailsDateString(CalendarItemViewModel calendarItemViewModel, CalendarSettings settings)
+        {
+            if (calendarItemViewModel == null || settings == null) return string.Empty;
+
+            var start = calendarItemViewModel.Period.Start;
+            var end = calendarItemViewModel.Period.End;
+
+            string timeFormat = settings.DayHeaderDisplayType == DayHeaderDisplayType.TwelveHour ? "h:mm tt" : "HH:mm";
+            string dateFormat = settings.DayHeaderDisplayType == DayHeaderDisplayType.TwelveHour ? "dddd, dd MMMM h:mm tt" : "dddd, dd MMMM HH:mm";
+
+            if (calendarItemViewModel.IsMultiDayEvent)
+            {
+                return $"{start.ToString($"dd MMMM ddd {timeFormat}", settings.CultureInfo)} - {end.ToString($"dd MMMM ddd {timeFormat}", settings.CultureInfo)}";
+            }
+            else
+            {
+                return $"{start.ToString(dateFormat, settings.CultureInfo)} - {end.ToString(timeFormat, settings.CultureInfo)}";
+            }
+        }
+
+        public static string GetRecurrenceString(CalendarItemViewModel calendarItemViewModel)
+        {
+            if (calendarItemViewModel == null || !calendarItemViewModel.IsRecurringEvent) return string.Empty;
+
+            // Parse recurrence rules
+            var calendarEvent = new CalendarEvent
+            {
+                Start = new CalDateTime(calendarItemViewModel.StartDate),
+                End = new CalDateTime(calendarItemViewModel.EndDate),
+            };
+
+            var recurrenceLines = Regex.Split(calendarItemViewModel.CalendarItem.Recurrence, Constants.CalendarEventRecurrenceRuleSeperator);
+
+            foreach (var line in recurrenceLines)
+            {
+                calendarEvent.RecurrenceRules.Add(new RecurrencePattern(line));
+            }
+
+            if (calendarEvent.RecurrenceRules == null || !calendarEvent.RecurrenceRules.Any())
+            {
+                return "No recurrence pattern.";
+            }
+
+            var recurrenceRule = calendarEvent.RecurrenceRules.First();
+            var daysOfWeek = string.Join(", ", recurrenceRule.ByDay.Select(day => day.DayOfWeek.ToString()));
+            string timeZone = calendarEvent.DtStart.TzId ?? "UTC";
+
+            return $"Every {daysOfWeek}, effective {calendarEvent.DtStart.Value.ToShortDateString()} " +
+                   $"from {calendarEvent.DtStart.Value.ToShortTimeString()} to {calendarEvent.DtEnd.Value.ToShortTimeString()} " +
+                   $"{timeZone}.";
+        }
+
         public static string GetDetailsPopupDurationString(CalendarItemViewModel calendarItemViewModel, CalendarSettings settings)
         {
             if (calendarItemViewModel == null || settings == null) return string.Empty;

Wino.Calendar/Services/NavigationService.cs

@@ -25,10 +25,24 @@ namespace Wino.Calendar.Services
                 WinoPage.ManageAccountsPage => typeof(ManageAccountsPage),
                 WinoPage.PersonalizationPage => typeof(PersonalizationPage),
                 WinoPage.AccountDetailsPage => typeof(AccountDetailsPage),
+                WinoPage.EventDetailsPage => typeof(EventDetailsPage),
                 _ => throw new Exception("Page is not implemented yet."),
             };
         }
 
+        public void GoBack()
+        {
+            if (Window.Current.Content is Frame appFrame && appFrame.Content is AppShell shellPage)
+            {
+                var shellFrame = shellPage.GetShellFrame();
+
+                if (shellFrame.CanGoBack)
+                {
+                    shellFrame.GoBack();
+                }
+            }
+        }
+
         public bool Navigate(WinoPage page, object parameter = null, NavigationReferenceFrame frame = NavigationReferenceFrame.ShellFrame, NavigationTransitionType transition = NavigationTransitionType.None)
         {
             // All navigations are performed on shell frame for calendar.

Wino.Calendar/Styles/WinoCalendarTypeSelectorControl.xaml

@@ -17,7 +17,10 @@
 
                             <CommandBar.PrimaryCommands>
                                 <!--  Today  -->
-                                <AppBarButton x:Name="PART_TodayButton" Label="Today">
+                                <AppBarButton
+                                    x:Name="PART_TodayButton"
+                                    Foreground="{ThemeResource ApplicationForegroundThemeBrush}"
+                                    Label="Today">
                                     <AppBarButton.Icon>
                                         <controls1:WinoFontIcon Icon="CalendarToday" />
                                     </AppBarButton.Icon>
@@ -27,7 +30,10 @@
 
                                 <!--  Day  -->
                                 <!--  TODO: Specific days  -->
-                                <AppBarToggleButton x:Name="PART_DayToggle" Label="Day">
+                                <AppBarToggleButton
+                                    x:Name="PART_DayToggle"
+                                    Foreground="{ThemeResource ApplicationForegroundThemeBrush}"
+                                    Label="Day">
                                     <AppBarToggleButton.Icon>
                                         <controls1:WinoFontIcon Icon="CalendarDay" />
                                     </AppBarToggleButton.Icon>
@@ -36,21 +42,30 @@
                                 <!--  Week  -->
                                 <!--  TODO: Work week  -->
 
-                                <AppBarToggleButton x:Name="PART_WeekToggle" Label="Week">
+                                <AppBarToggleButton
+                                    x:Name="PART_WeekToggle"
+                                    Foreground="{ThemeResource ApplicationForegroundThemeBrush}"
+                                    Label="Week">
                                     <AppBarToggleButton.Icon>
                                         <controls1:WinoFontIcon Icon="CalendarWeek" />
                                     </AppBarToggleButton.Icon>
                                 </AppBarToggleButton>
 
                                 <!--  Month  -->
-                                <AppBarToggleButton x:Name="PART_MonthToggle" Label="Month">
+                                <AppBarToggleButton
+                                    x:Name="PART_MonthToggle"
+                                    Foreground="{ThemeResource ApplicationForegroundThemeBrush}"
+                                    Label="Month">
                                     <AppBarToggleButton.Icon>
                                         <controls1:WinoFontIcon FontSize="44" Icon="CalendarMonth" />
                                     </AppBarToggleButton.Icon>
                                 </AppBarToggleButton>
 
                                 <!--  Year  -->
-                                <AppBarToggleButton x:Name="PART_YearToggle" Label="Year">
+                                <AppBarToggleButton
+                                    x:Name="PART_YearToggle"
+                                    Foreground="{ThemeResource ApplicationForegroundThemeBrush}"
+                                    Label="Year">
                                     <AppBarToggleButton.Icon>
                                         <controls1:WinoFontIcon Icon="CalendarYear" />
                                     </AppBarToggleButton.Icon>

Wino.Calendar/Views/Abstract/EventDetailsPageAbstract.cs

@@ -0,0 +1,7 @@
+using Wino.Calendar.ViewModels;
+using Wino.Core.UWP;
+
+namespace Wino.Calendar.Views.Abstract
+{
+    public abstract class EventDetailsPageAbstract : BasePage<EventDetailsPageViewModel> { }
+}

Wino.Calendar/Views/AppShell.xaml

@@ -56,6 +56,7 @@
         <coreControls:WinoAppTitleBar
             x:Name="RealAppBar"
             Grid.ColumnSpan="2"
+            BackButtonClicked="AppBarBackButtonClicked"
             Canvas.ZIndex="150"
             ConnectionStatus="{x:Bind ViewModel.ActiveConnectionStatus, Mode=OneWay}"
             CoreWindowText="Wino Calendar"
@@ -78,7 +79,7 @@
                         Grid.ColumnSpan="3"
                         Background="Transparent" />
 
-                    <Grid ColumnSpacing="12">
+                    <Grid x:Name="ShellContentArea" ColumnSpacing="12">
                         <Grid.ColumnDefinitions>
                             <ColumnDefinition Width="3*" />
                             <ColumnDefinition Width="7*" />
@@ -137,6 +138,7 @@
                     </Grid>
 
                     <calendarControls:WinoCalendarTypeSelectorControl
+                        x:Name="CalendarTypeSelector"
                         Grid.Column="2"
                         HorizontalAlignment="Right"
                         DisplayDayCount="{x:Bind ViewModel.StatePersistenceService.DayDisplayCount, Mode=OneWay}"
@@ -165,7 +167,7 @@
             IsPaneOpen="{x:Bind ViewModel.PreferencesService.IsNavigationPaneOpened, Mode=TwoWay}"
             PaneBackground="Transparent">
             <SplitView.Pane>
-                <Grid Padding="0,30,0,6">
+                <Grid Padding="0,20,0,6">
                     <Grid.RowDefinitions>
 
                         <RowDefinition Height="Auto" />
@@ -184,6 +186,7 @@
 
                     <!--  Account Calendars Host  -->
                     <ListView
+                        x:Name="CalendarHostListView"
                         Grid.Row="1"
                         ItemsSource="{x:Bind ViewModel.AccountCalendarStateService.GroupedAccountCalendars}"
                         SelectionMode="None">
@@ -320,7 +323,8 @@
                     <Frame
                         x:Name="ShellFrame"
                         Padding="0,0,7,7"
-                        IsNavigationStackEnabled="False">
+                        CacheSize="2"
+                        IsNavigationStackEnabled="True">
                         <Frame.ContentTransitions>
                             <TransitionCollection>
                                 <PopupThemeTransition />
@@ -379,7 +383,23 @@
                     </VisualState.Setters>
                 </VisualState>
             </VisualStateGroup>
+
+            <VisualStateGroup x:Name="ShellStateContentGroup">
+                <VisualState x:Name="DefaultShellContentState" />
+                <VisualState x:Name="EventDetailsContentState">
+                    <VisualState.Setters>
+                        <Setter Target="ShellContentArea.Visibility" Value="Collapsed" />
+                        <Setter Target="CalendarTypeSelector.Visibility" Value="Collapsed" />
+                        <Setter Target="CalendarView.IsEnabled" Value="False" />
+                        <Setter Target="CalendarHostListView.IsEnabled" Value="False" />
+                    </VisualState.Setters>
+                    <VisualState.StateTriggers>
+                        <StateTrigger IsActive="{x:Bind ViewModel.IsEventDetailsPageActive, Mode=OneWay}" />
+                    </VisualState.StateTriggers>
+                </VisualState>
+            </VisualStateGroup>
         </VisualStateManager.VisualStateGroups>
     </Grid>
 </abstract:AppShellAbstract>
 
+

Wino.Calendar/Views/AppShell.xaml.cs

@@ -2,6 +2,7 @@
 using Windows.UI.Xaml;
 using Windows.UI.Xaml.Controls;
 using Wino.Calendar.Views.Abstract;
+using Wino.Core.UWP;
 using Wino.Messaging.Client.Calendar;
 
 namespace Wino.Calendar.Views
@@ -42,5 +43,11 @@ namespace Wino.Calendar.Views
         {
             ManageCalendarDisplayType();
         }
+
+        private void ShellFrameContentNavigated(object sender, Windows.UI.Xaml.Navigation.NavigationEventArgs e)
+            => RealAppBar.ShellFrameContent = (e.Content as BasePage).ShellContent;
+
+        private void AppBarBackButtonClicked(Core.UWP.Controls.WinoAppTitleBar sender, RoutedEventArgs args)
+            => ViewModel.NavigationService.GoBack();
     }
 }

Wino.Calendar/Views/EventDetailsPage.xaml

@@ -0,0 +1,253 @@
+<?xml version="1.0" encoding="utf-8" ?>
+<abstract:EventDetailsPageAbstract
+    x:Class="Wino.Calendar.Views.EventDetailsPage"
+    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:abstract="using:Wino.Calendar.Views.Abstract"
+    xmlns:calendarHelpers="using:Wino.Calendar.Helpers"
+    xmlns:coreControls="using:Wino.Core.UWP.Controls"
+    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+    xmlns:domain="using:Wino.Core.Domain"
+    xmlns:helpers="using:Wino.Helpers"
+    xmlns:local="using:Wino.Calendar.Views"
+    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+    xmlns:wino="using:Wino.Core.UWP"
+    Style="{StaticResource PageStyle}"
+    mc:Ignorable="d">
+
+    <Page.Resources>
+        <Style x:Key="ActionBarElementContainerStackStyle" TargetType="StackPanel">
+            <Setter Property="Spacing" Value="6" />
+            <Setter Property="Padding" Value="10,0,4,0" />
+            <Setter Property="VerticalAlignment" Value="Center" />
+            <Setter Property="Orientation" Value="Horizontal" />
+        </Style>
+
+        <Style TargetType="AppBarElementContainer">
+            <Setter Property="VerticalAlignment" Value="Center" />
+        </Style>
+
+        <Style x:Key="EventDetailsPanelGridStyle" TargetType="Grid">
+            <Setter Property="Padding" Value="0,12" />
+            <Setter Property="Margin" Value="12,0" />
+        </Style>
+
+        <Style
+            x:Key="EventDetailsPanelTitleStyle"
+            BasedOn="{StaticResource SubtitleTextBlockStyle}"
+            TargetType="TextBlock">
+            <Setter Property="FontWeight" Value="Normal" />
+            <Setter Property="Margin" Value="0,0,0,20" />
+        </Style>
+    </Page.Resources>
+    <Grid Padding="20">
+        <Grid.RowDefinitions>
+            <RowDefinition Height="Auto" />
+            <RowDefinition Height="*" />
+        </Grid.RowDefinitions>
+
+        <!--  Action Bar  -->
+        <Border
+            VerticalAlignment="Top"
+            Background="{ThemeResource WinoContentZoneBackgroud}"
+            BorderBrush="{StaticResource CardStrokeColorDefaultBrush}"
+            BorderThickness="1"
+            CornerRadius="7">
+            <CommandBar
+                HorizontalAlignment="Left"
+                Background="Transparent"
+                DefaultLabelPosition="Right"
+                IsSticky="True"
+                OverflowButtonVisibility="Auto">
+                <AppBarToggleButton
+                    x:Name="ReadOnlyToggle"
+                    Content="Read-only event"
+                    IsChecked="True" />
+                <AppBarButton Label="{x:Bind domain:Translator.Buttons_Save}">
+                    <AppBarButton.Icon>
+                        <coreControls:WinoFontIcon Icon="Save" />
+                    </AppBarButton.Icon>
+                </AppBarButton>
+                <AppBarButton Label="{x:Bind domain:Translator.Buttons_Delete}">
+                    <AppBarButton.Icon>
+                        <coreControls:WinoFontIcon Icon="Delete" />
+                    </AppBarButton.Icon>
+                </AppBarButton>
+
+                <AppBarSeparator />
+
+                <!--  Join Online  -->
+                <AppBarButton Label="Join Online">
+                    <AppBarButton.Icon>
+                        <coreControls:WinoFontIcon Icon="EventJoinOnline" />
+                    </AppBarButton.Icon>
+                </AppBarButton>
+
+                <AppBarSeparator />
+
+                <!--  Join Options  -->
+                <AppBarButton Label="Accept">
+                    <AppBarButton.Icon>
+                        <coreControls:WinoFontIcon Foreground="#527257" Icon="EventAccept" />
+                    </AppBarButton.Icon>
+                </AppBarButton>
+
+                <AppBarButton Label="Tentative">
+                    <AppBarButton.Icon>
+                        <coreControls:WinoFontIcon Foreground="#805682" Icon="EventTentative" />
+                    </AppBarButton.Icon>
+                </AppBarButton>
+
+                <AppBarButton Label="Decline">
+                    <AppBarButton.Icon>
+                        <PathIcon Data="F1 M 10.253906 9.375 L 16.064453 15.185547 C 16.18815 15.309245 16.25 15.455729 16.25 15.625 C 16.25 15.794271 16.18815 15.940756 16.064453 16.064453 C 15.940754 16.188152 15.79427 16.25 15.625 16.25 C 15.455729 16.25 15.309244 16.188152 15.185547 16.064453 L 9.375 10.253906 L 3.564453 16.064453 C 3.440755 16.188152 3.294271 16.25 3.125 16.25 C 2.955729 16.25 2.809245 16.188152 2.685547 16.064453 C 2.561849 15.940756 2.5 15.794271 2.5 15.625 C 2.5 15.455729 2.561849 15.309245 2.685547 15.185547 L 8.496094 9.375 L 2.685547 3.564453 C 2.561849 3.440756 2.5 3.294271 2.5 3.125 C 2.5 2.95573 2.561849 2.809246 2.685547 2.685547 C 2.809245 2.56185 2.955729 2.5 3.125 2.5 C 3.294271 2.5 3.440755 2.56185 3.564453 2.685547 L 9.375 8.496094 L 15.185547 2.685547 C 15.309244 2.56185 15.455729 2.5 15.625 2.5 C 15.79427 2.5 15.940754 2.56185 16.064453 2.685547 C 16.18815 2.809246 16.25 2.95573 16.25 3.125 C 16.25 3.294271 16.18815 3.440756 16.064453 3.564453 Z " Foreground="#d94b4e" />
+
+                    </AppBarButton.Icon>
+                </AppBarButton>
+
+                <AppBarButton Label="Respond">
+                    <AppBarButton.Icon>
+                        <coreControls:WinoFontIcon Foreground="#805682" Icon="EventRespond" />
+                    </AppBarButton.Icon>
+                </AppBarButton>
+
+                <AppBarSeparator />
+
+                <!--  Show as  -->
+                <AppBarElementContainer>
+                    <StackPanel Style="{StaticResource ActionBarElementContainerStackStyle}">
+                        <TextBlock VerticalAlignment="Center" Text="Show as" />
+                        <ComboBox Width="150" />
+                    </StackPanel>
+                </AppBarElementContainer>
+
+                <!--  Reminder  -->
+                <AppBarElementContainer>
+                    <StackPanel Style="{StaticResource ActionBarElementContainerStackStyle}">
+                        <coreControls:WinoFontIcon FontSize="16" Icon="Reminder" />
+                        <TextBlock VerticalAlignment="Center" Text="Reminder" />
+                        <ComboBox Width="150" />
+                    </StackPanel>
+                </AppBarElementContainer>
+
+                <AppBarSeparator />
+
+                <!--  Edit Series  -->
+                <AppBarButton Label="Edit Series">
+                    <AppBarButton.Icon>
+                        <coreControls:WinoFontIcon Icon="EventEditSeries" />
+                    </AppBarButton.Icon>
+                </AppBarButton>
+            </CommandBar>
+        </Border>
+
+        <!--  Event details  -->
+        <ScrollViewer Grid.Row="1">
+            <Grid>
+                <Grid.ColumnDefinitions>
+                    <ColumnDefinition Width="2*" />
+                    <ColumnDefinition Width="1*" />
+                    <ColumnDefinition Width="1*" />
+                </Grid.ColumnDefinitions>
+
+                <Grid.RowDefinitions>
+                    <RowDefinition Height="*" />
+                    <RowDefinition Height="Auto" />
+                    <RowDefinition Height="Auto" />
+                </Grid.RowDefinitions>
+
+                <!--  Details  -->
+                <Grid x:Name="DetailsGrid" Style="{StaticResource EventDetailsPanelGridStyle}">
+                    <Grid.RowDefinitions>
+                        <RowDefinition Height="Auto" />
+                        <RowDefinition Height="*" />
+                    </Grid.RowDefinitions>
+
+                    <TextBlock Style="{StaticResource EventDetailsPanelTitleStyle}" Text="Details" />
+
+                    <Grid Grid.Row="1">
+                        <!--  Read-Only Event  -->
+                        <Grid
+                            x:Name="ReadOnlyDetailsGrid"
+                            RowSpacing="6"
+                            Visibility="{x:Bind ReadOnlyToggle.IsChecked, Mode=OneWay}">
+                            <Grid.RowDefinitions>
+                                <RowDefinition Height="Auto" />
+                                <RowDefinition Height="16" />
+                                <RowDefinition Height="Auto" />
+                                <RowDefinition Height="Auto" />
+                            </Grid.RowDefinitions>
+
+                            <!--  Title  -->
+                            <TextBlock Style="{StaticResource SubheaderTextBlockStyle}" Text="{x:Bind ViewModel.CurrentEvent.Title, Mode=OneWay}" />
+
+                            <!--  Date and Duration  -->
+                            <TextBlock Grid.Row="2" Text="{x:Bind calendarHelpers:CalendarXamlHelpers.GetEventDetailsDateString(ViewModel.CurrentEvent, ViewModel.CurrentSettings), Mode=OneWay}" />
+
+                            <!--  Recurrence Info  -->
+                            <Grid
+                                Grid.Row="3"
+                                ColumnSpacing="6"
+                                Visibility="{x:Bind ViewModel.CurrentEvent.IsRecurringEvent}">
+                                <Grid.ColumnDefinitions>
+                                    <ColumnDefinition Width="Auto" />
+                                    <ColumnDefinition Width="*" />
+                                </Grid.ColumnDefinitions>
+
+                                <coreControls:WinoFontIcon FontSize="14" Icon="CalendarEventRepeat" />
+                                <TextBlock
+                                    Grid.Column="1"
+                                    VerticalAlignment="Center"
+                                    Text="{x:Bind calendarHelpers:CalendarXamlHelpers.GetRecurrenceString(ViewModel.CurrentEvent)}" />
+                            </Grid>
+
+                        </Grid>
+
+                        <!--  Editable Event  -->
+                        <Grid Visibility="{x:Bind helpers:XamlHelpers.ReverseVisibilityConverter(ReadOnlyDetailsGrid.Visibility), Mode=OneWay}">
+                            <TextBlock Text="editing" />
+                        </Grid>
+                    </Grid>
+                </Grid>
+
+                <!--  People  -->
+                <Grid
+                    x:Name="PeopleGrid"
+                    Grid.Column="1"
+                    Style="{StaticResource EventDetailsPanelGridStyle}">
+                    <Grid.RowDefinitions>
+                        <RowDefinition Height="Auto" />
+                        <RowDefinition Height="*" />
+                    </Grid.RowDefinitions>
+
+                    <TextBlock Style="{StaticResource EventDetailsPanelTitleStyle}" Text="People" />
+
+                    <Grid Grid.Row="1">
+                        <Grid.RowDefinitions>
+                            <RowDefinition Height="Auto" />
+                            <RowDefinition Height="*" />
+                        </Grid.RowDefinitions>
+                        <AutoSuggestBox BorderThickness="0" PlaceholderText="Invite someone" />
+
+                        <!--  TODO: Attendees  -->
+                        <ListView Grid.Row="1" />
+                    </Grid>
+                </Grid>
+
+                <!--  Attachments  -->
+                <Grid
+                    x:Name="AttachmentsGrid"
+                    Grid.Column="2"
+                    Style="{StaticResource EventDetailsPanelGridStyle}">
+                    <Grid.RowDefinitions>
+                        <RowDefinition Height="Auto" />
+                        <RowDefinition Height="*" />
+                    </Grid.RowDefinitions>
+
+                    <TextBlock Style="{StaticResource EventDetailsPanelTitleStyle}" Text="Attachments" />
+
+                </Grid>
+            </Grid>
+        </ScrollViewer>
+    </Grid>
+</abstract:EventDetailsPageAbstract>

Wino.Calendar/Views/EventDetailsPage.xaml.cs

@@ -0,0 +1,13 @@
+
+using Wino.Calendar.Views.Abstract;
+
+namespace Wino.Calendar.Views
+{
+    public sealed partial class EventDetailsPage : EventDetailsPageAbstract
+    {
+        public EventDetailsPage()
+        {
+            this.InitializeComponent();
+        }
+    }
+}

Wino.Calendar/Wino.Calendar.csproj

@@ -140,6 +140,7 @@
     </Compile>
     <Compile Include="Args\TimelineCellSelectedArgs.cs" />
     <Compile Include="Args\TimelineCellUnselectedArgs.cs" />
+    <Compile Include="Controls\CalendarItemCommandBarFlyout.cs" />
     <Compile Include="Controls\CalendarItemControl.xaml.cs">
       <DependentUpon>CalendarItemControl.xaml</DependentUpon>
     </Compile>
@@ -172,6 +173,7 @@
     <Compile Include="Views\Abstract\AppShellAbstract.cs" />
     <Compile Include="Views\Abstract\CalendarPageAbstract.cs" />
     <Compile Include="Views\Abstract\CalendarSettingsPageAbstract.cs" />
+    <Compile Include="Views\Abstract\EventDetailsPageAbstract.cs" />
     <Compile Include="Views\Abstract\PersonalizationPageAbstract.cs" />
     <Compile Include="Views\Account\AccountManagementPage.xaml.cs">
       <DependentUpon>AccountManagementPage.xaml</DependentUpon>
@@ -182,6 +184,9 @@
     <Compile Include="Views\CalendarPage.xaml.cs">
       <DependentUpon>CalendarPage.xaml</DependentUpon>
     </Compile>
+    <Compile Include="Views\EventDetailsPage.xaml.cs">
+      <DependentUpon>EventDetailsPage.xaml</DependentUpon>
+    </Compile>
     <Compile Include="Views\Settings\AccountDetailsPage.xaml.cs">
       <DependentUpon>AccountDetailsPage.xaml</DependentUpon>
     </Compile>
@@ -301,6 +306,10 @@
       <SubType>Designer</SubType>
       <Generator>MSBuild:Compile</Generator>
     </Page>
+    <Page Include="Views\EventDetailsPage.xaml">
+      <SubType>Designer</SubType>
+      <Generator>MSBuild:Compile</Generator>
+    </Page>
     <Page Include="Views\Settings\AccountDetailsPage.xaml">
       <SubType>Designer</SubType>
       <Generator>MSBuild:Compile</Generator>
@@ -365,4 +374,4 @@
   <Target Name="AfterBuild">
   </Target>
   -->
-</Project>
+</Project>

Wino.Core.Domain/Enums/WinoPage.cs

@@ -29,5 +29,6 @@
         // Calendar
         CalendarPage,
         CalendarSettingsPage,
+        EventDetailsPage
     }
 }

Wino.Core.Domain/Interfaces/IWinoNavigationService.cs

@@ -12,5 +12,6 @@ namespace Wino.Core.Domain.Interfaces
                              NavigationTransitionType transition = NavigationTransitionType.None);
 
         Type GetPageType(WinoPage winoPage);
+        void GoBack();
     }
 }

Wino.Core.UWP/Controls/ControlConstants.cs

@@ -91,6 +91,13 @@ namespace Wino.Core.UWP.Controls
             { WinoIconGlyph.CalendarAttendee, "\uE91a" },
             { WinoIconGlyph.CalendarSync, "\uE91d" },
             { WinoIconGlyph.CalendarError, "\uE916" },
+            { WinoIconGlyph.CalendarAttendees, "\uE929" },
+            { WinoIconGlyph.EventEditSeries, "\uE92A" },
+            { WinoIconGlyph.EventTentative, "\uE928" },
+            { WinoIconGlyph.EventAccept, "\uE925" },
+            { WinoIconGlyph.EventRespond, "\uE924" },
+            { WinoIconGlyph.EventReminder, "\uE923" },
+            { WinoIconGlyph.EventJoinOnline, "\uE926" },
         };
     }
 }

Wino.Core.UWP/Controls/WinoAppTitleBar.xaml

@@ -102,7 +102,10 @@
                     <ColumnDefinition Width="*" />
                     <ColumnDefinition Width="Auto" />
                 </Grid.ColumnDefinitions>
-                <ContentPresenter x:Name="ShellContentContainer" Content="{x:Bind ShellFrameContent, Mode=OneWay}">
+                <ContentPresenter
+                    x:Name="ShellContentContainer"
+                    Content="{x:Bind ShellFrameContent, Mode=OneWay}"
+                    Visibility="{x:Bind IsShellFrameContentVisible, Mode=OneWay}">
                     <ContentPresenter.ContentTransitions>
                         <TransitionCollection>
                             <PaneThemeTransition Edge="Top" />

Wino.Core.UWP/Controls/WinoAppTitleBar.xaml.cs

@@ -24,6 +24,14 @@ namespace Wino.Core.UWP.Controls
         public static readonly DependencyProperty ReconnectCommandProperty = DependencyProperty.Register(nameof(ReconnectCommand), typeof(ICommand), typeof(WinoAppTitleBar), new PropertyMetadata(null));
         public static readonly DependencyProperty ShrinkShellContentOnExpansionProperty = DependencyProperty.Register(nameof(ShrinkShellContentOnExpansion), typeof(bool), typeof(WinoAppTitleBar), new PropertyMetadata(true));
         public static readonly DependencyProperty IsDragAreaProperty = DependencyProperty.Register(nameof(IsDragArea), typeof(bool), typeof(WinoAppTitleBar), new PropertyMetadata(false, new PropertyChangedCallback(OnIsDragAreaChanged)));
+        public static readonly DependencyProperty IsShellFrameContentVisibleProperty = DependencyProperty.Register(nameof(IsShellFrameContentVisible), typeof(bool), typeof(WinoAppTitleBar), new PropertyMetadata(true));
+
+
+        public bool IsShellFrameContentVisible
+        {
+            get { return (bool)GetValue(IsShellFrameContentVisibleProperty); }
+            set { SetValue(IsShellFrameContentVisibleProperty, value); }
+        }
 
         public ICommand ReconnectCommand
         {

Wino.Core.UWP/Controls/WinoFontIcon.cs

@@ -90,7 +90,15 @@ namespace Wino.Core.UWP.Controls
         CalendarError,
         Reminder,
         CalendarAttendee,
+        CalendarAttendees,
         CalendarSync,
+        EventRespond,
+        EventAccept,
+        EventTentative,
+        EventDecline,
+        EventReminder,
+        EventEditSeries,
+        EventJoinOnline,
     }
 
     public class WinoFontIcon : FontIcon

Wino.Core/Wino.Core.sln

@@ -0,0 +1,25 @@
+
+Microsoft Visual Studio Solution File, Format Version 12.00
+# Visual Studio Version 17
+VisualStudioVersion = 17.5.002.0
+MinimumVisualStudioVersion = 10.0.40219.1
+Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "Wino.Core", "Wino.Core.csproj", "{5AC00CB2-2C1B-4FAE-B513-6771101EB68B}"
+EndProject
+Global
+	GlobalSection(SolutionConfigurationPlatforms) = preSolution
+		Debug|Any CPU = Debug|Any CPU
+		Release|Any CPU = Release|Any CPU
+	EndGlobalSection
+	GlobalSection(ProjectConfigurationPlatforms) = postSolution
+		{5AC00CB2-2C1B-4FAE-B513-6771101EB68B}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
+		{5AC00CB2-2C1B-4FAE-B513-6771101EB68B}.Debug|Any CPU.Build.0 = Debug|Any CPU
+		{5AC00CB2-2C1B-4FAE-B513-6771101EB68B}.Release|Any CPU.ActiveCfg = Release|Any CPU
+		{5AC00CB2-2C1B-4FAE-B513-6771101EB68B}.Release|Any CPU.Build.0 = Release|Any CPU
+	EndGlobalSection
+	GlobalSection(SolutionProperties) = preSolution
+		HideSolutionNode = FALSE
+	EndGlobalSection
+	GlobalSection(ExtensibilityGlobals) = postSolution
+		SolutionGuid = {BF39589E-A83F-45A6-9344-CBDFD40E156A}
+	EndGlobalSection
+EndGlobal

Wino.Messages/Client/Calendar/DetailsPageStateChangedMessage.cs

@@ -0,0 +1,7 @@
+namespace Wino.Messaging.Client.Calendar
+{
+    /// <summary>
+    /// When event details page is activated or deactivated.
+    /// </summary>
+    public record DetailsPageStateChangedMessage(bool IsActivated);
+}

Wino.Packaging/Package.appxmanifest

@@ -11,7 +11,7 @@
 	<Identity
 	  Name="58272BurakKSE.WinoMailPreview"
 	  Publisher="CN=51FBDAF3-E212-4149-89A2-A2636B3BC911"
-	  Version="1.9.41.0" />
+	  Version="1.9.43.0" />
 	
 	<Extensions>
 		<!-- Publisher Cache Folders -->