Flyout

Элемент Flyout аналогичен контекстным меню, всплывающим подсказкам или диалоговым окнам. Данный элемент используется вместе с другими элементами, для которых надо создать контекстное меню. Так, для всех кнопок его можно прикрепить через свойство Button.Flyout, а для всех остальных элементов используется свойство FlyoutBase.AttachedFlyout.

Если к кнопке прикрепить Flyout, то он отобразится после нажатия на кнопку. Например:

<Button Content="Жми">
    <Button.Flyout>
        <Flyout x:Name="dialogBox">
            <Flyout.Content>
                <StackPanel>
                    <TextBlock Text="Подтвердить выбор" />
                    <Button Click="Button_Click" Content="OK" Margin="0 10 0 0" />
                </StackPanel>
            </Flyout.Content>
        </Flyout>
    </Button.Flyout>
</Button>

Здесь Flyout фактически представляет диалоговое окно с текстовой надписью и копкой. В коде C# мы можем задать обработчик для кнопки такого диалогового окна:

private void Button_Click(object sender, RoutedEventArgs e)
{
    dialogBox.Hide(); // закрываем окно
}

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

Выше мы рассмотрели установку Flyout для кнопок, однако для других элементов управления все будет немного по другому. Так, Flyout надо программно отображать (сам по себе он не отобразится) с помощью метода ShowAt() или ShowAttachedFlyout. А для прикрепления Flyout к другим элементам управления, отличным от кнопок, применяется свойство FlyoutBase.AttachedFlyout

Посмотрим на примере TextBlock:

<TextBlock Tapped="TextBlock_Tapped" TextWrapping="Wrap" Text="Онегин был по мненью многих...">
    <FlyoutBase.AttachedFlyout>
        <Flyout x:Name="dialogBox">
            <StackPanel>
                <TextBlock Text="Нажмите ОК для закрытия окна" />
                <Button Content="OK" Click="Exit_Click" />
            </StackPanel>
        </Flyout>
    </FlyoutBase.AttachedFlyout>
</TextBlock>

И в файле кода зададим обработчики, которые будут управлять поведением Flyout:

private void Exit_Click(object sender, RoutedEventArgs e)
{
    dialogBox.Hide();
}

private void TextBlock_Tapped(object sender, TappedRoutedEventArgs e)
{
    dialogBox.ShowAt((TextBlock)sender);
}

MenuFlyout

На основе Flyout существует несколько дополнительных элементов управления: DatePickerFlyout (выпадающее окно для выбора даты), TimePickerFlyout и MenuFlyout (контекстное меню).

Применяются они аналогично. Например, используем MenuFlyout:

<Button Content="Жми">
    <Button.Flyout>
        <MenuFlyout Placement="Bottom">
            <MenuFlyoutSubItem Text="Проект">
                <MenuFlyoutItem Text="Создать" />
                <MenuFlyoutItem Text="Открыть" />
            </MenuFlyoutSubItem>
            <MenuFlyoutItem Text="Правка" />
            <MenuFlyoutSeparator />
            <ToggleMenuFlyoutItem IsChecked="True" Text="Сохранить" />
            <MenuFlyoutItem Text="Выход" Click="Exit_Click" />
		</MenuFlyout>               
	</Button.Flyout>
</Button>

Внутрь MenuFlyout добавляются отдельные пункты меню. Если нам нужен одиночный пункт меню, то применяется элемент MenuFlyoutItem. Если мы хотим создать иерархической меню, в котором есть подменю, то используется элемент MenuFlyoutSubItem, в который добавляются элементы подменю.

Для красоты можно использовать элемент-разграничитель в виде черты - MenuFlyoutSeparator. И кроме того, если нам нужен пункт меню, который может находиться в отмеченном и неотмеченном состоянии, то мы можем воспользоваться элементом ToggleMenuFlyoutItem.

К каждому пункту меню можно прикрепить обработчики событий. Так, в примере выше для последнего пункта задан обработчик события нажатия. Определим его в файле кода c#:

private void Exit_Click(object sender, RoutedEventArgs e)
{
    App.Current.Exit(); // выход из приложения
}

В итоге при нажатии на кнопку нам отобразится вот такое контекстное меню:

Среди собственной функциональности MenuFlyout следует отметить разве что свойство Placement, которое задает положение контекстного меню и может принимать следующие значения:

• Bottom: расположение под кнопкой

• Fill: меню растягивается на полную ширину

• Top: расположение над кнопкой

• Left: расположение слева

• Right: расположение справа