From eda2a5331fc4d64da3a023192ad070507f3391cd Mon Sep 17 00:00:00 2001
From: marcinzelent <marcin@zelent.net>
Date: Sun, 12 Feb 2017 22:18:11 +0100
Subject: Cleaned up Views and styles. Started working on sorting.

---
 EventMaker/EventMaker/App.xaml                    | 202 +++++++++++++++-----
 EventMaker/EventMaker/View/CreateEventPage.xaml   | 185 ++++--------------
 EventMaker/EventMaker/View/EditEventPage.xaml     | 182 ++++--------------
 EventMaker/EventMaker/View/EditEventPage.xaml.cs  |   3 +-
 EventMaker/EventMaker/View/EventPage.xaml         | 220 ++++++++++------------
 EventMaker/EventMaker/ViewModel/EventViewModel.cs |  19 ++
 EventMaker/EventMaker/project.json                |   2 +-
 7 files changed, 343 insertions(+), 470 deletions(-)

diff --git a/EventMaker/EventMaker/App.xaml b/EventMaker/EventMaker/App.xaml
index 6881b63..88c46a6 100644
--- a/EventMaker/EventMaker/App.xaml
+++ b/EventMaker/EventMaker/App.xaml
@@ -3,56 +3,168 @@
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     RequestedTheme="Light">
+
     <Application.Resources>
-        <Style x:Key="EventsListViewItem" TargetType="ListViewItem">
+        <Style x:Key="TextBoxStyle" TargetType="TextBox">
+            <Setter Property="Margin" Value="10,0,10,10" />
+            <Setter Property="BorderThickness" Value="1" />
+        </Style>
+        <Style x:Key="TimePickerStyle" TargetType="TimePicker">
+            <Setter Property="IsTabStop" Value="False" />
+            <Setter Property="MinWidth" Value="200" />
+            <Setter Property="MaxWidth" Value="456" />
             <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}" />
             <Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}" />
-            <Setter Property="Background" Value="White" />
-            <Setter Property="Foreground" Value="{ThemeResource ListViewItemForeground}" />
-            <Setter Property="TabNavigation" Value="Local" />
-            <Setter Property="IsHoldingEnabled" Value="True" />
-            <Setter Property="Padding" Value="0" />
-            <Setter Property="Margin" Value="12,12,12,0"/>
-            <Setter Property="BorderThickness" Value="1"/>
-            <Setter Property="BorderBrush" Value="#DFE0E4"/>
-            <Setter Property="HorizontalContentAlignment" Value="Stretch" />
-            <Setter Property="VerticalContentAlignment" Value="Center" />
-            <Setter Property="MinWidth" Value="{ThemeResource ListViewItemMinWidth}" />
-            <Setter Property="MinHeight" Value="{ThemeResource ListViewItemMinHeight}" />
-            <Setter Property="AllowDrop" Value="False" />
-            <Setter Property="UseSystemFocusVisuals" Value="True" />
-            <Setter Property="FocusVisualMargin" Value="0" />
-            <Setter Property="FocusVisualPrimaryBrush" Value="{ThemeResource ListViewItemFocusVisualPrimaryBrush}" />
-            <Setter Property="FocusVisualPrimaryThickness" Value="2" />
-            <Setter Property="FocusVisualSecondaryBrush" Value="{ThemeResource ListViewItemFocusVisualSecondaryBrush}" />
-            <Setter Property="FocusVisualSecondaryThickness" Value="1" />
+            <Setter Property="Foreground" Value="{ThemeResource TimePickerButtonForeground}" />
+            <Setter Property="HorizontalAlignment" Value="Left" />
+            <Setter Property="VerticalAlignment" Value="Center" />
             <Setter Property="Template">
                 <Setter.Value>
