Adjust size and make title bar draggable

microsoft · Jul 28, 2020 · 9fc4347 · 9fc4347
1 parent a52cc6b
commit 9fc4347
Show file tree

Hide file tree

Showing 3 changed files with 60 additions and 30 deletions.
diff --git a/windows/ReactTestApp/MainPage.cpp b/windows/ReactTestApp/MainPage.cpp
@@ -3,28 +3,27 @@
 #include "MainPage.h"
 
 #include <winrt/Windows.ApplicationModel.Core.h>
+#include <winrt/Windows.UI.ViewManagement.h>
 
 #include "ComponentViewModel.h"
 #include "MainPage.g.cpp"
-#include "Manifest.h"
+
 using winrt::Windows::ApplicationModel::Core::CoreApplication;
 using winrt::Windows::Foundation::IAsyncAction;
+using winrt::Windows::UI::ViewManagement::ApplicationView;
 using winrt::Windows::UI::Xaml::RoutedEventArgs;
+using winrt::Windows::UI::Xaml::Style;
 using winrt::Windows::UI::Xaml::Window;
 using winrt::Windows::UI::Xaml::Controls::Button;
-using winrt::Windows::UI::Xaml::Input::TappedRoutedEventArgs;
 using winrt::Windows::UI::Xaml::Navigation::NavigationEventArgs;
-using winrt::Windows::UI::Xaml::Style;
 
 namespace winrt::ReactTestApp::implementation
 {
     MainPage::MainPage()
     {
         InitializeComponent();
 
-        auto coreTitleBar = CoreApplication::GetCurrentView().TitleBar();
-        coreTitleBar.ExtendViewIntoTitleBar(true);
-        Window::Current().SetTitleBar(BackgroundElement());
+        SetUpTitleBar();
 
         auto menuItems = ReactMenu().Children();
         std::optional<::ReactTestApp::Manifest> manifest = ::ReactTestApp::GetManifest();
@@ -38,19 +37,7 @@ namespace winrt::ReactTestApp::implementation
 
             auto &components = manifest.value().components;
             for (auto &&c : components) {
-                hstring componentDisplayName = to_hstring(c.displayName.value_or(c.appKey));
-                hstring appKey = to_hstring(c.appKey);
-                ReactTestApp::ComponentViewModel newComponent =
-                    winrt::make<ComponentViewModel>(appKey, componentDisplayName);
-
-                Button newMenuItem;
-                auto style = this->Resources()
-                                 .Lookup(winrt::box_value(L"ReactMenuButton"))
-                                 .as<::Style>();
-                newMenuItem.Style(style);
-                newMenuItem.Content(winrt::box_value(newComponent.DisplayName()));
-                newMenuItem.CommandParameter(newComponent);
-                newMenuItem.Click({this, &MainPage::SetReactComponentName});
+                Button newMenuItem = GetComponentMenuButton(c);
                 menuItems.Append(newMenuItem);
             }
 
@@ -95,4 +82,41 @@ namespace winrt::ReactTestApp::implementation
         ReactButton().Flyout().ShowAt(ReactButton());
     }
 
+    Button MainPage::GetComponentMenuButton(::ReactTestApp::Component &component)
+    {
+        hstring componentDisplayName = to_hstring(component.displayName.value_or(component.appKey));
+        hstring appKey = to_hstring(component.appKey);
+        ReactTestApp::ComponentViewModel newComponent =
+            winrt::make<ComponentViewModel>(appKey, componentDisplayName);
+
+        Button newMenuItem;
+        auto style = this->Resources().Lookup(winrt::box_value(L"ReactMenuButton")).as<::Style>();
+        newMenuItem.Style(style);
+        newMenuItem.Content(winrt::box_value(newComponent.DisplayName()));
+        newMenuItem.CommandParameter(newComponent);
+        newMenuItem.Click({this, &MainPage::SetReactComponentName});
+        return newMenuItem;
+    }
+
+    void MainPage::SetUpTitleBar()
+    {
+        // Set close, minimize and maximize icons background to transparent
+        auto appView = ApplicationView::GetForCurrentView().TitleBar();
+        appView.ButtonBackgroundColor(winrt::Windows::UI::Colors::Transparent());
+        appView.BackgroundColor(winrt::Windows::UI::Colors::Transparent());
+
+        auto coreTitleBar = CoreApplication::GetCurrentView().TitleBar();
+        coreTitleBar.LayoutMetricsChanged({this, &MainPage::CoreTitleBarLayoutMetricsChanged});
+        coreTitleBar.ExtendViewIntoTitleBar(true);
+        Window::Current().SetTitleBar(BackgroundElement());
+    }
+
+    // Adjust height of custom title bar to match close, minimize and maximize icons
+    void MainPage::CoreTitleBarLayoutMetricsChanged(
+        winrt::Windows::ApplicationModel::Core::CoreApplicationViewTitleBar const &sender,
+        Windows::Foundation::IInspectable const &)
+    {
+        TitleBar().Height(sender.Height());
+    }
+
 }  // namespace winrt::ReactTestApp::implementation
