How to close popup in silverlight?

Question

I have ListBox. when i click on ListBox item I have to show item information in popup But it does not close after clicking out side. I am creating popup in itemsselected event. how to handle popup close?

Answer 1

I'm not quite sure what you mean by "clicking out side" because popups act in a modal way.

You should set up your popup window as a ChildWindow. Then you can handle the Closed event.

Here's a very simple sample that shows a selected string from a listbox in a main window.

First the main window:

<UserControl x:Class="PopupTest.MainPage"
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"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="400">

<Grid x:Name="LayoutRoot" Background="White">
    <StackPanel Orientation="Vertical">
        <ListBox x:Name="SomeList" Width="100" Height="100"  />
        <TextBlock x:Name="DialogResult" Width="100" />
    </StackPanel>
</Grid>

In the codebehind, the popup is triggered when the list selection changes. Simply set up a Closed handler. In this example, I simply put the chosen list item into a textblock, then upon closing the popup, I just put the dialog result in a textblock on the main window (to show if the user pushed ok or cancel).

    public MainPage()
    {
        InitializeComponent();
        SomeList.SelectionChanged += new SelectionChangedEventHandler(SomeList_SelectionChanged);

        SomeList.Items.Add("one");
        SomeList.Items.Add("two");
        SomeList.Items.Add("three");
    }

    void SomeList_SelectionChanged(object sender, SelectionChangedEventArgs e)
    {
        var popup = new SomePopup();
        popup.Closed += new EventHandler(popup_Closed);
        popup.ChosenItem.Text = (string)SomeList.SelectedItem;
        DialogResult.Text = "";
        popup.Show();
    }

    void popup_Closed(object sender, EventArgs e)
    {
        var popup = sender as SomePopup;
        if (popup.DialogResult == true)
            DialogResult.Text = "Ok";
        else
            DialogResult.Text = "Cancel";
    }

The popup closes when the user pushes Ok or Cancel, because the DialogResult value is set in the popup's code-behind:

        private void OKButton_Click(object sender, RoutedEventArgs e)
    {
        this.DialogResult = true;
    }

    private void CancelButton_Click(object sender, RoutedEventArgs e)
    {
        this.DialogResult = false;
    }

Answer 2

One approach is to create a canvas with a transparent background that you make visible at the same time as opening the Popup and attaching to is Mouse down event to closed the popup. Like this:-

Xaml:-

<Grid x:Name="LayoutRoot" Background="White" >

    <Grid.RowDefinitions>
        <RowDefinition Height="*" />
        <RowDefinition Height="Auto" />
    </Grid.RowDefinitions>

        <Popup x:Name="MyPopup" Closed="MyPopup_Closed" HorizontalOffset="100" VerticalOffset="100" Opened="Popup_Opened">
            <ListBox x:Name="PopupChild" MaxHeight="300" LostFocus="PopupChild_LostFocus">
                <sys:String>Hello World</sys:String>
            </ListBox>
        </Popup>

        <Button Content="Open Popup" Grid.Row="1" Click="Button_Click" />

    <Canvas x:Name="PopupOpen" Visibility="Collapsed" Background="Transparent" Grid.RowSpan="2" MouseLeftButtonDown="PopupOpen_MouseLeftButtonDown" />

</Grid>

Code:-

    private void Button_Click(object sender, RoutedEventArgs e)
    {
        MyPopup.IsOpen = true;
    }

    private void Popup_Opened(object sender, EventArgs e)
    {
        PopupOpen.Visibility = Visibility.Visible;
    }

    private void PopupChild_LostFocus(object sender, RoutedEventArgs e)
    {
        MyPopup.IsOpen = false;
    }

    private void PopupOpen_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
    {
        MyPopup.IsOpen = false;
    }

    private void MyPopup_Closed(object sender, EventArgs e)
    {
        PopupOpen.Visibility = Visibility.Collapsed;
    }

Note that its important that if your popup contains a control that can receive the focus that you also handle LostFocus.

Answer 3

This is similar to a question that I had. Take a look at How to dismiss a popup in Silverlight when clicking outside of the control?. I posted in my solution an extension method that's been very helpful in making popups close when clicking outside of them.