Как создать выпадающий список?

Question

Вопрос, как создать такой выпадающий список из заголовка страницы?

Answer 1

Добрый день.

Стандартные шаблоны приложений недолюбливаю, но давайте идею покажу.

Создал пустой проект. Добавил в него UserControl, который будет выполнять роль меню. Пусть будет вот такой у него XAML:

<UserControl
    x:Class="App7.MyUserControl1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:App7"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    d:DesignHeight="300"
    d:DesignWidth="400">    
    <Grid>
        <Rectangle Fill="Black" Opacity="0.5" />
        <StackPanel>
            <StackPanel.Resources>
                <Style TargetType="TextBlock">
                    <Setter Property="FontSize" Value="15" />
                </Style>
            </StackPanel.Resources>
            <TextBlock Text="Пункт меню 1" />
            <TextBlock Text="Пункт меню 1" />
            <TextBlock Text="Пункт меню 1" />
            <TextBlock Text="Пункт меню 1" />
            <TextBlock Text="Пункт меню 1" />
        </StackPanel>
    </Grid>
</UserControl>

Накидаем главнйю страницу нашего приложения:

<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
    <Grid.RowDefinitions>
        <RowDefinition Height="auto" />
        <RowDefinition Height="1*" />
    </Grid.RowDefinitions>
    <TextBlock Text="Это типа меню" FontSize="30" PointerPressed="TextBlock_PointerPressed" />
    <Image Source="18.png" Grid.Row="1" Width="150" Height="150" HorizontalAlignment="Left" VerticalAlignment="Top" />
</Grid>

Ну и обработчик клика на "меню":

private void TextBlock_PointerPressed(object sender, PointerRoutedEventArgs e)
{
    MyUserControl1 m = new MyUserControl1();
    Popup p = new Popup();
    p.Child = m;
    p.HorizontalOffset = 30;
    p.VerticalOffset = 40;
    p.IsOpen = true;
}

Вот так это работает:

Вам осталось сделать только сделать анимацию при наведении на пункты меню ну и их обработку. Да, при клике на окне вне Popup необходимо закрывать Popup установив в IsOpen значение false.

Answer 2

Спасибо! Но вспомнив про класс Popup я решил сделать все немного (ИМХО) проще.

В XAML у меня одна строчка

<TextBlock x:Name="pageTitle" Text="Название" Style="{StaticResource PageHeaderTextStyle}" Tapped="open"/>

А обработчик у меня получился таким

 private async void open(object sender, Windows.UI.Xaml.Input.TappedRoutedEventArgs e)
        {
            var popupMenu = new PopupMenu();
            popupMenu.Commands.Add(new UICommand("Пункт 1", async x => 
                {
                    MessageDialog dlg = new MessageDialog("Описание","Пункт 1");
                    await dlg.ShowAsync();
                }));
            popupMenu.Commands.Add(new UICommand("Пункт 2"));
            popupMenu.Commands.Add(new UICommand("Пункт 3"));

            var button = (TextBlock)sender;
            var transform = button.TransformToVisual(this);
            var point = transform.TransformPoint(new Point(45, 40));

            await popupMenu.ShowAsync(point);
        }

Таким образом не требуется добавлять UserControl, и обрабатывать события нажатия на элементы внутри меню можно через лямбда выражения. Но я пока без понятия как добавить анимацию появления, и как называется стрелочка вниз, потому что я точно знаю что она где-то в стандартных шрифтах