-                    <ControlTemplate TargetType="ListViewItem">
-                        <ListViewItemPresenter ContentTransitions="{TemplateBinding ContentTransitions}"
-                        Control.IsTemplateFocusTarget="True"
-                        SelectionCheckMarkVisualEnabled="{ThemeResource ListViewItemSelectionCheckMarkVisualEnabled}"
-                        CheckBrush="{ThemeResource ListViewItemCheckBrush}"
-                        CheckBoxBrush="{ThemeResource ListViewItemCheckBoxBrush}"
-                        DragBackground="{ThemeResource ListViewItemDragBackground}"
-                        DragForeground="{ThemeResource ListViewItemDragForeground}"
-                        FocusBorderBrush="{ThemeResource ListViewItemFocusBorderBrush}"
-                        FocusSecondaryBorderBrush="{ThemeResource ListViewItemFocusSecondaryBorderBrush}"
-                        PlaceholderBackground="{ThemeResource ListViewItemPlaceholderBackground}"
-                        PointerOverBackground="{ThemeResource ListViewItemBackgroundPointerOver}"
-                        PointerOverForeground="{ThemeResource ListViewItemForegroundPointerOver}"
-                        SelectedBackground="White"
-                        SelectedForeground="{ThemeResource ListViewItemForegroundSelected}"
-                        SelectedPointerOverBackground="White"
-                        PressedBackground="{ThemeResource ListViewItemBackgroundPressed}"
-                        SelectedPressedBackground="{ThemeResource ListViewItemBackgroundSelectedPressed}"
-                        DisabledOpacity="{ThemeResource ListViewItemDisabledThemeOpacity}"
-                        DragOpacity="{ThemeResource ListViewItemDragThemeOpacity}"
-                        ReorderHintOffset="{ThemeResource ListViewItemReorderHintThemeOffset}"
-                        HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
-                        VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
-                        ContentMargin="{TemplateBinding Padding}"
-                        CheckMode="{ThemeResource ListViewItemCheckMode}" />
+                    <ControlTemplate TargetType="TimePicker">
+                        <StackPanel x:Name="LayoutRoot" Margin="{TemplateBinding Padding}">
+                            <StackPanel.Resources>
+                                <Style x:Key="TimePickerFlyoutButtonStyle" TargetType="Button">
+                                    <Setter Property="UseSystemFocusVisuals" Value="False" />
+                                    <Setter Property="ElementSoundMode" Value="FocusOnly" />
+                                    <Setter Property="Template">
+                                        <Setter.Value>
+                                            <ControlTemplate TargetType="Button">
+                                                <Grid Background="{TemplateBinding Background}">
+                                                    <ContentPresenter
+                                                        x:Name="ContentPresenter"
+                                                        HorizontalContentAlignment="Stretch"
+                                                        VerticalContentAlignment="Stretch"
+                                                        AutomationProperties.AccessibilityView="Raw"
+                                                        Background="{ThemeResource TimePickerButtonBackground}"
+                                                        BorderBrush="{ThemeResource TimePickerButtonBorderBrush}"
+                                                        BorderThickness="1"
+                                                        Content="{TemplateBinding Content}"
+                                                        Foreground="{TemplateBinding Foreground}" />
+                                                    <VisualStateManager.VisualStateGroups>
+                                                        <VisualStateGroup x:Name="CommonStates">
+                                                            <VisualState x:Name="Normal" />
+                                                            <VisualState x:Name="PointerOver">
+                                                                <Storyboard>
+                                                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="BorderBrush">
+                                                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TimePickerButtonBorderBrushPointerOver}" />
+                                                                    </ObjectAnimationUsingKeyFrames>
+                                                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Background">
+                                                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TimePickerButtonBackgroundPointerOver}" />
+                                                                    </ObjectAnimationUsingKeyFrames>
+                                                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
+                                                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TimePickerButtonForegroundPointerOver}" />
+                                                                    </ObjectAnimationUsingKeyFrames>
+                                                                </Storyboard>
+                                                            </VisualState>
+                                                            <VisualState x:Name="Pressed">
+                                                                <Storyboard>
+                                                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Background">
+                                                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TimePickerButtonBackgroundPressed}" />
+                                                                    </ObjectAnimationUsingKeyFrames>
+                                                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="BorderBrush">
+                                                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TimePickerButtonBorderBrushPressed}" />
+                                                                    </ObjectAnimationUsingKeyFrames>
+                                                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
+                                                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TimePickerButtonForegroundPressed}" />
+                                                                    </ObjectAnimationUsingKeyFrames>
+                                                                </Storyboard>
+                                                            </VisualState>
+                                                        </VisualStateGroup>
+                                                    </VisualStateManager.VisualStateGroups>
+                                                </Grid>
+                                            </ControlTemplate>
+                                        </Setter.Value>
+                                    </Setter>
+                                </Style>
+                            </StackPanel.Resources>
+                            <ContentPresenter
+                                x:Name="HeaderContentPresenter"
+                                Margin="0,0,0,8"
+                                x:DeferLoadStrategy="Lazy"
+                                AutomationProperties.AccessibilityView="Raw"
+                                Content="{TemplateBinding Header}"
+                                ContentTemplate="{TemplateBinding HeaderTemplate}"
+                                Foreground="{ThemeResource TimePickerHeaderForeground}"
+                                Visibility="Collapsed" />
+                            <Button
+                                x:Name="FlyoutButton"
+                                HorizontalAlignment="Stretch"
+                                HorizontalContentAlignment="Stretch"
+                                Background="{TemplateBinding Background}"
+                                Foreground="{TemplateBinding Foreground}"
+                                IsEnabled="{TemplateBinding IsEnabled}"
+                                Style="{StaticResource TimePickerFlyoutButtonStyle}">
+                                <Grid x:Name="FlyoutButtonContentGrid">
+                                    <Grid.ColumnDefinitions>
+                                        <ColumnDefinition x:Name="FirstTextBlockColumn" Width="*" />
+                                        <ColumnDefinition Width="Auto" />
+                                        <ColumnDefinition x:Name="SecondTextBlockColumn" Width="*" />
+                                        <ColumnDefinition Width="Auto" />
+                                        <ColumnDefinition x:Name="ThirdTextBlockColumn" Width="*" />
+                                    </Grid.ColumnDefinitions>
+                                    <Border x:Name="FirstPickerHost" Grid.Column="0">
+                                        <TextBlock
+                                            x:Name="HourTextBlock"
+                                            Padding="0,3,0,5"
+                                            AutomationProperties.AccessibilityView="Raw"
+                                            FontFamily="{TemplateBinding FontFamily}"
+                                            FontSize="{TemplateBinding FontSize}"
+                                            FontWeight="{TemplateBinding FontWeight}"
+                                            TextAlignment="Center" />
+                                    </Border>
+                                    <Rectangle
+                                        x:Name="FirstColumnDivider"
+                                        Grid.Column="1"
+                                        Width="2"
+                                        HorizontalAlignment="Center"
+                                        Fill="{ThemeResource TimePickerSpacerFill}" />
+                                    <Border x:Name="SecondPickerHost" Grid.Column="2">
+                                        <TextBlock
+                                            x:Name="MinuteTextBlock"
+                                            Padding="0,3,0,5"
+                                            AutomationProperties.AccessibilityView="Raw"
+                                            FontFamily="{TemplateBinding FontFamily}"
+                                            FontSize="{TemplateBinding FontSize}"
+                                            FontWeight="{TemplateBinding FontWeight}"
+                                            TextAlignment="Center" />
+                                    </Border>
+                                    <Rectangle
+                                        x:Name="SecondColumnDivider"
+                                        Grid.Column="3"
+                                        Width="2"
+                                        HorizontalAlignment="Center"
+                                        Fill="{ThemeResource TimePickerSpacerFill}" />
+                                    <Border x:Name="ThirdPickerHost" Grid.Column="4">
+                                        <TextBlock
+                                            x:Name="PeriodTextBlock"
+                                            Padding="0,3,0,5"
+                                            AutomationProperties.AccessibilityView="Raw"
+                                            FontFamily="{TemplateBinding FontFamily}"
+                                            FontSize="{TemplateBinding FontSize}"
+                                            FontWeight="{TemplateBinding FontWeight}"
+                                            TextAlignment="Center" />
+                                    </Border>
+                                </Grid>
+                            </Button>
+                            <VisualStateManager.VisualStateGroups>
+                                <VisualStateGroup x:Name="CommonStates">
+                                    <VisualState x:Name="Normal" />
+                                    <VisualState x:Name="Disabled">
+                                        <Storyboard>
+                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HeaderContentPresenter" Storyboard.TargetProperty="Foreground">
+                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TimePickerHeaderForegroundDisabled}" />
+                                            </ObjectAnimationUsingKeyFrames>
+                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="FirstColumnDivider" Storyboard.TargetProperty="Fill">
+                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TimePickerSpacerFillDisabled}" />
+                                            </ObjectAnimationUsingKeyFrames>
+                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="SecondColumnDivider" Storyboard.TargetProperty="Fill">
+                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TimePickerSpacerFillDisabled}" />
+                                            </ObjectAnimationUsingKeyFrames>
+                                        </Storyboard>
+                                    </VisualState>
+                                </VisualStateGroup>
+                            </VisualStateManager.VisualStateGroups>
+                        </StackPanel>
                     </ControlTemplate>
                 </Setter.Value>
             </Setter>
diff --git a/EventMaker/EventMaker/View/CreateEventPage.xaml b/EventMaker/EventMaker/View/CreateEventPage.xaml
index 30554bf..c5eb2ab 100644
--- a/EventMaker/EventMaker/View/CreateEventPage.xaml
+++ b/EventMaker/EventMaker/View/CreateEventPage.xaml
@@ -5,168 +5,51 @@
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
     xmlns:viewModel="using:EventMaker.ViewModel"
