Close Current Window when parent UserControl is cl

问题:

Right now I have button on a usercontrol. Clicking that button will launch a window as follows,

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

Now please see the Image. Whenever I click outside the widget window i.e. anytime I click on the grayed out area of the usercontrol, I want the circular widget window to close. I am trying to raise an event for the usercontrol as follows but the event never fires. I also tried mouse down with no luck. I also tried raising the events to the child container of the usercontrol which is Grid in my case but the event wont raise. Please help

 private void Tbl_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
        {
            if (dlg != null)
            {
                dlg.Close();
            }
        }

Here is the code for the WidgetWindow.

<Window WindowStyle="None" ResizeMode="NoResize" WindowStartupLocation="CenterScreen" WindowState="Maximized"
        AllowsTransparency="True" Background="#80000000"
        Title="WidgetWindow" ShowInTaskbar="False" Loaded="widget_Loaded">
    <Grid>
            <Grid.Background>
                <SolidColorBrush Opacity="0.5" Color="White"></SolidColorBrush>
            </Grid.Background>

            <ListBox BorderThickness="0" Name="lstBox" Height="980" Width="980" ItemsSource="{Binding}">
                <ListBox.ItemsPanel>
                    <ItemsPanelTemplate>
                        <local:CircularPanel />
                    </ItemsPanelTemplate>
                </ListBox.ItemsPanel>
                <ListBox.Background>
                    <SolidColorBrush Opacity="0" Color="Gray"></SolidColorBrush>
                </ListBox.Background>

            </ListBox>

            <Grid Height="524" Width="524" Margin="54,36,0,0">
                <Ellipse Stroke="Black" StrokeThickness="1">
                    <Ellipse.Fill>
                        <RadialGradientBrush>
                            <GradientStop Color="White" Offset="0"></GradientStop>
                        </RadialGradientBrush>
                    </Ellipse.Fill>
                </Ellipse>

                <Grid Name="Inner1" Margin="0,5,0,0">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto"></RowDefinition>
                        <RowDefinition Height="Auto"></RowDefinition>
                    </Grid.RowDefinitions>
                    <Button Grid.Row="0" Name="btn1" Width="130" Height="130" HorizontalAlignment="Center" VerticalAlignment="Top" Click="btn1_Click">
                        <Button.Template>
                            <ControlTemplate TargetType="Button">


                                <Ellipse Grid.Row="0" Stroke="Black" StrokeThickness="1">
                                    <Ellipse.Fill>
                                        <ImageBrush ImageSource="Images/fruits.jpg" Stretch="Fill"></ImageBrush>
                                    </Ellipse.Fill>
                                </Ellipse>



                            </ControlTemplate>

                        </Button.Template>
                    </Button>
                    <TextBlock Margin="0,4,0,0" FontSize="12" HorizontalAlignment="Center" Grid.Row="1">Locate Sessions</TextBlock>

                </Grid>

                <Grid Name="Inner2" Margin="34,124,0,150">

                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto"></RowDefinition>
                        <RowDefinition Height="Auto"></RowDefinition>
                    </Grid.RowDefinitions>
                    <Button Grid.Row="0"  Name="btn2" Width="130" Height="130" HorizontalAlignment="Left" VerticalAlignment="Center" Click="btn2_Click">

                        <Button.Template>
                            <ControlTemplate TargetType="Button">
                                <Ellipse  Stroke="Black" StrokeThickness="1">
                                    <Ellipse.Fill>
                                        <ImageBrush ImageSource="Images/bird.jpg" Stretch="Fill"></ImageBrush>
                                    </Ellipse.Fill>
                                </Ellipse>
                            </ControlTemplate>
                        </Button.Template>
                    </Button>
                    <TextBlock Margin="20,4,0,0" FontSize="12" HorizontalAlignment="Left" Grid.Row="1">Mass Surveillence</TextBlock>
                </Grid>

                <Grid Name="Inner3" Margin="0,124,34,150">

                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto"></RowDefinition>
                        <RowDefinition Height="Auto"></RowDefinition>
                    </Grid.RowDefinitions>
                    <Button Grid.Row="0" Name="btn3" Width="130" Height="130" HorizontalAlignment="Right" VerticalAlignment="Center" Click="btn3_Click">
                        <Button.Template>
                            <ControlTemplate TargetType="Button">
                                <Ellipse Stroke="Black" StrokeThickness="1">
                                    <Ellipse.Fill>
                                        <ImageBrush ImageSource="Images/forest.jpg" Stretch="Fill"></ImageBrush>
                                    </Ellipse.Fill>
                                </Ellipse>
                            </ControlTemplate>
                        </Button.Template>
                    </Button>

                    <TextBlock Margin="0,4,8,0" FontSize="12" HorizontalAlignment="Right" Grid.Row="1">Subscriber Intelligence</TextBlock>
                </Grid>

                <Grid Name="Inner4" Margin="34,285,0,0">

                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto"></RowDefinition>
                        <RowDefinition Height="Auto"></RowDefinition>
                    </Grid.RowDefinitions>
                    <Button Grid.Row="0" Name="btn4" Width="130" Height="130" HorizontalAlignment="Left" VerticalAlignment="Center" Click="btn4_Click">
                        <Button.Template>
                            <ControlTemplate TargetType="Button">
                                <Ellipse Stroke="Black" StrokeThickness="1">
                                    <Ellipse.Fill>
                                        <ImageBrush ImageSource="Images/nature.jpg" Stretch="Fill"></ImageBrush>
                                    </Ellipse.Fill>
                                </Ellipse>
                            </ControlTemplate>
                        </Button.Template>
                    </Button>
                    <TextBlock Margin="45,4,0,0" FontSize="12" HorizontalAlignment="Left" Grid.Row="1">Analytics</TextBlock>
                </Grid>

                <Grid Name="Inner5" Margin="0,285,34,0">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto"></RowDefinition>
                        <RowDefinition Height="Auto"></RowDefinition>
                    </Grid.RowDefinitions>
                    <Button Grid.Row="0" Name="btn5" Width="130" Height="130" HorizontalAlignment="Right" VerticalAlignment="Center" Click="btn5_Click">
                        <Button.Template>
                            <ControlTemplate TargetType="Button">
                                <Ellipse Stroke="Black" StrokeThickness="1">
                                    <Ellipse.Fill>
                                        <ImageBrush ImageSource="Images/beach.jpg" Stretch="Fill"></ImageBrush>
                                    </Ellipse.Fill>
                                </Ellipse>
                            </ControlTemplate>
                        </Button.Template>
                    </Button>
                    <TextBlock Margin="0,4,40,0" FontSize="12" HorizontalAlignment="Right" Grid.Row="1">Historical</TextBlock>
                </Grid>

                <Grid Name="Inner6" Margin="0,0,0,10" >
                    <Button Name="btn6" Width="130" Height="130" HorizontalAlignment="Center" VerticalAlignment="Bottom" Click="btn6_Click">
                        <Button.Template>
                            <ControlTemplate TargetType="Button">
                                <Ellipse Stroke="Black" StrokeThickness="1">
                                    <Ellipse.Fill>
                                        <ImageBrush ImageSource="Images/Exit.jpg" Stretch="Fill"></ImageBrush>
                                    </Ellipse.Fill>
                                </Ellipse>
                            </ControlTemplate>
                        </Button.Template>
                    </Button>
                </Grid>

                <Grid Name="Inner7" HorizontalAlignment="Center" VerticalAlignment="Center">
                    <Button Name="btn7" Width="130" Height="130">
                        <Button.Template>
                            <ControlTemplate TargetType="Button">
                                <Ellipse Name="pointerEllipse" Stroke="Black" StrokeThickness="1">

                                </Ellipse>
                            </ControlTemplate>
                        </Button.Template>
                    </Button>
                </Grid>
            </Grid>
            <!--</ControlTemplate>
                    </Button.Template>

                </Button>-->
        </Grid>
</Window>

回答1:

You can use Popup instead of WidgetWindow. Put all your WidgetWindow content into Popup. Configure Popup Staysopen="False". You can refer to below code:

<Popup Name="popLink" StaysOpen="False" Placement="Mouse" MaxWidth="200"
PopupAnimation="Slide" AllowsTransparency="True">
...Your content
</Popup>

Use popLink.IsOpen = true to open it.