Немодальный плавающий диалог в WPF

Question

Я хочу создать последовательность пользовательского интерфейса, в которой пользователь нажимает кнопку, и под ней появляется небольшая панель с кнопкой и текстовым полем и, возможно, небольшим списком элементов. Диалог не является модальным и, что более важно, он просто исчезает, когда вы щелкаете где-то еще в главном окне.

Например, если щелкнуть значок звездочки «Избранное» в Internet Explorer 7 или дважды щелкнуть звездочку в строке местоположения в Firefox, появится диалоговое окно редактора закладок.

Какой самый чистый способ достичь этого?

Должен ли я использовать UserControl и полностью фиксировать его местоположение при нажатии кнопки? Если это так, как я могу скрыть это, когда пользователь щелкает где-то еще?

Answer 1

Я бы сказал, что самый простой способ сделать то, что вы ищете, это использовать Popup . Класс Popup отображает элемент, который плавает над остальными элементами на экране, но является немодальным и может быть настроен на исчезновение, когда пользователь щелкает по нему, - идеально для вашего немодального диалога. Класс Popup имеет свойства, которые позволяют вам контролировать, где он отображается относительно другого элемента управления (в вашем случае, кнопка, которую вы хотите, чтобы пользователь нажал, чтобы открыть всплывающее окно).

Вот пример для всех XAML:

<Grid>
    <ToggleButton HorizontalAlignment="Center" VerticalAlignment="Top" 
                  x:Name="PopButton" Content="Pop"/>
    <Popup Placement="Bottom" PlacementTarget="{Binding ElementName=PopButton}" StaysOpen="False" 
           IsOpen="{Binding ElementName=PopButton, Path=IsChecked, Mode=TwoWay}">
        <Rectangle Height="100" Width="200" Fill="Blue"/>
    </Popup>
</Grid>

Вы также можете использовать команды или обработчики событий для открытия / закрытия всплывающего окна из кода.

Свойства Placement и PlacementTarget задают, где будет появляться всплывающее окно и какой элемент управления будет отображаться относительно него (существуют другие параметры, которые позволяют отображать его относительно текущей позиции и мыши) Если для параметра StaysOpen установлено значение False, WPF автоматически закроет всплывающее окно, когда пользователь нажимает за его пределами.

По умолчанию у всплывающего окна нет собственного стиля - это просто контейнер для плавающего содержимого - поэтому вам придется стилизовать его так, чтобы он выглядел как окно chrome / toolbar / etc. при необходимости.