-    xmlns:interactivity="using:Microsoft.Xaml.Interactivity"
-    xmlns:core="using:Microsoft.Xaml.Interactions.Core"
     mc:Ignorable="d">
 
     <Page.DataContext>
-        <viewModel:EventViewModel/>
+        <viewModel:EventViewModel />
     </Page.DataContext>
 
-    <Page.Resources>
-        <Style x:Key="TextBoxStyle" TargetType="TextBox">
-            <Setter Property="Margin" Value="10,0,10,10"/>
-            <Setter Property="BorderThickness" Value="1"/>
-        </Style>
-        <Style x:Key="TimePickerStyle1" TargetType="TimePicker">
-            <Setter Property="IsTabStop" Value="False"/>
-            <Setter Property="MinWidth" Value="200"/>
-            <Setter Property="MaxWidth" Value="456"/>
-            <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}"/>
-            <Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}"/>
-            <Setter Property="Foreground" Value="{ThemeResource TimePickerButtonForeground}"/>
-            <Setter Property="HorizontalAlignment" Value="Left"/>
-            <Setter Property="VerticalAlignment" Value="Center"/>
-            <Setter Property="Template">
-                <Setter.Value>
-                    <ControlTemplate TargetType="TimePicker">
-                        <StackPanel x:Name="LayoutRoot" Margin="{TemplateBinding Padding}">
-                            <StackPanel.Resources>
-                                <Style x:Key="TimePickerFlyoutButtonStyle" TargetType="Button">
-                                    <Setter Property="UseSystemFocusVisuals" Value="False"/>
-                                    <Setter Property="ElementSoundMode" Value="FocusOnly"/>
-                                    <Setter Property="Template">
-                                        <Setter.Value>
-                                            <ControlTemplate TargetType="Button">
-                                                <Grid Background="{TemplateBinding Background}">
-                                                    <VisualStateManager.VisualStateGroups>
-                                                        <VisualStateGroup x:Name="CommonStates">
-                                                            <VisualState x:Name="Normal"/>
-                                                            <VisualState x:Name="PointerOver">
-                                                                <Storyboard>
-                                                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="ContentPresenter">
-                                                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TimePickerButtonBorderBrushPointerOver}"/>
-                                                                    </ObjectAnimationUsingKeyFrames>
-                                                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="ContentPresenter">
-                                                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TimePickerButtonBackgroundPointerOver}"/>
-                                                                    </ObjectAnimationUsingKeyFrames>
-                                                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter">
-                                                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TimePickerButtonForegroundPointerOver}"/>
-                                                                    </ObjectAnimationUsingKeyFrames>
-                                                                </Storyboard>
-                                                            </VisualState>
-                                                            <VisualState x:Name="Pressed">
-                                                                <Storyboard>
-                                                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="ContentPresenter">
-                                                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TimePickerButtonBackgroundPressed}"/>
-                                                                    </ObjectAnimationUsingKeyFrames>
-                                                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="ContentPresenter">
-                                                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TimePickerButtonBorderBrushPressed}"/>
-                                                                    </ObjectAnimationUsingKeyFrames>
-                                                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter">
-                                                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TimePickerButtonForegroundPressed}"/>
-                                                                    </ObjectAnimationUsingKeyFrames>
-                                                                </Storyboard>
-                                                            </VisualState>
-                                                            <VisualState x:Name="Disabled">
-                                                                <Storyboard>
-                                                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="ContentPresenter">
-                                                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TimePickerButtonBackgroundDisabled}"/>
-                                                                    </ObjectAnimationUsingKeyFrames>
-                                                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="ContentPresenter">
-                                                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TimePickerButtonBorderBrushDisabled}"/>
-                                                                    </ObjectAnimationUsingKeyFrames>
-                                                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter">
-                                                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TimePickerButtonForegroundDisabled}"/>
-                                                                    </ObjectAnimationUsingKeyFrames>
-                                                                </Storyboard>
-                                                            </VisualState>
-                                                        </VisualStateGroup>
-                                                        <VisualStateGroup x:Name="FocusStates">
-                                                            <VisualState x:Name="Focused">
-                                                                <Storyboard>
-                                                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="ContentPresenter">
-                                                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TimePickerButtonBackgroundFocused}"/>
-                                                                    </ObjectAnimationUsingKeyFrames>
-                                                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter">
-                                                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TimePickerButtonForegroundFocused}"/>
-                                                                    </ObjectAnimationUsingKeyFrames>
-                                                                </Storyboard>
-                                                            </VisualState>
-                                                            <VisualState x:Name="Unfocused"/>
-                                                            <VisualState x:Name="PointerFocused"/>
-                                                        </VisualStateGroup>
-                                                    </VisualStateManager.VisualStateGroups>
-                                                    <ContentPresenter x:Name="ContentPresenter" AutomationProperties.AccessibilityView="Raw" BorderBrush="{ThemeResource TimePickerButtonBorderBrush}" BorderThickness="1" Background="{ThemeResource TimePickerButtonBackground}" Content="{TemplateBinding Content}" Foreground="{TemplateBinding Foreground}" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch"/>
-                                                </Grid>
-                                            </ControlTemplate>
-                                        </Setter.Value>
-                                    </Setter>
-                                </Style>
-                            </StackPanel.Resources>
-                            <VisualStateManager.VisualStateGroups>
-                                <VisualStateGroup x:Name="CommonStates">
-                                    <VisualState x:Name="Normal"/>
-                                    <VisualState x:Name="Disabled">
-                                        <Storyboard>
-                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="HeaderContentPresenter">
-                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TimePickerHeaderForegroundDisabled}"/>
-                                            </ObjectAnimationUsingKeyFrames>
-                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="FirstColumnDivider">
-                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TimePickerSpacerFillDisabled}"/>
-                                            </ObjectAnimationUsingKeyFrames>
-                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="SecondColumnDivider">
-                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TimePickerSpacerFillDisabled}"/>
-                                            </ObjectAnimationUsingKeyFrames>
-                                        </Storyboard>
-                                    </VisualState>
-                                </VisualStateGroup>
-                            </VisualStateManager.VisualStateGroups>
-                            <ContentPresenter x:Name="HeaderContentPresenter" AutomationProperties.AccessibilityView="Raw" ContentTemplate="{TemplateBinding HeaderTemplate}" Content="{TemplateBinding Header}" Foreground="{ThemeResource TimePickerHeaderForeground}" Margin="0,0,0,8" Visibility="Collapsed" x:DeferLoadStrategy="Lazy"/>
-                            <Button x:Name="FlyoutButton" Background="{TemplateBinding Background}" Foreground="{TemplateBinding Foreground}" HorizontalAlignment="Stretch" HorizontalContentAlignment="Stretch" IsEnabled="{TemplateBinding IsEnabled}" Style="{StaticResource TimePickerFlyoutButtonStyle}">
-                                <Grid x:Name="FlyoutButtonContentGrid">
-                                    <Grid.ColumnDefinitions>
-                                        <ColumnDefinition x:Name="FirstTextBlockColumn" Width="*"/>
-                                        <ColumnDefinition Width="Auto"/>
-                                        <ColumnDefinition x:Name="SecondTextBlockColumn" Width="*"/>
-                                        <ColumnDefinition Width="Auto"/>
-                                        <ColumnDefinition x:Name="ThirdTextBlockColumn" Width="*"/>
-                                    </Grid.ColumnDefinitions>
-                                    <Border x:Name="FirstPickerHost" Grid.Column="0">
-                                        <TextBlock x:Name="HourTextBlock" AutomationProperties.AccessibilityView="Raw" FontWeight="{TemplateBinding FontWeight}" FontSize="{TemplateBinding FontSize}" FontFamily="{TemplateBinding FontFamily}" Padding="0,3,0,5" TextAlignment="Center"/>
-                                    </Border>
-                                    <Rectangle x:Name="FirstColumnDivider" Grid.Column="1" Fill="{ThemeResource TimePickerSpacerFill}" HorizontalAlignment="Center" Width="2"/>
-                                    <Border x:Name="SecondPickerHost" Grid.Column="2">
-                                        <TextBlock x:Name="MinuteTextBlock" AutomationProperties.AccessibilityView="Raw" FontWeight="{TemplateBinding FontWeight}" FontSize="{TemplateBinding FontSize}" FontFamily="{TemplateBinding FontFamily}" Padding="0,3,0,5" TextAlignment="Center"/>
-                                    </Border>
-                                    <Rectangle x:Name="SecondColumnDivider" Grid.Column="3" Fill="{ThemeResource TimePickerSpacerFill}" HorizontalAlignment="Center" Width="2"/>
-                                    <Border x:Name="ThirdPickerHost" Grid.Column="4">
-                                        <TextBlock x:Name="PeriodTextBlock" AutomationProperties.AccessibilityView="Raw" FontWeight="{TemplateBinding FontWeight}" FontSize="{TemplateBinding FontSize}" FontFamily="{TemplateBinding FontFamily}" Padding="0,3,0,5" TextAlignment="Center"/>
-                                    </Border>
-                                </Grid>
-                            </Button>
-                        </StackPanel>
-                    </ControlTemplate>
-                </Setter.Value>
-            </Setter>
-        </Style>
-    </Page.Resources>
-
     <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
         <StackPanel MaxWidth="600">
             <StackPanel.Resources>
