Custom title bar

- adds style.
- adds logic to the hamburger button.

Change-Id: Ieda5f8224bdcb1ab1c666d83c258a9d4f212e536

App.xaml.cpp

@@ -22,9 +22,11 @@
 using namespace Windows::ApplicationModel::Core;
 using namespace Windows::Foundation;
 using namespace Windows::Graphics::Display;
+using namespace Windows::UI;
 using namespace Windows::UI::Xaml;
 using namespace Windows::UI::Xaml::Controls;
 using namespace Windows::UI::Xaml::Interop;
+using namespace Windows::UI::Xaml::Media;
 using namespace Windows::UI::ViewManagement;
 
 using namespace RingClientUWP;
@@ -49,4 +51,11 @@ App::OnLaunched(LaunchActivatedEventArgs^ e)
         Window::Current->Activate();
     } else
         rootFrame->Navigate(TypeName(MainPage::typeid), e->Arguments);
+
+    CoreApplication::GetCurrentView()->TitleBar->ExtendViewIntoTitleBar = true;
+    ApplicationView::GetForCurrentView()->TitleBar->ButtonBackgroundColor = Colors::LightBlue;
+    ApplicationView::GetForCurrentView()->TitleBar->ButtonInactiveBackgroundColor = Colors::LightBlue;
+    ApplicationView::GetForCurrentView()->TitleBar->ForegroundColor = Colors::White;
+    ApplicationView::GetForCurrentView()->TitleBar->ButtonForegroundColor = Colors::White;
+
 }
\ No newline at end of file

MainPage.xaml

@@ -23,7 +23,32 @@
       xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
       mc:Ignorable="d">
 
+    <Grid>
+        <Grid.RowDefinitions>
+            <RowDefinition Height="32"/>
+            <RowDefinition Height="*"/>
+        </Grid.RowDefinitions>
+        <Grid Canvas.ZIndex="2" Grid.Row="0" Background="LightBlue">
+            <Grid.ColumnDefinitions>
+                <ColumnDefinition Width="50"/>
+                <ColumnDefinition Width="*"/>
+            </Grid.ColumnDefinitions>
+            <!-- hamburger button. -->
+            <Button x:Name="_toggleSmartBoxButton_"
+                        Grid.Row="0"
+                        Content="&#xE700;"
+                        Click="_toggleSmartBoxButton__Click"
+                        HorizontalAlignment="Center"
+                        Style="{StaticResource ButtonStyle2}"/>
+            <!-- _titleBar_ is used to move the window. -->
+            <Rectangle x:Name="_titleBar_"
+                       Grid.Column="1"
+                       Height="32"
+                       VerticalAlignment="Top"
+                       Fill="Transparent"/>
+        </Grid>
         <SplitView x:Name="_outerSplitView_"
+                   Grid.Row="1"
                    IsPaneOpen="False">
         <SplitView.Pane>
             <Frame x:Name="_consolePanel_"/>
@@ -48,4 +73,5 @@
             </SplitView>
         </SplitView.Content>
     </SplitView>
+    </Grid>
 </Page>

MainPage.xaml.cpp

@@ -27,6 +27,7 @@ using namespace RingClientUWP;
 using namespace RingClientUWP::Views;
 
 using namespace Platform;
+using namespace Windows::ApplicationModel::Core;
 using namespace Windows::Foundation;
 using namespace Windows::Foundation::Collections;
 using namespace Windows::UI::ViewManagement;
@@ -37,7 +38,6 @@ using namespace Windows::UI::Core;
 using namespace Windows::UI::Xaml::Data;
 using namespace Windows::UI::Xaml::Input;
 using namespace Windows::UI::Xaml::Interop;
-using namespace Windows::UI::Xaml::Media;
 using namespace Windows::UI::Xaml::Navigation;
 using namespace Windows::ApplicationModel::Activation;
 using namespace Windows::Graphics::Display;
@@ -47,6 +47,8 @@ MainPage::MainPage()
 {
     InitializeComponent();
 
+    Window::Current->SetTitleBar(_titleBar_);
+
     _welcomeFrame_->Navigate(TypeName(RingClientUWP::Views::WelcomePage::typeid));
     _smartPanel_->Navigate(TypeName(RingClientUWP::Views::SmartPanel::typeid));
     _consolePanel_->Navigate(TypeName(RingClientUWP::Views::RingConsolePanel::typeid));
@@ -60,3 +62,8 @@ MainPage::OnKeyDown(KeyRoutedEventArgs^ e)
         _outerSplitView_->IsPaneOpen = !_outerSplitView_->IsPaneOpen;
     }
 }
+
+void RingClientUWP::MainPage::_toggleSmartBoxButton__Click(Platform::Object^ sender, Windows::UI::Xaml::RoutedEventArgs^ e)
+{
+    _innerSplitView_->IsPaneOpen = !_innerSplitView_->IsPaneOpen;
+}

MainPage.xaml.h

@@ -31,5 +31,7 @@ public:
 
 protected:
     virtual void OnKeyDown(KeyRoutedEventArgs^ e) override;
+private:
+    void _toggleSmartBoxButton__Click(Platform::Object^ sender, Windows::UI::Xaml::RoutedEventArgs^ e);
 };
 }
\ No newline at end of file

Styles.xaml

@@ -27,7 +27,30 @@
         <Setter Property="Foreground"
                 Value="Black"/>
     </Style>
-
+    <Style x:Key="ButtonStyle1"
+           TargetType="Button">
+        <Setter Property="Width"
+                Value="50"/>
+        <Setter Property="Height"
+                Value="50"/>
+        <Setter Property="FontFamily"
+                Value="Segoe MDL2 Assets"/>
+        <Setter Property="Foreground"
+                Value="White"/>
+    </Style>
+    <Style x:Key="ButtonStyle2"
+           TargetType="Button">
+        <Setter Property="Width"
+                Value="50"/>
+        <Setter Property="Height"
+                Value="30"/>
+        <Setter Property="FontFamily"
+                Value="Segoe MDL2 Assets"/>
+        <Setter Property="Foreground"
+                Value="White"/>
+        <Setter Property="Background"
+                Value="Transparent"/>
+    </Style>
 <!-- styles for the console -->
     <Style x:Key="ConsoleScrollViewerStyle"
            TargetType="ScrollViewer">