UWP FlyOut template acting differently on different systems - xaml

Question

I have a custom template for a flyout, and it works fine on about half of our systems, but it completely breaks on the other half.
Here's what the menu looks like when it works:
And here's what it looks like when it doesn't work... the semi-transparency is completely black, and the contents of the menu itself are completely off the screen:
You can ignore how the second screenshot is wider and how the stuff behind the menu looks different. That's just a different resolution and a different set-up, but this issue happens even when they're the same.
As noted in the picture, when the MenuFlyout appears (when I open the menu via clicking the AppBarButton), I need a semi-transparent area to appear in front of the rest of the page. This is accomplished by putting a big rectangle in the flyout's template, causing the shadow behind the flyout to be extended out over the rest of the page.
Here's the code of the button that triggers the flyout to show:
<AppBarButton
x:Name="MenuBtn"
Height="72"
Label="{StaticResource Menu}"
AllowFocusWhenDisabled="False"
Click="MenuBtn_Click"
CornerRadius="0"
Style="{StaticResource AppBarIconButtonStyle}"
TabIndex="9"
Width="72"
Margin="0,0,16,8"
Loaded="MenuBtn_Loaded"
RelativePanel.AlignRightWithPanel="True"
RelativePanel.AlignBottomWithPanel="False">
<AppBarButton.Flyout>
<MenuFlyout x:Name="HbgMenuFlyout" MenuFlyoutPresenterStyle="{StaticResource MenuFlyoutPresenterStyle}" Opening="MenuFlyout_Opening" Closing="HbgMenuFlyout_Closing" Closed="MenuFlyout_Closed">
<MenuFlyoutItem x:Name="SelectRoomBtn" x:Uid="HbgMenu_Select_Room" Style="{StaticResource MenuFlyoutItemStyleDark}" Click="SelectRoomBtn_Click" /> <!-- mobile only -->
<MenuFlyoutItem x:Name="PhysicianProfileBtn" x:Uid="HbgMenu_Physician_Preferences" Style="{StaticResource MenuFlyoutItemStyleDark}" Click="Physician_Preferences_Click" />
<MenuFlyoutItem x:Name="SystemSettingsBtn" x:Uid="HbgMenu_Settings" Style="{StaticResource MenuFlyoutItemStyleDark}" Click="SystemSettingsBtn_Click" />
<MenuFlyoutItem x:Name="HomeBtn" x:Uid="HbgMenu_Home" Style="{StaticResource MenuFlyoutItemStyleDark}" Click="HomeBtn_Click" />
<MenuFlyoutItem x:Name="LogoutBtn" x:Uid="HbgMenu_Logout" Style="{StaticResource MenuFlyoutItemStyleDark}" Click="LogoutBtn_Click" />
</MenuFlyout>
</AppBarButton.Flyout>
</AppBarButton>
Here's the code for the style attached to the MenuFlyout:
<Style x:Key="MenuFlyoutPresenterStyle" TargetType="MenuFlyoutPresenter">
<Setter Property="RequestedTheme" Value="Dark"/>
<Setter Property="Background" Value="Gray" />
<Setter Property="BorderBrush" Value="Gray" />
<Setter Property="BorderThickness" Value="0,0,0,0" />
<Setter Property="Padding" Value="0" />
<Setter Property="VerticalAlignment" Value="Stretch" />
<Setter Property="ScrollViewer.HorizontalScrollMode" Value="Disabled" />
<Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Disabled" />
<Setter Property="ScrollViewer.VerticalScrollMode" Value="Auto" />
<Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto" />
<Setter Property="ScrollViewer.IsHorizontalRailEnabled" Value="False" />
<Setter Property="ScrollViewer.IsVerticalRailEnabled" Value="False" />
<Setter Property="ScrollViewer.ZoomMode" Value="Disabled" />
<Setter Property="MinWidth" Value="{ThemeResource FlyoutThemeMinWidth}" />
<Setter Property="MaxWidth" Value="2000" />
<Setter Property="MinHeight" Value="{ThemeResource MenuFlyoutThemeMinHeight}"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="MenuFlyoutPresenter">
<controls:FlyoutGridControl />
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
And here's the code for that control:FlyoutGridControl:
<UserControl
x:Class="CardiologyApp.Controls.FlyoutGridControl"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:CardiologyApp.Controls"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
d:DesignHeight="300"
d:DesignWidth="400" >
<RelativePanel x:Name="RootGrid" HorizontalAlignment="Stretch">
<Rectangle x:Name="Shield" Width="2000" RelativePanel.AlignRightWith="MenuFlyoutPresenterScrollViewer" PointerPressed="Rectangle_PointerPressed" />
<ScrollViewer x:Name="MenuFlyoutPresenterScrollViewer"
Width="516"
RelativePanel.AlignRightWithPanel="True"
HorizontalAlignment="Right"
Background="Gray"
AutomationProperties.AccessibilityView="Raw">
<ItemsPresenter />
</ScrollViewer>
<Border x:Name="MenuFlyoutPresenterBorder"
VerticalAlignment="Stretch"
RelativePanel.Below="MenuFlyoutPresenterScrollViewer"
RelativePanel.AlignRightWithPanel="True"
Height="1000"
Background="Gray"
Width="516"
/>
</RelativePanel>
The workaround for the developers is to comment out the in the control:FlyoutGridControl.
Any suggestions on how to make the behavior consistent across systems? We're all on Windows 10 Enterprise.

Answer 1

MenuFlyout is not suitable for pop-up layer fixed on the right sidebar. In higher system versions, MenuFlyout is not limited by the size of the application window, which will invalidate your layout.
According to your actual display picture, SplitView should be a control that better meets your needs.
This is a simplified layout structure:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="1*" />
</Grid.RowDefinitions>
<CommandBar VerticalAlignment="Top" HorizontalAlignment="Stretch">
<AppBarButton/>
</CommandBar>
<SplitView DisplayMode="CompactOverlay" OpenPaneLength="516"
PanePlacement="Right" x:Name="AppSplitView" Grid.Row="1">
<SplitView.Pane>
<Grid>
<!--Used to display list items-->
<ListView/>
</Grid>
</SplitView.Pane>
<SplitView.Content>
<Grid>
<!--Main content display area-->
</Grid>
</SplitView.Content>
</SplitView>
</Grid>
If you want to apply the above code, you need to use ListViewItem in ListView to replace your MenuItem.
If you need to show your options, just set:
AppSplitView.IsPaneOpen = True;
For more information about SplitView and its display effect, you can check this document:
Split view