-                <Style BasedOn="{ StaticResource TextBoxStyle}" TargetType="TextBox"/>
+                <Style BasedOn="{StaticResource TextBoxStyle}" TargetType="TextBox" />
             </StackPanel.Resources>
-            <TextBlock FontSize="50" Text="Add Event" VerticalAlignment="Center" Margin="10,0,0,0"/>
-            <TextBox PlaceholderText="Name" Text="{Binding EventTemplate.Name,Mode=TwoWay}" />
-            <TextBox PlaceholderText="Description" Text="{Binding EventTemplate.Description,Mode=TwoWay}" MinHeight="64" MaxHeight="320" TextWrapping="Wrap"/>
+            <TextBlock
+                Margin="10,0,0,0"
+                VerticalAlignment="Center"
+                FontSize="50"
+                Text="Add Event" />
+            <TextBox PlaceholderText="Name" Text="{Binding EventTemplate.Name, Mode=TwoWay}" />
+            <TextBox
+                MinHeight="64"
+                MaxHeight="320"
+                PlaceholderText="Description"
+                Text="{Binding EventTemplate.Description, Mode=TwoWay}"
+                TextWrapping="Wrap" />
             <StackPanel Orientation="Horizontal">
-                <CalendarDatePicker Date="{Binding Date,Mode=TwoWay}" Margin="10,0,10,10" BorderThickness="1"/>
-                <TimePicker Time="{Binding Time,Mode=TwoWay}" Margin="10,0,10,10" Style="{StaticResource TimePickerStyle1}"/>
+                <CalendarDatePicker
+                    Margin="10,0,10,10"
+                    BorderThickness="1"
+                    Date="{Binding Date, Mode=TwoWay}" />
+                <TimePicker
+                    Margin="10,0,10,10"
+                    Style="{StaticResource TimePickerStyle}"
+                    Time="{Binding Time, Mode=TwoWay}" />
             </StackPanel>
-            <TextBox PlaceholderText="Place" Text="{Binding EventTemplate.Place,Mode=TwoWay}"/>
-            <Button Height="32" Width="84" Content="Add" Command="{Binding CreateEventCommand}" HorizontalAlignment="Right" Margin="0,0,10,0" Background="#FF106EBE" Foreground="White" Click="GoToEventPage"/>
+            <TextBox PlaceholderText="Place" Text="{Binding EventTemplate.Place, Mode=TwoWay}" />
+            <Button
+                Width="84"
+                Height="32"
+                Margin="0,0,10,0"
+                HorizontalAlignment="Right"
+                Background="#FF106EBE"
+                Click="GoToEventPage"
+                Command="{Binding CreateEventCommand}"
+                Content="Add"
+                Foreground="White" />
         </StackPanel>
     </Grid>
 
-</Page>                                                             
+</Page>
diff --git a/EventMaker/EventMaker/View/EditEventPage.xaml b/EventMaker/EventMaker/View/EditEventPage.xaml
index ea8747c..3ba2e14 100644
--- a/EventMaker/EventMaker/View/EditEventPage.xaml
+++ b/EventMaker/EventMaker/View/EditEventPage.xaml
@@ -2,169 +2,53 @@
     x:Class="EventMaker.View.EditEventPage"
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-    xmlns:local="using:EventMaker.View"
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
     xmlns:viewModel="using:EventMaker.ViewModel"
     mc:Ignorable="d">
 
     <Page.DataContext>
-        <viewModel:EventViewModel/>
+        <viewModel:EventViewModel />
     </Page.DataContext>
 
