`DropDownButton` currently relies on `Popup.StaysOpen` to close the content when the user clicks away. However, this fails in this scenario:
```
<StackPanel>
<ToggleButton x:Name="toggleButton">
Click to open first popup
</ToggleButton>
<Popup IsOpen="{Binding IsChecked, ElementName=toggleButton}" PlacementTarget="{Binding ElementName=toggleButton}" Placement="Bottom" StaysOpen="False">
<Border Background="White" BorderBrush="Black" BorderThickness="1" Padding="3">
<StackPanel>
<TextBlock>Here is somewhere for you to click once the below ComboBox or DropDownButton is open</TextBlock>
<ComboBox>
<ComboBoxItem>First</ComboBoxItem>
<ComboBoxItem>Second</ComboBoxItem>
</ComboBox>
<xctk:DropDownButton>
Here is the drop-down button
<xctk:DropDownButton.DropDownContent>
<Label>Here is the content</Label>
</xctk:DropDownButton.DropDownContent>
</xctk:DropDownButton>
</StackPanel>
</Border>
</Popup>
</StackPanel>
```
So simply placing a `DropDownButton` within a `Popup` is problematic because the user can't click away inside the hosting `Popup` in order to dismiss the `DropDownButton`. But you'll notice that the `ComboBox` does not suffer from the same problem. That's because, internally, it uses an `IsDropDownOpen` property instead of relying on `Popup.StaysOpen`. It handles various mouse and keyboard events to ensure that `IsDropDownOpen` is set to `false` at appropriate times.
`DropDownButton` needs to exhibit this same behavior if it is to be useful within a `Popup`.
Comments: ** Comment from web user: kentcb **
```
<StackPanel>
<ToggleButton x:Name="toggleButton">
Click to open first popup
</ToggleButton>
<Popup IsOpen="{Binding IsChecked, ElementName=toggleButton}" PlacementTarget="{Binding ElementName=toggleButton}" Placement="Bottom" StaysOpen="False">
<Border Background="White" BorderBrush="Black" BorderThickness="1" Padding="3">
<StackPanel>
<TextBlock>Here is somewhere for you to click once the below ComboBox or DropDownButton is open</TextBlock>
<ComboBox>
<ComboBoxItem>First</ComboBoxItem>
<ComboBoxItem>Second</ComboBoxItem>
</ComboBox>
<xctk:DropDownButton>
Here is the drop-down button
<xctk:DropDownButton.DropDownContent>
<Label>Here is the content</Label>
</xctk:DropDownButton.DropDownContent>
</xctk:DropDownButton>
</StackPanel>
</Border>
</Popup>
</StackPanel>
```
So simply placing a `DropDownButton` within a `Popup` is problematic because the user can't click away inside the hosting `Popup` in order to dismiss the `DropDownButton`. But you'll notice that the `ComboBox` does not suffer from the same problem. That's because, internally, it uses an `IsDropDownOpen` property instead of relying on `Popup.StaysOpen`. It handles various mouse and keyboard events to ensure that `IsDropDownOpen` is set to `false` at appropriate times.
`DropDownButton` needs to exhibit this same behavior if it is to be useful within a `Popup`.
Comments: ** Comment from web user: kentcb **
As a quick and hacky proof of concept, here's what I did:
1. Changed the base class of `DropDownButton` from `ContentControl` to `ComboBox`
2. Added `Content` and `ContentTemplate` dependency properties (since it no longer inherits these from `ContentControl`).
3. Commented out the `IsOpen` property and used `IsDropDownOpen` instead.
4. Changed all use of `IsOpen` in the template to `IsDropDownOpen`
5. Changed the `Popup` in the template by removing the `StaysOpen` setter and adding `IsOpen="{TemplateBinding IsDropDownOpen}"`
With those changes in place, it worked as expected. Of course, I'm not suggesting you change to `ComboBox` as a base class! Just wanted to prove that it contains the desired behavior.