c# - WPF popup staysopen=false still keep the popup open while clicking outside

Question

my problem here is I made a listbox inside the popup, and set the popup's staysopen=false. But each time popup box pops, I have to click something inside the popup(like select an element in listbox), then click outside the popup, and it will close automatically. If I don't click anything, and even if I click other elements outside the popup, the popup stays on. I need the popup closes without needing me to click any element inside it. What can I do? Here is the code, there are some other style link to this code but just some color style.

My control is when user click the textbox on the top of the popup box, the listbox pops. If user does nothing and click any place outside this element, the popup box closes. Thanks.

I can use the following code to get it done in silverlight. But seems like in wpf, it is not working anymore.

popupAncestor = FindHighestAncestor(this.ListBoxPopup); if (popupAncestor == null) { return; } popupAncestor.AddHandler(System.Windows.Controls.Primitives.Popup.MouseLeftButtonDownEvent, (MouseButtonEventHandler)ClosePopup, true);

<Grid x:Name="MainGrid" Margin="0" VerticalAlignment="Center">
    <Grid.RowDefinitions>
        <RowDefinition Height="20"></RowDefinition>
        <RowDefinition Height="auto"></RowDefinition>
    </Grid.RowDefinitions>
    <Grid Margin="1,1,1,0" x:Name="TopBar"  Visibility="Visible"  Grid.Row="0" Height="20" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Background="{StaticResource COL_BTN_LIGHT}">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"></ColumnDefinition>
            <ColumnDefinition Width="19"></ColumnDefinition>
        </Grid.ColumnDefinitions>
        <TextBox x:Name="TextBoxSearchItem"  x:FieldModifier="private" HorizontalAlignment="Stretch" Grid.Column="0" VerticalAlignment="Stretch" BorderThickness="0,0,0,0" Background="Transparent" TextChanged="TextBoxSearchItem_TextChanged"></TextBox>
        <ToggleButton x:Name="DropDownArrorButton" Grid.Column="1" Style="{StaticResource ComboBoxReadonlyToggleButton}"></ToggleButton>
        <!--<TextBlock HorizontalAlignment="Center" Text="Search" Grid.ColumnSpan="2" TextBlock.FontStyle="Italic" Opacity="0.4" VerticalAlignment="Center"/>-->
    </Grid>
    <Grid Grid.Row="1" HorizontalAlignment="Stretch" x:Name="PopupGrid"  Margin="0,1,0,0" >
        <Popup x:Name="ListBoxPopup" StaysOpen="False" x:FieldModifier="private"  IsOpen="{Binding ElementName=DropDownArrorButton, Path=IsChecked, Mode=TwoWay}" 
               AllowsTransparency="true" Margin="0" HorizontalAlignment="Stretch" Placement="Bottom" 
               PlacementTarget="{Binding ElementName=TopBar}"  Opened="OnPopupOpened" Closed="OnPopupClosed"
               HorizontalOffset="{Binding ElementName=PopupGrid, Path=Value, Mode=TwoWay}"
                 VerticalOffset="{Binding ElementName=PopupGrid, Path=Value, Mode=TwoWay}">
            <ListBox x:Name="ListBoxContainer" Width="{Binding ElementName=MainGrid, Path=ActualWidth}" 
                     HorizontalContentAlignment="Stretch" SelectionMode="Single"  Height="200"  Margin="0" 
                     SelectionChanged="ListBoxContainer_SelectionChanged"
                     MouseDoubleClick="ListBoxContainer_MouseDoubleClick">
                <ListBox.ItemTemplate>
                    <DataTemplate>
                        <Grid HorizontalAlignment="Stretch">
                            <Border BorderBrush="{Binding SearchedBackColor}" BorderThickness="{Binding Indicator}" Width="{Binding ElementName=MainGrid, Path=ActualWidth}">
                                <TextBlock x:Name="ContentText" Text="{Binding Name}" Margin="1,0,0,0"/>
                            </Border>                               
                        </Grid>
                    </DataTemplate>
                </ListBox.ItemTemplate>
            </ListBox>
        </Popup>                
        <Border x:Name="listBorder" BorderBrush="{StaticResource COL_BTN}" BorderThickness="0,1,0,0" ></Border>     
    </Grid>                 
</Grid>

Answer 1

You should create a dependency property in your view model or control for "IsPopupOpen" as shown below to manage state of the popup. Then you can bind both the ToggleButton "IsChecked" and popup "IsOpen" to that DP.

Also on your ToggleButton, set "Focusable=false" and "IsThreeState=false"

    public bool IsDropDownOpen
    {
     get { return (bool)GetValue(IsDropDownOpenProperty); }
     set { SetValue(IsDropDownOpenProperty, value); }
    }        

    public static readonly DependencyProperty IsDropDownOpenProperty =
          DependencyProperty.Register("IsDropDownOpen", typeof(bool), typeof(Window), new UIPropertyMetadata(false));

Good luck!