-    <Page.Resources>
-        <Style x:Key="TextBoxStyle" TargetType="TextBox">
-            <Setter Property="Margin" Value="10,0,10,10"/>
-            <Setter Property="BorderThickness" Value="1"/>
-        </Style>
-        <Style x:Key="TimePickerStyle1" TargetType="TimePicker">
-            <Setter Property="IsTabStop" Value="False"/>
-            <Setter Property="MinWidth" Value="200"/>
-            <Setter Property="MaxWidth" Value="456"/>
-            <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}"/>
-            <Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}"/>
-            <Setter Property="Foreground" Value="{ThemeResource TimePickerButtonForeground}"/>
-            <Setter Property="HorizontalAlignment" Value="Left"/>
-            <Setter Property="VerticalAlignment" Value="Center"/>
-            <Setter Property="Template">
-                <Setter.Value>
-                    <ControlTemplate TargetType="TimePicker">
-                        <StackPanel x:Name="LayoutRoot" Margin="{TemplateBinding Padding}">
-                            <StackPanel.Resources>
-                                <Style x:Key="TimePickerFlyoutButtonStyle" TargetType="Button">
-                                    <Setter Property="UseSystemFocusVisuals" Value="False"/>
-                                    <Setter Property="ElementSoundMode" Value="FocusOnly"/>
-                                    <Setter Property="Template">
-                                        <Setter.Value>
-                                            <ControlTemplate TargetType="Button">
-                                                <Grid Background="{TemplateBinding Background}">
-                                                    <VisualStateManager.VisualStateGroups>
-                                                        <VisualStateGroup x:Name="CommonStates">
-                                                            <VisualState x:Name="Normal"/>
-                                                            <VisualState x:Name="PointerOver">
-                                                                <Storyboard>
-                                                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="ContentPresenter">
-                                                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TimePickerButtonBorderBrushPointerOver}"/>
-                                                                    </ObjectAnimationUsingKeyFrames>
-                                                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="ContentPresenter">
-                                                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TimePickerButtonBackgroundPointerOver}"/>
-                                                                    </ObjectAnimationUsingKeyFrames>
-                                                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter">
-                                                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TimePickerButtonForegroundPointerOver}"/>
-                                                                    </ObjectAnimationUsingKeyFrames>
-                                                                </Storyboard>
-                                                            </VisualState>
-                                                            <VisualState x:Name="Pressed">
-                                                                <Storyboard>
-                                                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="ContentPresenter">
-                                                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TimePickerButtonBackgroundPressed}"/>
-                                                                    </ObjectAnimationUsingKeyFrames>
-                                                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="ContentPresenter">
-                                                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TimePickerButtonBorderBrushPressed}"/>
-                                                                    </ObjectAnimationUsingKeyFrames>
-                                                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter">
-                                                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TimePickerButtonForegroundPressed}"/>
-                                                                    </ObjectAnimationUsingKeyFrames>
-                                                                </Storyboard>
-                                                            </VisualState>
-                                                            <VisualState x:Name="Disabled">
-                                                                <Storyboard>
-                                                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="ContentPresenter">
-                                                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TimePickerButtonBackgroundDisabled}"/>
-                                                                    </ObjectAnimationUsingKeyFrames>
-                                                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="ContentPresenter">
-                                                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TimePickerButtonBorderBrushDisabled}"/>
-                                                                    </ObjectAnimationUsingKeyFrames>
-                                                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter">
-                                                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TimePickerButtonForegroundDisabled}"/>
-                                                                    </ObjectAnimationUsingKeyFrames>
-                                                                </Storyboard>
-                                                            </VisualState>
-                                                        </VisualStateGroup>
-                                                        <VisualStateGroup x:Name="FocusStates">
-                                                            <VisualState x:Name="Focused">
-                                                                <Storyboard>
-                                                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="ContentPresenter">
-                                                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TimePickerButtonBackgroundFocused}"/>
-                                                                    </ObjectAnimationUsingKeyFrames>
-                                                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter">
-                                                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TimePickerButtonForegroundFocused}"/>
-                                                                    </ObjectAnimationUsingKeyFrames>
-                                                                </Storyboard>
-                                                            </VisualState>
-                                                            <VisualState x:Name="Unfocused"/>
-                                                            <VisualState x:Name="PointerFocused"/>
-                                                        </VisualStateGroup>
-                                                    </VisualStateManager.VisualStateGroups>
-                                                    <ContentPresenter x:Name="ContentPresenter" AutomationProperties.AccessibilityView="Raw" BorderBrush="{ThemeResource TimePickerButtonBorderBrush}" BorderThickness="1" Background="{ThemeResource TimePickerButtonBackground}" Content="{TemplateBinding Content}" Foreground="{TemplateBinding Foreground}" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch"/>
-                                                </Grid>
-                                            </ControlTemplate>
-                                        </Setter.Value>
-                                    </Setter>
-                                </Style>
-                            </StackPanel.Resources>
-                            <VisualStateManager.VisualStateGroups>
-                                <VisualStateGroup x:Name="CommonStates">
-                                    <VisualState x:Name="Normal"/>
-                                    <VisualState x:Name="Disabled">
-                                        <Storyboard>
-                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="HeaderContentPresenter">
-                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TimePickerHeaderForegroundDisabled}"/>
-                                            </ObjectAnimationUsingKeyFrames>
-                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="FirstColumnDivider">
-                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TimePickerSpacerFillDisabled}"/>
-                                            </ObjectAnimationUsingKeyFrames>
-                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="SecondColumnDivider">
-                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TimePickerSpacerFillDisabled}"/>
-                                            </ObjectAnimationUsingKeyFrames>
-                                        </Storyboard>
-                                    </VisualState>
-                                </VisualStateGroup>
-                            </VisualStateManager.VisualStateGroups>
-                            <ContentPresenter x:Name="HeaderContentPresenter" AutomationProperties.AccessibilityView="Raw" ContentTemplate="{TemplateBinding HeaderTemplate}" Content="{TemplateBinding Header}" Foreground="{ThemeResource TimePickerHeaderForeground}" Margin="0,0,0,8" Visibility="Collapsed" x:DeferLoadStrategy="Lazy"/>
-                            <Button x:Name="FlyoutButton" Background="{TemplateBinding Background}" Foreground="{TemplateBinding Foreground}" HorizontalAlignment="Stretch" HorizontalContentAlignment="Stretch" IsEnabled="{TemplateBinding IsEnabled}" Style="{StaticResource TimePickerFlyoutButtonStyle}">
-                                <Grid x:Name="FlyoutButtonContentGrid">
-                                    <Grid.ColumnDefinitions>
-                                        <ColumnDefinition x:Name="FirstTextBlockColumn" Width="*"/>
-                                        <ColumnDefinition Width="Auto"/>
-                                        <ColumnDefinition x:Name="SecondTextBlockColumn" Width="*"/>
-                                        <ColumnDefinition Width="Auto"/>
-                                        <ColumnDefinition x:Name="ThirdTextBlockColumn" Width="*"/>
-                                    </Grid.ColumnDefinitions>
-                                    <Border x:Name="FirstPickerHost" Grid.Column="0">
-                                        <TextBlock x:Name="HourTextBlock" AutomationProperties.AccessibilityView="Raw" FontWeight="{TemplateBinding FontWeight}" FontSize="{TemplateBinding FontSize}" FontFamily="{TemplateBinding FontFamily}" Padding="0,3,0,5" TextAlignment="Center"/>
-                                    </Border>
-                                    <Rectangle x:Name="FirstColumnDivider" Grid.Column="1" Fill="{ThemeResource TimePickerSpacerFill}" HorizontalAlignment="Center" Width="2"/>
-                                    <Border x:Name="SecondPickerHost" Grid.Column="2">
-                                        <TextBlock x:Name="MinuteTextBlock" AutomationProperties.AccessibilityView="Raw" FontWeight="{TemplateBinding FontWeight}" FontSize="{TemplateBinding FontSize}" FontFamily="{TemplateBinding FontFamily}" Padding="0,3,0,5" TextAlignment="Center"/>
-                                    </Border>
-                                    <Rectangle x:Name="SecondColumnDivider" Grid.Column="3" Fill="{ThemeResource TimePickerSpacerFill}" HorizontalAlignment="Center" Width="2"/>
-                                    <Border x:Name="ThirdPickerHost" Grid.Column="4">
-                                        <TextBlock x:Name="PeriodTextBlock" AutomationProperties.AccessibilityView="Raw" FontWeight="{TemplateBinding FontWeight}" FontSize="{TemplateBinding FontSize}" FontFamily="{TemplateBinding FontFamily}" Padding="0,3,0,5" TextAlignment="Center"/>
-                                    </Border>
-                                </Grid>
-                            </Button>
-                        </StackPanel>
-                    </ControlTemplate>
-                </Setter.Value>
-            </Setter>
-        </Style>
-    </Page.Resources>
-
     <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
         <StackPanel MaxWidth="600">
             <StackPanel.Resources>
