Skip to content

Commit

Permalink
Create Speed Reader Screen #18
Browse files Browse the repository at this point in the history 
Created the UI for the Reader.
  • Loading branch information
@ccoffey1
ccoffey1 committed Sep 22, 2018
1 parent 0ca61a3 commit 98a7543
Show file tree
Hide file tree
Showing 3 changed files with 181 additions and 5 deletions.
3 changes: 2 additions & 1 deletion WordByWord/WordByWord/App.xaml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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>
Expand Down
150 changes: 148 additions & 2 deletions WordByWord/WordByWord/Reader.xaml
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,158 @@
<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"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
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>
33 changes: 31 additions & 2 deletions WordByWord/WordByWord/Reader.xaml.cs
View file
Original file line number Diff line number Diff line change
@@ -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);
}
}
}

0 comments on commit 98a7543

Please sign in to comment.