Keep menu in UWP title bar draggable and resizable

I'm trying to make a cross platform app with Uno, for desktop use specifically and I want to tailer the UWP build to put a menu in the title bar - which I can do.

What I cannot do is enable the window to remain resizable all the way around and draggable outside the menu in the titlebar.

I have tried a number of approaches and none of them seem to work I either get a working menu with no resize/drag or a resizable/draggable window with a non-functional menu.

This is what I have so far

at the bottom of App.xaml.cs->OnLaunched:

#if WINDOWS_UWP
      CoreApplication.GetCurrentView().TitleBar.ExtendViewIntoTitleBar = true;
      ApplicationView appView = ApplicationView.GetForCurrentView();
      appView.TitleBar.BackgroundColor = Colors.Transparent;
      appView.TitleBar.ButtonBackgroundColor = Colors.Transparent;
      appView.TitleBar.ButtonForegroundColor = Colors.DarkGray;
      appView.TitleBar.ButtonInactiveBackgroundColor = Colors.Transparent;
      appView.TitleBar.InactiveBackgroundColor = Colors.Transparent;
#endif

In MainPage.xaml.cs:

public MainPage()
{
  this.InitializeComponent();
  Window.Current.SetTitleBar(bkgTitleBar);
}

And the content of MainPage.xaml:

<Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>

        <Grid Grid.Row="0" x:Name="ctlTitleBar" Background="Transparent">
            <Rectangle x:Name="bkgTitleBar" />
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto" />
                </Grid.ColumnDefinitions>
                <Grid Grid.Column="0" Background="Transparent">
                    <!--<Rectangle x:Name="bkgTitleBar" />-->
                    <MenuBar>
                        <MenuBarItem Title="File">
                            <MenuFlyoutSubItem Text="New">
                                <MenuFlyoutItem Text="Plain Text Document"/>
                                <MenuFlyoutItem Text="Rich Text Document"/>
                                <MenuFlyoutItem Text="Other Formats..."/>
                            </MenuFlyoutSubItem>
                            <MenuFlyoutItem Text="Open..."/>
                            <MenuFlyoutItem Text="Save"/>
                            <MenuFlyoutSeparator />
                            <MenuFlyoutItem Text="Exit"/>
                        </MenuBarItem>

                        <MenuBarItem Title="Edit">
                            <MenuFlyoutItem Text="Undo"/>
                            <MenuFlyoutItem Text="Cut"/>
                            <MenuFlyoutItem Text="Copy"/>
                            <MenuFlyoutItem Text="Paste"/>
                        </MenuBarItem>

                        <MenuBarItem Title="View">
                            <MenuFlyoutItem Text="Output"/>
                            <MenuFlyoutItem Text="Raw"/>
                            <MenuFlyoutSeparator/>
                            <MenuFlyoutItem Text="External..."/>
                        </MenuBarItem>

                        <MenuBarItem Title="Help">
                            <MenuFlyoutItem Text="About"/>
                        </MenuBarItem>
                    </MenuBar>
                </Grid>
            </Grid>
        </Grid>

        <Grid Grid.Row="1" VerticalAlignment="Top">
            <Viewbox>
                <Grid MinWidth="1680">
                    <TextBlock Text="Oobey! Doobey! Doobey! Dooo!" Margin="20" FontSize="30" FontFamily="{StaticResource TextBlockFontFamily1}" />
                    <ToggleButton Content="clicky" FontWeight="Bold"  Margin="86,120,0,0" VerticalAlignment="Top" Height="59" Width="233" FontSize="22" />
                    <ToggleButton Content="clicky2" FontWeight="Bold"  Margin="1519,276,0,0" VerticalAlignment="Top" Height="59" Width="233" FontSize="22"/>
                </Grid>
            </Viewbox>
        </Grid>
    </Grid>
</Page>

Ideally I want to be able to alter it in a way that will work like the Windows Photos app does when the "OneDrive" button shows up at the top.

Can anybody help me to do this?

Solution

You need to make sure the element you set as "title bar" has non-zero dimensions and covers the area you would like to be draggable. In this case bkgTitleBar has no size and background by default, so instead try giving it a size:

<Rectangle 
   x:Name="bkgTitleBar" 
   Fill="Transparent" 
   HorizontalAlignment="Stretch" 
   VerticalAlignment="Stretch" />

This should stretch the Rectangle to match the size of ctlTitleBar.