From 98a7543fd8697a977cf3999db32aafec5226dac0 Mon Sep 17 00:00:00 2001
From: Christian Coffey <ccoffey@buffalo.edu>
Date: Sat, 22 Sep 2018 01:55:35 -0400
Subject: [PATCH] Create Speed Reader Screen #18

Created the UI for the Reader.
---
 WordByWord/WordByWord/App.xaml       |   3 +-
 WordByWord/WordByWord/Reader.xaml    | 150 ++++++++++++++++++++++++++-
 WordByWord/WordByWord/Reader.xaml.cs |  33 +++++-
 3 files changed, 181 insertions(+), 5 deletions(-)

diff --git a/WordByWord/WordByWord/App.xaml b/WordByWord/WordByWord/App.xaml
index 1a8d086..ff62916 100644
--- a/WordByWord/WordByWord/App.xaml
+++ b/WordByWord/WordByWord/App.xaml
@@ -2,7 +2,7 @@
              xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
              xmlns:local="clr-namespace:WordByWord"
-             StartupUri="Library.xaml">
+             StartupUri="Reader.xaml">
     <Application.Resources>
         <ResourceDictionary>
             <ResourceDictionary.MergedDictionaries>
@@ -13,6 +13,7 @@
                 <!-- Accent and AppTheme setting -->
                 <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Accents/Blue.xaml" />
                 <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Accents/BaseLight.xaml" />
+                <ResourceDictionary Source="/Resources/Icons.xaml" />
             </ResourceDictionary.MergedDictionaries>
         </ResourceDictionary>
     </Application.Resources>
diff --git a/WordByWord/WordByWord/Reader.xaml b/WordByWord/WordByWord/Reader.xaml
index 4b7f001..f307c6c 100644
--- a/WordByWord/WordByWord/Reader.xaml
+++ b/WordByWord/WordByWord/Reader.xaml
@@ -1,4 +1,6 @@
-<Window x:Class="WordByWord.Reader"
+<mah:MetroWindow
+        xmlns:mah="http://metro.mahapps.com/winfx/xaml/controls"
+        x:Class="WordByWord.Reader"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
@@ -6,7 +8,151 @@
         xmlns:local="clr-namespace:WordByWord"
         mc:Ignorable="d"
         Title="Reader" Height="450" Width="800">
+
+    <Window.Resources>
+        <Storyboard x:Key="SbShowBottomMenu" >
+            <ThicknessAnimation Storyboard.TargetProperty="Margin" From="0,0,0,-100" To="0,0,0,0" DecelerationRatio=".9" Duration="0:0:1" />
+        </Storyboard>
+        <Storyboard x:Key="SbHideBottomMenu">
+            <ThicknessAnimation Storyboard.TargetProperty="Margin" From="0,0,0,0" To="0,0,0,-100" AccelerationRatio=".9" Duration="0:0:1" />
+        </Storyboard>
+    </Window.Resources>
+    
     <Grid>
+        <Grid.ColumnDefinitions>
+            <ColumnDefinition Width="*"/>
+            <ColumnDefinition Width="2*"/>
+            <ColumnDefinition Width="*"/>
+        </Grid.ColumnDefinitions>
+        <Grid.RowDefinitions>
+            <RowDefinition Height="2*"/>
+            <RowDefinition Height="*"/>
+        </Grid.RowDefinitions>
         
