fix(Windows): Simplify MainPage.xaml and add acrylic background

microsoft · Sep 7, 2020 · 13d83d7 · 13d83d7
1 parent 56a44cf
commit 13d83d7
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 44 deletions.
diff --git a/windows/ReactTestApp/MainPage.cpp b/windows/ReactTestApp/MainPage.cpp
@@ -27,7 +27,7 @@ namespace winrt::ReactTestApp::implementation
 
         SetUpTitleBar();
 
-        auto menuItems = MenuFlyout().Items();
+        auto menuItems = ReactMenuBarItem().Items();
         std::optional<::ReactTestApp::Manifest> manifest = ::ReactTestApp::GetManifest();
         if (!manifest.has_value()) {
             MenuFlyoutItem newMenuItem;
@@ -81,11 +81,6 @@ namespace winrt::ReactTestApp::implementation
         SetInitialProperties(component.initialProperties);
     }
 
-    void MainPage::OnReactMenuClick(IInspectable const &, RoutedEventArgs)
-    {
-        ReactMenuButton().Flyout().ShowAt(ReactMenuButton());
-    }
-
     MenuFlyoutItem MainPage::MakeComponentMenuButton(::ReactTestApp::Component const &component)
     {
         hstring componentDisplayName = to_hstring(component.displayName.value_or(component.appKey));
@@ -100,22 +95,24 @@ namespace winrt::ReactTestApp::implementation
 
     void MainPage::SetUpTitleBar()
     {
-        // Set close, minimize and maximize icons background to transparent
-        auto appView = ApplicationView::GetForCurrentView().TitleBar();
-        appView.ButtonBackgroundColor(Colors::Transparent());
-        appView.BackgroundColor(Colors::Transparent());
-
         auto coreTitleBar = CoreApplication::GetCurrentView().TitleBar();
         coreTitleBar.LayoutMetricsChanged({this, &MainPage::OnCoreTitleBarLayoutMetricsChanged});
         coreTitleBar.ExtendViewIntoTitleBar(true);
-        Window::Current().SetTitleBar(BackgroundElement());
+
+        // Set close, minimize and maximize icons background to transparent
+        auto viewTitleBar = ApplicationView::GetForCurrentView().TitleBar();
+        viewTitleBar.ButtonBackgroundColor(Colors::Transparent());
+        viewTitleBar.ButtonInactiveBackgroundColor(Colors::Transparent());
+
+        Window::Current().SetTitleBar(AppTitleBar());
     }
 
     // Adjust height of custom title bar to match close, minimize and maximize icons
     void MainPage::OnCoreTitleBarLayoutMetricsChanged(CoreApplicationViewTitleBar const &sender,
                                                       IInspectable const &)
     {
-        TitleBar().Height(sender.Height());
+        AppTitleBar().Height(sender.Height());
+        AppMenuBar().Height(sender.Height());
     }
 
     void MainPage::SetInitialProperties(

diff --git a/windows/ReactTestApp/MainPage.h b/windows/ReactTestApp/MainPage.h
@@ -18,8 +18,6 @@ namespace winrt::ReactTestApp::implementation
                               Windows::UI::Xaml::RoutedEventArgs);
         void LoadFromDevServer(Windows::Foundation::IInspectable const &,
                                Windows::UI::Xaml::RoutedEventArgs);
-        void OnReactMenuClick(Windows::Foundation::IInspectable const &,
-                              Windows::UI::Xaml::RoutedEventArgs);
         Windows::Foundation::IAsyncAction
         OnNavigatedTo(Windows::UI::Xaml::Navigation::NavigationEventArgs const &e);
         using Base = MainPageT;

diff --git a/windows/ReactTestApp/MainPage.xaml b/windows/ReactTestApp/MainPage.xaml
@@ -8,41 +8,23 @@
     mc:Ignorable="d"
     xmlns:react="using:Microsoft.ReactNative">
 
-    <Page.Resources>
-        <ResourceDictionary>
-            <SolidColorBrush x:Key="ButtonBackground" Color="{ThemeResource SystemAltHighColor}"/>
-        </ResourceDictionary>
-    </Page.Resources>
-
-    <Grid>
+    <Grid Background="{StaticResource SystemControlAcrylicWindowBrush}">
         <Grid.RowDefinitions>
             <RowDefinition Height="Auto"/>
             <RowDefinition Height="*"/>
         </Grid.RowDefinitions>
 
-        <Grid x:Name="TitleBar">
-            <Grid>
-                <Grid x:Name="BackgroundElement" Background="Transparent">
-                    <TextBlock x:Name="AppTitle" HorizontalAlignment="Center" VerticalAlignment="Center"/>
-                </Grid>
-
-                <Button Content="React" x:Name="ReactMenuButton" Click="OnReactMenuClick">
-                    <Button.Flyout>
-                        <MenuFlyout x:Name="MenuFlyout" Placement="BottomEdgeAlignedLeft">
-                            <MenuFlyout.MenuFlyoutPresenterStyle>
-                                <Style TargetType= "MenuFlyoutPresenter" >
-                                    <Setter Property = "Margin" Value= "0,-5,0,0"/>
-                                </Style>
-                            </MenuFlyout.MenuFlyoutPresenterStyle>
-                            <MenuFlyoutItem Text="Load from JS bundle" Click="LoadFromJSBundle"/>
-                            <MenuFlyoutItem Text="Load from dev server" Click="LoadFromDevServer"/>
-                            <MenuFlyoutSeparator/>
-                        </MenuFlyout>
-                    </Button.Flyout>
-                </Button>
-
+        <Grid>
+            <Grid x:Name="AppTitleBar" Background="Transparent">
+                <TextBlock x:Name="AppTitle" HorizontalAlignment="Center" VerticalAlignment="Center"/>
             </Grid>
-
+            <MenuBar x:Name="AppMenuBar" HorizontalAlignment="Left" VerticalContentAlignment="Stretch" Width="Auto">
+                <MenuBarItem x:Name="ReactMenuBarItem" Title="React">
+                    <MenuFlyoutItem Text="Load from JS bundle" Click="LoadFromJSBundle"/>
+                    <MenuFlyoutItem Text="Load from dev server" Click="LoadFromDevServer"/>
+                    <MenuFlyoutSeparator/>
+                </MenuBarItem>
+            </MenuBar>
         </Grid>
 
         <react:ReactRootView x:Name="ReactRootView" Grid.Row="2"/>