-                <Style BasedOn="{StaticResource TextBoxStyle}" TargetType="TextBox"/>
+                <Style BasedOn="{StaticResource TextBoxStyle}" TargetType="TextBox" />
             </StackPanel.Resources>
-            <TextBlock FontSize="50" Text="Edit Event" VerticalAlignment="Center" Margin="10,0,0,0"/>
-            <TextBox PlaceholderText="Name" Text="{Binding EventTemplate.Name,Mode=TwoWay}" />
-            <TextBox PlaceholderText="Description" Text="{Binding EventTemplate.Description,Mode=TwoWay}" MinHeight="64" MaxHeight="320" TextWrapping="Wrap"/>
+            <TextBlock
+                Margin="10,0,0,0"
+                VerticalAlignment="Center"
+                FontSize="50"
+                Text="Edit Event" />
+            <TextBox PlaceholderText="Name" Text="{Binding EventTemplate.Name, Mode=TwoWay}" />
+            <TextBox
+                MinHeight="64"
+                MaxHeight="320"
+                PlaceholderText="Description"
+                Text="{Binding EventTemplate.Description, Mode=TwoWay}"
+                TextWrapping="Wrap" />
             <StackPanel Orientation="Horizontal">
-                <CalendarDatePicker Date="{Binding Date,Mode=TwoWay}" Margin="10,0,10,10" BorderThickness="1"/>
-                <TimePicker Time="{Binding Time,Mode=TwoWay}" Margin="10,0,10,10" Style="{StaticResource TimePickerStyle1}"/>
+                <CalendarDatePicker
+                    Margin="10,0,10,10"
+                    BorderThickness="1"
+                    Date="{Binding Date, Mode=TwoWay}" />
+                <TimePicker
+                    Margin="10,0,10,10"
+                    Style="{StaticResource TimePickerStyle}"
+                    Time="{Binding Time, Mode=TwoWay}" />
             </StackPanel>
-            <TextBox PlaceholderText="Place" Text="{Binding EventTemplate.Place,Mode=TwoWay}"/>
-            <Button Height="32" Width="84" Content="Save" Command="{Binding UpdateEventCommand}" HorizontalAlignment="Right" Margin="0,0,10,0" Background="#FF106EBE" Foreground="White" Click="GoToEventPage"/>
+            <TextBox PlaceholderText="Place" Text="{Binding EventTemplate.Place, Mode=TwoWay}" />
+            <Button
+                Width="84"
+                Height="32"
+                Margin="0,0,10,0"
+                HorizontalAlignment="Right"
+                Background="#FF106EBE"
+                Click="GoToEventPage"
+                Command="{Binding UpdateEventCommand}"
+                Content="Save"
+                Foreground="White" />
         </StackPanel>
     </Grid>
 </Page>
diff --git a/EventMaker/EventMaker/View/EditEventPage.xaml.cs b/EventMaker/EventMaker/View/EditEventPage.xaml.cs
index 61a3a0c..61c8c0c 100644
--- a/EventMaker/EventMaker/View/EditEventPage.xaml.cs
+++ b/EventMaker/EventMaker/View/EditEventPage.xaml.cs
@@ -1,4 +1,5 @@
 using Windows.UI.Core;
+using Windows.UI.Xaml;
 
 namespace EventMaker.View
 {
@@ -17,7 +18,7 @@ namespace EventMaker.View
             currentView.AppViewBackButtonVisibility = AppViewBackButtonVisibility.Collapsed;
         }
 
