Move react menu to title bar

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

Hide file tree

Showing 4 changed files with 65 additions and 18 deletions.
diff --git a/windows/ReactTestApp/MainPage.cpp b/windows/ReactTestApp/MainPage.cpp
@@ -2,40 +2,54 @@
 
 #include "MainPage.h"
 
+#include <winrt/Windows.ApplicationModel.Core.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::Xaml::RoutedEventArgs;
-using winrt::Windows::UI::Xaml::Controls::MenuFlyout;
-using winrt::Windows::UI::Xaml::Controls::MenuFlyoutItem;
+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 menuItems = MenuFlyout().Items();
+        auto coreTitleBar = CoreApplication::GetCurrentView().TitleBar();
+        coreTitleBar.ExtendViewIntoTitleBar(true);
+        Window::Current().SetTitleBar(BackgroundElement());
+
+        auto menuItems = ReactMenu().Children();
         std::optional<::ReactTestApp::Manifest> manifest = ::ReactTestApp::GetManifest();
         if (!manifest.has_value()) {
-            MenuFlyoutItem newMenuItem;
-            newMenuItem.Text(L"Couldn't parse app.json");
+            Button newMenuItem;
+            newMenuItem.Content(winrt::box_value(L"Couldn't parse app.json"));
             newMenuItem.IsEnabled(false);
             menuItems.Append(newMenuItem);
         } else {
+            AppTitle().Text(to_hstring(manifest.value().displayName));
+
             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);
 
-                MenuFlyoutItem newMenuItem;
+                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.Text(newComponent.DisplayName());
                 newMenuItem.Click({this, &MainPage::SetReactComponentName});
                 menuItems.Append(newMenuItem);
             }
@@ -72,8 +86,13 @@ namespace winrt::ReactTestApp::implementation
 
     void MainPage::SetReactComponentName(IInspectable const &sender, RoutedEventArgs)
     {
-        auto s = sender.as<MenuFlyoutItem>().CommandParameter();
+        auto s = sender.as<Button>().CommandParameter();
         ReactRootView().ComponentName(s.as<ComponentViewModel>()->AppKey());
     }
 
+    void MainPage::OpenReactMenu(IInspectable const &, RoutedEventArgs)
+    {
+        ReactButton().Flyout().ShowAt(ReactButton());
+    }
+
 }  // namespace winrt::ReactTestApp::implementation
diff --git a/windows/ReactTestApp/MainPage.h b/windows/ReactTestApp/MainPage.h
@@ -20,7 +20,7 @@ namespace winrt::ReactTestApp::implementation
         ::ReactTestApp::ReactInstance reactInstance_;
 
         void SetReactComponentName(Windows::Foundation::IInspectable const &,
-                                   Windows::UI::Xaml::RoutedEventArgs e);
+                                   Windows::UI::Xaml::RoutedEventArgs);
     };
 }  // namespace winrt::ReactTestApp::implementation
 

diff --git a/windows/ReactTestApp/MainPage.xaml b/windows/ReactTestApp/MainPage.xaml
@@ -8,21 +8,48 @@
     mc:Ignorable="d"
     xmlns:react="using:Microsoft.ReactNative">
 
+    <Page.Resources>
+        <Style TargetType="Button" x:Key="ReactMenuButton" BasedOn="{StaticResource TextBlockButtonStyle}">
+            <Setter Property="Foreground" Value="Black"/>
+            <Setter Property="FontSize" Value="12pt"/>
+        </Style>
+    </Page.Resources>
+
     <Grid>
         <Grid.RowDefinitions>
+            <RowDefinition Height="Auto"/>
             <RowDefinition Height="Auto"/>
             <RowDefinition Height="*"/>
         </Grid.RowDefinitions>
 
-        <MenuBar VerticalAlignment="Top" Grid.Row="0">
-            <MenuBarItem Title="React" x:Name="MenuFlyout">
-                <MenuFlyoutItem Text="Load from JS bundle" Click="LoadFromJSBundle"/>
-                <MenuFlyoutItem Text="Load from dev server" Click="LoadFromDevServer"/>
-                <MenuFlyoutSeparator/>
-            </MenuBarItem>
-        </MenuBar>
+        <Grid x:Name="TitleBar" Background="Transparent">
+            <Rectangle x:Name="BackgroundElement" />
+
+            <Grid>
+                <Grid.ColumnDefinitions>
+                    <ColumnDefinition Width="Auto"/>
+                    <ColumnDefinition Width="*"/>
+                </Grid.ColumnDefinitions>
+                <Button Grid.Column="0" Content="React" x:Name="ReactButton" Click="OpenReactMenu" Style="{StaticResource ReactMenuButton}" Foreground="Black">
+                    <Button.Flyout>
+                        <Flyout Placement="BottomEdgeAlignedLeft" x:Name="MenuFlyout">
+                            <StackPanel x:Name="ReactMenu">
+                                <Button Click="LoadFromJSBundle" Style="{StaticResource ReactMenuButton}">Load from JS bundle</Button>
+                                <Button Click="LoadFromDevServer" Style="{StaticResource ReactMenuButton}">Load from dev server</Button>
+                                <MenuFlyoutSeparator/>
+                            </StackPanel>
+                        </Flyout>
+                    </Button.Flyout>
+                </Button>
+
+                <TextBlock x:Name="AppTitle" 
+               Grid.Column="1" 
+               Style="{StaticResource CaptionTextBlockStyle}" HorizontalAlignment="Center" VerticalAlignment="Center" 
+               />
+            </Grid>
+        </Grid>
 
-        <react:ReactRootView x:Name="ReactRootView" Grid.Row="1"/>
+        <react:ReactRootView x:Name="ReactRootView" Grid.Row="2"/>
 
     </Grid>
 </Page>
diff --git a/windows/ReactTestApp/pch.h b/windows/ReactTestApp/pch.h
@@ -10,6 +10,7 @@
 #include <winrt/Windows.UI.Xaml.Controls.Primitives.h>
 #include <winrt/Windows.UI.Xaml.Controls.h>
 #include <winrt/Windows.UI.Xaml.Data.h>
+#include <winrt/Windows.UI.Xaml.Shapes.h>
 #include <winrt/Windows.UI.Xaml.Interop.h>
 #include <winrt/Windows.UI.Xaml.Markup.h>
 #include <winrt/Windows.UI.Xaml.Navigation.h>