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

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

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

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

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

1 ответов


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

вот пример all-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. как уместно.