Немодальное плавающее диалоговое окно в 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> 

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

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

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