В WinRT api, как принять ввод пользователя в диалоговом окне, как в приложениях "Погода и финансы"

Я пытаюсь отобразить диалоговое окно, которое позволяет пользователю вводить местоположение, как в функции "добавить места" приложения Weather в Windows 8.

Пространство имен Windows.UI.Popups не имеет соответствующего элемента управления. У него есть MessageDialog, но я не думаю, что его можно настроить, чтобы включить в него текстовое поле.

Нужно ли использовать Windows.UI.XAML.Controls.Primitives.Popup для управления каким-либо образом?

The input dialog in Weather App on Windows 8

Ответ 1

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

Изменить: Фактически теперь библиотека Callisto имеет элемент управления CustomDialog, который поможет вам сделать именно это.

Ответ 2

Да, вы можете использовать элемент управления Popup, но вам нужно установить дочернее свойство в элемент управления содержимым, который охватывает полное окно приложения И изменяет размер при изменении размера окна. Нетрудно создать свой собственный.

Создайте Templated Control на основе ContentControl:

public sealed class PopoverView : ContentControl
{
    public PopoverView()
    {
        this.DefaultStyleKey = typeof(PopoverView);
        Loaded += OnLoaded;
        Unloaded += OnUnloaded;
    }

    /// <summary>
    /// Measure the size of this control: make it cover the full App window
    /// </summary>
    protected override Size MeasureOverride(Size availableSize)
    {
        Rect bounds = Window.Current.Bounds;
        availableSize = new Size(bounds.Width, bounds.Height);
        base.MeasureOverride(availableSize);
        return availableSize;
    }

    private void OnLoaded(object sender, RoutedEventArgs e)
    {
        Window.Current.SizeChanged += OnSizeChanged;
    }

    private void OnSizeChanged(object sender, WindowSizeChangedEventArgs e)
    {
        InvalidateMeasure();
    }

    private void OnUnloaded(object sender, RoutedEventArgs e)
    {
        Window.Current.SizeChanged -= OnSizeChanged;
    }
}

Добавьте этот код в Generic.xaml:

<SolidColorBrush x:Key="PopoverViewBackgroundThemeBrush">White</SolidColorBrush>
<!-- Semi-transparant black brush to cover the background: -->
<SolidColorBrush x:Key="PopoverViewOverlayThemeBrush">#80000000</SolidColorBrush>

<Style TargetType="local:PopoverView">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="local:PopoverView">
                <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="*" />
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="*" />
                    </Grid.RowDefinitions>
                    <Border Grid.Row="0" Background="{StaticResource PopoverViewOverlayThemeBrush}" />
                    <Border Grid.Row="1" Child="{TemplateBinding Content}" Background="{StaticResource PopoverViewBackgroundThemeBrush}" />
                    <Border Grid.Row="2" Background="{StaticResource PopoverViewOverlayThemeBrush}" />
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Теперь вы можете создать UserControl с PopoverView в качестве контента. Пример:

<UserControl
    x:Class="PopoverCustomControlTest.MyUserControl1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:PopoverCustomControlTest"
    xmlns:custom="using:MyCustomControls"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <custom:PopoverView>
        <!-- Create your own dialog here instead of this simple button -->
        <Button Content="Close PopoverView"
                Click="Button_Click_1"
                Background="Black"
                HorizontalAlignment="Center"
                Margin="40" />
    </custom:PopoverView>

</UserControl>
public sealed partial class MyUserControl1 : UserControl
{
    private Popup popup;

    public MyUserControl1(Popup popup)
    {
        if (popup == null) throw new ArgumentNullException("popup");
        this.popup = popup;
        this.InitializeComponent();
    }

    private void Button_Click_1(object sender, RoutedEventArgs e)
    {
        this.popup.IsOpen = false;
    }
}

И покажите его, когда вам это нужно:

Popup popup = new Popup();
popup.Child = new MyUserControl1(popup);
popup.IsOpen = true;

Ответ 3

Вы не можете смешивать и сопоставлять элементы управления XAML с использованием приложения html.

Вы можете либо построить свой собственный диалоговый элемент управления со всем, что он влечет за собой (фокус сложный!), или я бы рекомендовал использовать WinJS.UI.Flyout и связанные с ним элементы управления. Вот несколько рекомендаций: http://msdn.microsoft.com/en-us/library/windows/apps/hh465341.aspx

Вы должны уметь стилизовать его по своему усмотрению.