Modify WPF Window when Submenu opens without closing Submenu - wpf

Question

I have a Window with a Menu on it. When the Menu is opened, I would like to change the Window's appearance to look disabled. Simply covering it with a gray Rectangle looks nice. Here is the Window markup:
<Grid>
<!--Content-->
<ContentControl Content="{Binding CurrentViewModel}" />
<!--Container to hide content-->
<Rectangle x:Name="Disabler" Fill="#77000000" Visibility="{Binding DisableWindow, Converter={StaticResource BoolToVisibilityConverter}}" />
</Grid>
I tried to set DisableWindow to true when the Submenu opens and false when it closes. However, setting this value seems to close the Submenu. How can I ensure the Submenu stays open?
private void MenuItem_SubmenuOpened(object sender, RoutedEventArgs e)
{
MainWindowViewModel mainVM = Window.GetWindow(this).DataContext as MainWindowViewModel;
if (mainVM != null)
{
mainVM.DisableWindow = true;
}
}
Edit: Since the Rectangle gets set to Visible, the MouseUp event is happening on Disabler. This is why the Submenu closes on me. I tried setting IsHitTestVisible="False" on the Rectangle, but that makes everything under it clickable. Is there a way to keep the Rectangle from stealing focus?

Answer 1

Instead of overlapping the grid with Rectangle, I divided my 2 half.
Is the Menu bar (10 % of screen)
Rectangle area (90% of screen)
Xaml of the screen
<Window x:Class="WpfApp4.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:WpfApp4"
xmlns:sys="clr-namespace:System;assembly=mscorlib"
mc:Ignorable="d" x:Name="Window1"
Title="MainWindow" Height="450" Width="800">
<Grid >
<Grid.RowDefinitions>
<RowDefinition Height="35"/>
<RowDefinition/>
</Grid.RowDefinitions>
<Border>
<Border.Effect>
<BlurEffect Radius="{Binding ElementName=Window1,Path=DataContext.Radius}" KernelType="Gaussian"/>
</Border.Effect>
<Menu Grid.Row="0" x:Name="Menubar" HorizontalAlignment="Left" Height="24" Margin="10,10,0,0" VerticalAlignment="Top" Width="772" >
<MenuItem Header="Home" SubmenuOpened="MenuItem_SubmenuOpened" SubmenuClosed="MenuItem_SubmenuClosed" >
<MenuItem Header="Office" >
<MenuItem Header="Ground Floor"/>
</MenuItem>
<MenuItem Header="Exit" />
</MenuItem>
</Menu>
</Border>
<Rectangle Grid.Row="1" x:Name="Disabler" Fill="{Binding ElementName=Window1, Path=DataContext.BackGroundColor}" />
</Grid>
As you can see in the Xaml, I have used 2 events SubmenuOpened and SubmenuClosed.
These 2 Methods are responsible to flip the rectangle fill Brush color.
In ViewModel/CodeBehind, I have created 1 property called BackGroundColor, which will be having white color when menu is not clicked and will have grey if we click on Menu.
BackGroundColor will be binded with the Rectangle's Fill property.
Code Behind
public partial class MainWindow : Window,INotifyPropertyChanged
{
private Brush _backGroundcolor;
public event PropertyChangedEventHandler PropertyChanged;
private void NotifyPropertyChanged(string propertyName)
{
if (PropertyChanged != null)
{
PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
}
}
public int _radius { get; set; }
public int Radius
{
get
{
return _radius;
}
set
{
_radius = value;
NotifyPropertyChanged(nameof(Radius));
}
}
public Brush BackGroundColor
{
get
{
return _backGroundcolor;
}
set
{
_backGroundcolor = value;
NotifyPropertyChanged(nameof(BackGroundColor));
}
}
public MainWindow()
{
InitializeComponent();
this.DataContext = this;
}
private void MenuItem_SubmenuOpened(object sender, RoutedEventArgs e)
{
BackGroundColor = new SolidColorBrush(Colors.Gray);
Radius = 5;
}
private void MenuItem_SubmenuClosed(object sender, RoutedEventArgs e)
{
BackGroundColor = new SolidColorBrush(Colors.White);
Radius = 0;
}
}
Check out the Menu clicked image below.

Answer 2

I had to go with setting IsHitTestVisible="False" on the Rectangle, even though that makes everything under it clickable. It's a hack, and I would love a better fix.