10

Windows 8 の Weather アプリの「場所の追加」機能と同様に、ユーザーが場所を入力できるダイアログを表示しようとしています。

Windows.UI.Popups 名前空間には適切なコントロールがありません。MessageDialog がありますが、カスタマイズしてテキストボックスを含めることはできないと思います。

万が一 Windows.UI.XAML.Controls.Primitives.Popup コントロールを使用する必要がありますか?

Windows 8 の Weather アプリの入力ダイアログ

4

3 に答える 3

12

このスタイルの UI を処理するために、Popup 以外にすぐに使用できるコントロールはありません。Callistoライブラリはこのコントロールをかなり使用しているため、その使用法の良い例がたくさんあります。

編集:実際、Callisto ライブラリには CustomDialog コントロールがあり、まさにこれを行うのに役立ちます。

于 2012-07-22T04:50:23.253 に答える
6

はい、Popup コントロールを使用できますが、Child プロパティを、アプリ ウィンドウ全体をカバーし、ウィンドウ サイズが変更されたときにサイズ変更するコンテンツ コントロールに設定する必要があります。自分で作成することは難しくありません。

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;
于 2012-11-16T12:19:40.010 に答える
2

XAML コントロールと html アプリケーション エクスペリエンスを組み合わせることはできません。

必要なすべてを備えた独自のダイアログ コントロールを構築することもできます (フォーカスが難しい!)、または WinJS.UI.Flyout および関連するコントロールを使用することをお勧めします。ここにいくつかのガイドラインがあります: http://msdn.microsoft.com/en-us/library/windows/apps/hh465341.aspx

思い通りにスタイリングできるはずです。

于 2012-07-21T17:01:34.190 に答える