CODEWITHSUNDEEP
.netwpfxaml
MrScf
MrScf

Reputation: 2497

Gray main window when open modal dialog in WPF

When a modal dialog is opened from the main window, I want overlay the main window with gray color. Is there a standard solution in WPF to simulate this effect?

Here one example:

Upvotes: 3

Views: 6961

Answers (2)

Mark Cooper
Mark Cooper

Reputation: 6884

As with all XAML, there are a million ways to skin this cat, but here is one example:

Dialog.xaml:

<Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
        WindowStyle="None"
        AllowsTransparency="True"
        WindowStartupLocation="CenterOwner" 
        WindowState="Maximized"
        Background="#33000000">

    <Grid Width="323" Height="200" VerticalAlignment="Center" HorizontalAlignment="Center" Background="#FFFFFF">
        <!-- grid things go here -->
    </Grid>
</Window>

This will open full screen, and cover the original application with a grey mask. The contents of the dialog will be in a centred grid with a white background.

Upvotes: 1

Phil Wright
Phil Wright

Reputation: 22906

There is no built in functionality for this but it should be easy to implement.

In your main window you need a Grid at the top level that has no defined columns or rows, so it is just a single cell that takes up all the client area. The first child of the Grid is a UserControl that implements all the normal content of the application. The second child is just a Rectangle with a semi-transparent grey colour as its foreground. Have its Visibility data bound against an appropriate property on your main window or a property of the ViewModel that is the DataContext of your application.

Whenever you show a modal dialog you set the appropriate property to show the rectangle and when the modal dialog is removed it resets the property back to false. You could add a base class that inherits from Window that does this automatically and then derive all your actual dialogs from that base class.

Upvotes: 8

Related Questions