-        private void GoToEventPage(object sender, Windows.UI.Xaml.RoutedEventArgs e)
+        private void GoToEventPage(object sender, RoutedEventArgs e)
         {
             Frame.Navigate(typeof(EventPage));
             currentView.AppViewBackButtonVisibility = AppViewBackButtonVisibility.Collapsed;
diff --git a/EventMaker/EventMaker/View/EventPage.xaml b/EventMaker/EventMaker/View/EventPage.xaml
index a5a5faa..e0727a3 100644
--- a/EventMaker/EventMaker/View/EventPage.xaml
+++ b/EventMaker/EventMaker/View/EventPage.xaml
@@ -1,173 +1,147 @@
 <Page
+    x:Class="EventMaker.View.EventPage"
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:core="using:Microsoft.Xaml.Interactions.Core"
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+    xmlns:interactivity="using:Microsoft.Xaml.Interactivity"
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
     xmlns:viewModel="using:EventMaker.ViewModel"
-    xmlns:interactivity="using:Microsoft.Xaml.Interactivity" 
-    xmlns:core="using:Microsoft.Xaml.Interactions.Core"
-    x:Class="EventMaker.View.EventPage"
     mc:Ignorable="d">
-
     <Page.Resources>
+        <Style x:Key="EventsListItemStyle" TargetType="ListViewItem">
+            <Setter Property="Background" Value="White" />
+            <Setter Property="Padding" Value="0" />
+            <Setter Property="Margin" Value="12,12,12,0" />
+            <Setter Property="BorderThickness" Value="1" />
+            <Setter Property="BorderBrush" Value="#DFE0E4" />
+            <Setter Property="HorizontalContentAlignment" Value="Stretch" />
+            <Setter Property="VerticalContentAlignment" Value="Center" />
+            <Setter Property="Template">
+                <Setter.Value>
+                    <ControlTemplate TargetType="ListViewItem">
+                        <ListViewItemPresenter />
+                    </ControlTemplate>
+                </Setter.Value>
+            </Setter>
+        </Style>
         <Style x:Key="TextBlockStyle" TargetType="TextBlock">
-            <Setter Property="Margin" Value="0,0,0,10"/>
-            <Setter Property="Foreground" Value="White"/>
+            <Setter Property="Margin" Value="0,0,0,10" />
+            <Setter Property="Foreground" Value="White" />
+        </Style>
+        <Style x:Key="ActionButtonStyle" TargetType="Button">
+            <Setter Property="Background" Value="Transparent" />
+            <Setter Property="Height" Value="40" />
+            <Setter Property="Width" Value="40" />
+            <Setter Property="HorizontalAlignment" Value="Right" />
+            <Setter Property="VerticalAlignment" Value="Top" />
         </Style>
-        <ControlTemplate x:Key="DeleteButtonStyle" TargetType="Button">
-            <Grid x:Name="RootGrid" Background="Transparent">
-                <VisualStateManager.VisualStateGroups>
-                    <VisualStateGroup x:Name="CommonStates">
-                        <VisualState x:Name="Normal">
-                            <Storyboard>
-                                <PointerUpThemeAnimation Storyboard.TargetName="RootGrid" />
-                            </Storyboard>
-                        </VisualState>
-                        <VisualState x:Name="PointerOver">
-                            <Storyboard>
-                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="RootGrid" 
-                                                               Storyboard.TargetProperty="Background">
-                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonBackgroundPointerOver}" />
-                                </ObjectAnimationUsingKeyFrames>
-                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" 
-                                                               Storyboard.TargetProperty="Foreground">
-                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonForegroundPointerOver}" />
-                                </ObjectAnimationUsingKeyFrames>
-                                <PointerUpThemeAnimation Storyboard.TargetName="RootGrid" />
-                            </Storyboard>
-                        </VisualState>
-                        <VisualState x:Name="Pressed">
-                            <Storyboard>
-                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="RootGrid" 
-                                                               Storyboard.TargetProperty="Background">
-                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonBackgroundPressed}" />
-                                </ObjectAnimationUsingKeyFrames>
-                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" 
-                                                               Storyboard.TargetProperty="BorderBrush">
-                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonBorderBrushPressed}" />
-                                </ObjectAnimationUsingKeyFrames>
-                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" 
-                                                               Storyboard.TargetProperty="Foreground">
-                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonForegroundPressed}" />
-                                </ObjectAnimationUsingKeyFrames>
-                                <PointerDownThemeAnimation Storyboard.TargetName="RootGrid" />
-                            </Storyboard>
-                        </VisualState>
-                        <VisualState x:Name="Disabled">
-                            <Storyboard>
-                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="RootGrid" 
-                                                               Storyboard.TargetProperty="Background">
-                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonBackgroundDisabled}" />
-                                </ObjectAnimationUsingKeyFrames>
-                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" 
-                                                               Storyboard.TargetProperty="BorderBrush">
-                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonBorderBrushDisabled}" />
-                                </ObjectAnimationUsingKeyFrames>
-                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" 
-                                                               Storyboard.TargetProperty="Foreground">
-                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonForegroundDisabled}" />
-                                </ObjectAnimationUsingKeyFrames>
-                            </Storyboard>
-                        </VisualState>
-                    </VisualStateGroup>
-                </VisualStateManager.VisualStateGroups>
-                <ContentPresenter x:Name="ContentPresenter"
-                    BorderBrush="{TemplateBinding BorderBrush}"
-                    BorderThickness="{TemplateBinding BorderThickness}"
-                    Content="{TemplateBinding Content}"
-                    ContentTransitions="{TemplateBinding ContentTransitions}"
-                    ContentTemplate="{TemplateBinding ContentTemplate}"
-                    Padding="10"
-                    HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
-                    VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
-                    AutomationProperties.AccessibilityView="Raw" />
-            </Grid>
-        </ControlTemplate>
     </Page.Resources>
-
     <Page.DataContext>
-        <viewModel:EventViewModel/>
+        <viewModel:EventViewModel />
     </Page.DataContext>
-
     <Page.BottomAppBar>
         <CommandBar>
             <CommandBar.Content>
-                <Grid/>
+                <Grid />
             </CommandBar.Content>
-            <AppBarButton Icon="Add" Label="Add Event" Command="{Binding CleanTemplateCommand}">
+            <AppBarButton
+                Command="{Binding CleanTemplateCommand}"
+                Icon="Add"
+                Label="Add Event">
                 <interactivity:Interaction.Behaviors>
                     <core:EventTriggerBehavior EventName="Click">
-                        <core:NavigateToPageAction TargetPage="EventMaker.View.CreateEventPage"/>
+                        <core:NavigateToPageAction TargetPage="EventMaker.View.CreateEventPage" />
                     </core:EventTriggerBehavior>
                 </interactivity:Interaction.Behaviors>
             </AppBarButton>
         </CommandBar>
     </Page.BottomAppBar>
-
     <Grid Background="#E9EBEE">
-        <ListView x:Name="EventsList" ItemsSource="{Binding EventCatalogSingleton.Events}" 
-                  SelectedIndex="{Binding SelectedEventIndex, Mode=TwoWay}">
-
+        <Grid.RowDefinitions>
+            <RowDefinition Height="40" />
+            <RowDefinition />
+        </Grid.RowDefinitions>
+        <StackPanel Background="{StaticResource AppBarBackgroundThemeBrush}" Orientation="Horizontal">
+            <TextBlock
+                Margin="40,0,10,0"
+                VerticalAlignment="Center"
+                Text="Sort by:" />
+            <ComboBox
+                VerticalAlignment="Center"
+                ItemsSource="{Binding SortValues}"
+                SelectedItem="{Binding SelectedSortValue, Mode=TwoWay}" />
+        </StackPanel>
+        <ListView
+            x:Name="EventsList"
+            Grid.Row="1"
+            ItemsSource="{Binding EventCatalogSingleton.Events}"
+            SelectedIndex="{Binding SelectedEventIndex, Mode=TwoWay}">
             <ListView.ItemContainerStyle>
-                <Style BasedOn="{StaticResource EventsListViewItem}" TargetType="ListViewItem"/>
+                <Style BasedOn="{StaticResource EventsListItemStyle}" TargetType="ListViewItem" />
             </ListView.ItemContainerStyle>
             <ListView.ItemTemplate>
-
                 <DataTemplate>
                     <Grid>
-
                         <Grid.RowDefinitions>
-                            <RowDefinition/>
-                            <RowDefinition/>
+                            <RowDefinition />
+                            <RowDefinition />
                         </Grid.RowDefinitions>
-                        <Grid Background="#FF106EBE" >
+                        <Grid Background="#FF106EBE">
                             <Grid.ColumnDefinitions>