diff --git a/windows/ReactTestApp/MainPage.h b/windows/ReactTestApp/MainPage.h
@@ -1,6 +1,7 @@
 #pragma once
 
 #include "MainPage.g.h"
+#include "Manifest.h"
 #include "ReactInstance.h"
 
 namespace winrt::ReactTestApp::implementation
@@ -21,6 +22,12 @@ namespace winrt::ReactTestApp::implementation
 
         void SetReactComponentName(Windows::Foundation::IInspectable const &,
                                    Windows::UI::Xaml::RoutedEventArgs);
+        Windows::UI::Xaml::Controls::Button
+        GetComponentMenuButton(::ReactTestApp::Component &component);
+        void CoreTitleBarLayoutMetricsChanged(
+            winrt::Windows::ApplicationModel::Core::CoreApplicationViewTitleBar const &sender,
+            Windows::Foundation::IInspectable const &);
+        void SetUpTitleBar();
     };
 }  // namespace winrt::ReactTestApp::implementation
 

diff --git a/windows/ReactTestApp/MainPage.xaml b/windows/ReactTestApp/MainPage.xaml
@@ -14,23 +14,23 @@
             <Setter Property="FontSize" Value="12pt"/>
         </Style>
     </Page.Resources>
-    
+
     <Grid>
         <Grid.RowDefinitions>
             <RowDefinition Height="Auto"/>
             <RowDefinition Height="Auto"/>
             <RowDefinition Height="*"/>
         </Grid.RowDefinitions>
 
-        <Grid x:Name="TitleBar" Background="Transparent">
-            <Rectangle x:Name="BackgroundElement" />
-
+        <Grid x:Name="TitleBar">
             <Grid>
                 <Grid.ColumnDefinitions>
+                    <ColumnDefinition x:Name="LeftPaddingColumn" Width="0"/>
                     <ColumnDefinition Width="Auto"/>
-                    <ColumnDefinition Width="*"/>
+                    <ColumnDefinition/>
+                    <ColumnDefinition x:Name="RightPaddingColumn" Width="0"/>
                 </Grid.ColumnDefinitions>
-                <Button Grid.Column="0" Content="React" x:Name="ReactButton" Click="OpenReactMenu" Style="{StaticResource ReactMenuButton}" Foreground="Black">
+                <Button Grid.Column="1" Content="React" x:Name="ReactButton" Click="OpenReactMenu" Style="{StaticResource ReactMenuButton}">
                     <Button.Flyout>
                         <Flyout Placement="BottomEdgeAlignedLeft" x:Name="MenuFlyout">
                             <StackPanel x:Name="ReactMenu">
@@ -41,12 +41,11 @@
                         </Flyout>
                     </Button.Flyout>
                 </Button>
-
-                <TextBlock x:Name="AppTitle" 
-               Grid.Column="1" 
-               Style="{StaticResource CaptionTextBlockStyle}" HorizontalAlignment="Center" VerticalAlignment="Center" 
-               />
+                <Grid x:Name="BackgroundElement" Grid.Column="2" Background="Transparent">
+                    <TextBlock x:Name="AppTitle" Style="{StaticResource CaptionTextBlockStyle}" HorizontalAlignment="Center" VerticalAlignment="Center" />
+                </Grid>
             </Grid>
+
         </Grid>
 
         <react:ReactRootView x:Name="ReactRootView" Grid.Row="2"/>