Bring Usercontrol to front making background transparent

Question

In the Image below I have the background Content of the image as a usercontrol and the front circle as a UserControl. When a button is clicked in the background usercontrol, then I need to display the circle UserControl by bringing it to the front and blurring the background as shown in the image below. Right now in the first UserControl in the ViewModel I have a command and I am doing something like this. Problem is Window is not brought to front and I cant blur the background. Please help.

private void OpenWidget(object obj)
        {
            WidgetWindow window = new WidgetWindow();
            window.WindowState = WindowState.Maximized;
            window.WindowStyle = WindowStyle.None;
            window.Show();
            window.BringIntoView();
        }

Answer 1

I'd use a Window instead, so something like this:

<Window x:Class="YourNamespace.WidgetWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="WidgetWindow"
    WindowStyle="None" ResizeMode="NoResize" WindowStartupLocation="CenterScreen" WindowState="Maximized"
    AllowsTransparency="True" Background="#80000000">
    <Grid>
        <Ellipse Width="300" Height="300" Fill="CornflowerBlue" />
    </Grid>
</Window>

Then in the button handler do a ShowDialog() and set the main window's effect to blur:

private void Button_Click(object sender, RoutedEventArgs e)
{
    this.Effect = new BlurEffect();
    var dlg  = new WidgetWindow();
    dlg.Owner = this;
    dlg.ShowDialog();
    this.Effect = null;
}

Result:

Obviously you'll need to adapt this to your specific requirements e.g. using a UserControl if you don't want it full-screen, or using Show() instead of ShowDialog() if you need it modeless etc but this should be enough to get you started.