windows-8 - 在 WinRT api 中，如何在对话框中接受用户输入，就像在天气和财务应用程序中一样

Question

我正在尝试显示一个允许用户键入位置的对话框，就像在 Windows 8 上的天气应用程序的“添加位置”功能中一样。

Windows.UI.Popups 命名空间没有适当的控件。它有 MessageDialog，但我认为它不能被定制为在其中包含一个文本框。

我是否需要使用 Windows.UI.XAML.Controls.Primitives.Popup 控件？

Answer 1

除了 Popup 之外，没有开箱即用的控件来处理这种风格的 UI，Callisto库大量使用了这种控件，因此它有很多很好的使用示例。

编辑：事实上，现在 Callisto 库有 CustomDialog 控件来帮助你做到这一点。

Answer 2

是的，您可以使用 Popup 控件，但您需要将 Child 属性设置为覆盖整个 App 窗口的内容控件，并在窗口大小更改时调整大小。创建自己的并不难。

基于 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>

现在您可以创建一个以 PopoverView 作为内容的 UserControl。例子：

<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;

Answer 3

您不能将 XAML 控件与 html 应用程序体验混合搭配。

您可以使用它所需要的所有内容构建自己的对话框控件（很难集中注意力！），或者我建议使用 WinJS.UI.Flyout 和相关控件。以下是一些指南：http: //msdn.microsoft.com/en-us/library/windows/apps/hh465341.aspx

你应该能够按照你认为合适的方式来设计它。