+        <Button Style="{DynamicResource MetroCircleButtonStyle}" 
+                Grid.Column="0" 
+                Width="50" 
+                Height="50"
+                Margin="10 5 0 0"
+                HorizontalAlignment="Left" 
+                VerticalAlignment="Top"
+                BorderThickness="0">
+            <Rectangle Width="30"
+                       Height="30"
+                       Fill="{Binding Path=Foreground, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Button}}}">
+                <Rectangle.OpacityMask>
+                    <VisualBrush Stretch="Fill" Visual="{StaticResource appbar_arrow_left}" />
+                </Rectangle.OpacityMask>
+            </Rectangle>
+        </Button>
+
+        <StackPanel Grid.Column="1"
+                    VerticalAlignment="Center"
+                    HorizontalAlignment="Center">
+            <Label Content="Lorem ipsum" 
+                   FontSize="50"
+                   Margin="0 50 0 0"
+                   HorizontalAlignment="Center"
+                   VerticalAlignment="Center"/>
+            <StackPanel Orientation="Horizontal" 
+                        HorizontalAlignment="Center"
+                        Margin="0 10 0 0">
+                <Button Style="{DynamicResource MetroCircleButtonStyle}" Width="50" Height="50" BorderBrush="Black">
+                    <Rectangle Width="20"
+                               Height="20"
+                               Fill="{Binding Path=Foreground, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Button}}}">
+                        <Rectangle.OpacityMask>
+                            <VisualBrush Stretch="Fill" Visual="{StaticResource appbar_navigate_previous}" />
+                        </Rectangle.OpacityMask>
+                    </Rectangle>
+                </Button>
+                <Button Style="{DynamicResource MetroCircleButtonStyle}" Width="50" Height="50" BorderBrush="Black">
+                    <Rectangle Width="20"
+                               Height="20"
+                               Fill="{Binding Path=Foreground, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Button}}}">
+                        <Rectangle.OpacityMask>
+                            <VisualBrush Stretch="Fill" Visual="{StaticResource appbar_control_play}" />
+                        </Rectangle.OpacityMask>
+                    </Rectangle>
+                </Button>
+                <Button Style="{DynamicResource MetroCircleButtonStyle}" Width="50" Height="50" BorderBrush="Black">
+                    <Rectangle Width="20"
+                               Height="20"
+                               Fill="{Binding Path=Foreground, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Button}}}">
+                        <Rectangle.OpacityMask>
+                            <VisualBrush Stretch="Fill" Visual="{StaticResource appbar_navigate_next}" />
+                        </Rectangle.OpacityMask>
+                    </Rectangle>
+                </Button>
+            </StackPanel>
+        </StackPanel>
+
+        <StackPanel Grid.Column="2">
+            <Button Style="{DynamicResource MetroCircleButtonStyle}" 
+                Grid.Column="2" 
+                Width="50" 
+                Height="50" 
+                Margin="0 5 10 0"
+                HorizontalAlignment="Right" 
+                VerticalAlignment="Top"
+                BorderThickness="0">
+                <Rectangle Width="30"
+                           Height="30"
+                           Margin="0 0 5 0"
+                           Fill="{Binding Path=Foreground, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Button}}}">
+                    <Rectangle.OpacityMask>
+                        <VisualBrush Stretch="Fill" Visual="{StaticResource appbar_clipboard_edit}" />
+                    </Rectangle.OpacityMask>
+                </Rectangle>
+            </Button>
+            <Button Style="{DynamicResource MetroCircleButtonStyle}" 
+                Grid.Column="2" 
+                Width="50" 
+                Height="50" 
+                Margin="0 0 10 0"
+                HorizontalAlignment="Right" 
+                VerticalAlignment="Top"
+                BorderThickness="0">
+                <Rectangle Width="30"
+                           Height="30"
+                           Fill="{Binding Path=Foreground, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Button}}}">
+                    <Rectangle.OpacityMask>
+                        <VisualBrush Stretch="Fill" Visual="{StaticResource appbar_settings}" />
+                    </Rectangle.OpacityMask>
+                </Rectangle>
+            </Button>
+            <Button Style="{DynamicResource MetroCircleButtonStyle}" 
+                Grid.Column="2" 
+                Margin="0 0 10 0"
+                Width="50" 
+                Height="50" 
+                HorizontalAlignment="Right" 
+                VerticalAlignment="Top"
+                BorderThickness="0">
+                <Rectangle Width="25"
+                           Height="30"
+                           Fill="{Binding Path=Foreground, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Button}}}">
+                    <Rectangle.OpacityMask>
+                        <VisualBrush Stretch="Fill" Visual="{StaticResource appbar_refresh}" />
+                    </Rectangle.OpacityMask>
+                </Rectangle>
+            </Button>
+        </StackPanel>
+
+        <StackPanel Grid.Column="0" Grid.ColumnSpan="3" Grid.Row="2" Panel.ZIndex="2" Name="BottomMenu" Orientation="Vertical" Width="400" HorizontalAlignment="Center" VerticalAlignment="Bottom" Margin="0,0,0,-100">
+            <Grid>
+                <Button Name="BtnBottomMenuHide" Style="{StaticResource AccentedSquareButtonStyle}" Panel.ZIndex="2" Width="130" Height="28" Click="BtnBottomMenuHide_Click"  Content="Close Reader Settings" Visibility="Hidden"/>
+                <Button Name="BtnBottomMenuShow" Style="{StaticResource AccentedSquareButtonStyle}" Panel.ZIndex="2" Width="130" Height="28" Click="BtnBottomMenuShow_Click" Content="Open Reader Settings"/>
+            </Grid>
+            <Border BorderBrush="#AF1719" BorderThickness="1" Height="100" Background="#4C808080" >
+                <mah:MetroTabControl x:Name="TabControl"
+                                     Grid.Row="1" 
+                                     Grid.ColumnSpan="3">
+                    <mah:MetroTabItem Header="Item 1"/>
+                    <mah:MetroTabItem Header="Item 2"/>
+                    <mah:MetroTabItem Header="Item 3"/>
+                </mah:MetroTabControl>
+            </Border>
+        </StackPanel>
     </Grid>
-</Window>
+</mah:MetroWindow>
diff --git a/WordByWord/WordByWord/Reader.xaml.cs b/WordByWord/WordByWord/Reader.xaml.cs
index 054d0eb..27b7d76 100644
--- a/WordByWord/WordByWord/Reader.xaml.cs
+++ b/WordByWord/WordByWord/Reader.xaml.cs
@@ -1,15 +1,44 @@
-using System.Windows;
+using MahApps.Metro.Controls;
+using System.Windows.Controls;
+using System.Windows.Media.Animation;
 
 namespace WordByWord
 {
     /// <summary>
     /// Interaction logic for Reader.xaml
     /// </summary>
-    public partial class Reader : Window
+    public partial class Reader : MetroWindow
     {
         public Reader()
         {
             InitializeComponent();
         }
+
+        private void ShowHideMenu(string Storyboard, Button btnHide, Button btnShow, StackPanel pnl)
+        {
+            Storyboard sb = Resources[Storyboard] as Storyboard;
+            sb.Begin(pnl);
+
+            if (Storyboard.Contains("Show"))
+            {
+                btnHide.Visibility = System.Windows.Visibility.Visible;
+                btnShow.Visibility = System.Windows.Visibility.Hidden;
+            }
+            else if (Storyboard.Contains("Hide"))
+            {
+                btnHide.Visibility = System.Windows.Visibility.Hidden;
+                btnShow.Visibility = System.Windows.Visibility.Visible;
+            }
+        }
+
+        private void BtnBottomMenuHide_Click(object sender, System.Windows.RoutedEventArgs e)
+        {
+            ShowHideMenu("SbHideBottomMenu", BtnBottomMenuHide, BtnBottomMenuShow, BottomMenu);
+        }
+
+        private void BtnBottomMenuShow_Click(object sender, System.Windows.RoutedEventArgs e)
+        {
+            ShowHideMenu("SbShowBottomMenu", BtnBottomMenuHide, BtnBottomMenuShow, BottomMenu);
+        }
     }
 }