-                                <ColumnDefinition Width="*"/>
-                                <ColumnDefinition Width="50px"/>
+                                <ColumnDefinition Width="*" />
+                                <ColumnDefinition Width="50px" />
                             </Grid.ColumnDefinitions>
                             <StackPanel Padding="10">
                                 <StackPanel.Resources>
-                                    <Style BasedOn="{StaticResource TextBlockStyle}" TargetType="TextBlock"/>
+                                    <Style BasedOn="{StaticResource TextBlockStyle}" TargetType="TextBlock" />
                                 </StackPanel.Resources>
-                                <TextBlock Text="{Binding Name}" FontWeight="Bold" FontSize="24" TextWrapping="Wrap"/>
-                                <TextBlock Text="{Binding DateTime}" TextWrapping="Wrap"/>
-                                <TextBlock Text="{Binding Place}" TextWrapping="Wrap"/>
+                                <TextBlock
+                                    FontSize="24"
+                                    FontWeight="Bold"
+                                    Text="{Binding Name}"
+                                    TextWrapping="Wrap" />
+                                <TextBlock Text="{Binding DateTime}" TextWrapping="Wrap" />
+                                <TextBlock Text="{Binding Place}" TextWrapping="Wrap" />
                             </StackPanel>
-                            <Button DataContext="{Binding ElementName=EventsList, Path=DataContext}"  
-                                    Command="{Binding DeleteEventCommand}" 
-                                    Template="{StaticResource DeleteButtonStyle}"
-                                    Grid.Column="1" 
-                                    VerticalAlignment="Top"
-                                    HorizontalAlignment="Right"
-                                    Click="SelectEvent">
-                                <SymbolIcon Symbol="Clear" Foreground="White" ToolTipService.ToolTip="Delete"/>
+                            <Button
+                                Grid.Column="1"
+                                Click="SelectEvent"
+                                Command="{Binding DeleteEventCommand}"
+                                DataContext="{Binding ElementName=EventsList, Path=DataContext}"
+                                Style="{StaticResource ActionButtonStyle}">
+                                <SymbolIcon
+                                    Foreground="White"
+                                    Symbol="Clear"
+                                    ToolTipService.ToolTip="Delete" />
                             </Button>
-                            <Button DataContext="{Binding ElementName=EventsList, Path=DataContext}"  
-                                    Command="{Binding LoadEventCommand}" 
-                                    Template="{StaticResource DeleteButtonStyle}"
-                                    Grid.Column="1"
-                                    Margin="0,44,0,0" 
-                                    VerticalAlignment="Top"
-                                    HorizontalAlignment="Right"
-                                    Click="SelectEvent">
-                                <SymbolIcon Symbol="Edit" Foreground="White" ToolTipService.ToolTip="Edit"/>
-
+                            <Button
+                                Grid.Column="1"
+                                Margin="0,40,0,0"
+                                Click="SelectEvent"
+                                Command="{Binding LoadEventCommand}"
+                                DataContext="{Binding ElementName=EventsList, Path=DataContext}"
+                                Style="{StaticResource ActionButtonStyle}">
+                                <SymbolIcon
+                                    Foreground="White"
+                                    Symbol="Edit"
+                                    ToolTipService.ToolTip="Edit" />
                                 <interactivity:Interaction.Behaviors>
                                     <core:EventTriggerBehavior EventName="Click">
-                                        <core:NavigateToPageAction TargetPage="EventMaker.View.EditEventPage"/>
+                                        <core:NavigateToPageAction TargetPage="EventMaker.View.EditEventPage" />
                                     </core:EventTriggerBehavior>
                                 </interactivity:Interaction.Behaviors>
-                                
                             </Button>
                         </Grid>
-                        <TextBlock Grid.Row="1" 
-                                   Text="{Binding Description}" 
-                                   TextWrapping="Wrap" 
-                                   Foreground="Black" 
-                                   Padding="10"/>
+                        <TextBlock
+                            Grid.Row="1"
+                            Padding="10"
+                            Foreground="Black"
+                            Text="{Binding Description}"
+                            TextWrapping="Wrap" />
                     </Grid>
                 </DataTemplate>
             </ListView.ItemTemplate>
         </ListView>
     </Grid>
-</Page>
+</Page>
\ No newline at end of file
diff --git a/EventMaker/EventMaker/ViewModel/EventViewModel.cs b/EventMaker/EventMaker/ViewModel/EventViewModel.cs
index 77b4b94..7178ace 100644
--- a/EventMaker/EventMaker/ViewModel/EventViewModel.cs
+++ b/EventMaker/EventMaker/ViewModel/EventViewModel.cs
@@ -1,4 +1,5 @@
 using System;
+using System.Collections.ObjectModel;
 using System.ComponentModel;
 using System.Runtime.CompilerServices;
 using EventMaker.Model;
@@ -11,8 +12,10 @@ namespace EventMaker.ViewModel
     public class EventViewModel : INotifyPropertyChanged
     {
         private static Event _eventTemplate = new Event();
+        private static string _selectedSortValue = "date added";
         public EventCatalogSingleton EventCatalogSingleton { get; set; } = EventCatalogSingleton.Instance;
         public static int SelectedEventIndex { get; set; }
+        public static ObservableCollection<string> SortValues { get; set; } = new ObservableCollection<string>() {"name","date","place","date added"};
         public static DateTimeOffset Date { get; set; } = DateTimeOffset.Now;
         public static TimeSpan Time { get; set; }
         public ICommand CreateEventCommand { get; set; }
@@ -31,6 +34,17 @@ namespace EventMaker.ViewModel
             }
         }
 
+        public string SelectedSortValue
+        {
+            get { return _selectedSortValue; }
+            set
+            {
+                _selectedSortValue = value;
+                OnPropertyChanged(nameof(SelectedSortValue));
+                SortEvents();
+            }
+        }
+
         public EventViewModel()
         {
             CreateEventCommand = new RelayCommand(CreateEvent);
@@ -73,6 +87,11 @@ namespace EventMaker.ViewModel
             Time = TimeSpan.Zero;
         }
 
+        private void SortEvents()
+        {
+            EventCatalogSingleton.Events.Move(0, 1);
+        }
+
         public event PropertyChangedEventHandler PropertyChanged;
 
         [NotifyPropertyChangedInvocator]
diff --git a/EventMaker/EventMaker/project.json b/EventMaker/EventMaker/project.json
index 67510b2..6ae200f 100644
--- a/EventMaker/EventMaker/project.json
+++ b/EventMaker/EventMaker/project.json
@@ -1,7 +1,7 @@
 {
   "dependencies": {
     "Microsoft.NETCore.UniversalWindowsPlatform": "5.2.2",
-    "Microsoft.Xaml.Behaviors.Uwp.Managed": "2.0.0",
+    "Microsoft.Xaml.Behaviors.Uwp.Managed": "1.1.0",
     "Newtonsoft.Json": "9.0.1"
   },
   "frameworks": {
-- 
cgit v1.2.3