Trong WinRT api, cách chấp nhận đầu vào của người dùng trong hộp thoại giống như trong ứng dụng Thời tiết và Tài chính

Question

Tôi đang cố gắng hiển thị hộp thoại cho phép người dùng nhập vị trí, giống như chức năng "thêm địa điểm" của Thời tiết Ứng dụng trên Windows 8.

Windows.UI.Không gian tên không gian mở không có quyền kiểm soát thích hợp. Nó có MessageDialog, nhưng tôi không nghĩ rằng nó có thể được tùy chỉnh để bao gồm một hộp văn bản trong đó.

Tôi có cần sử dụng điều khiển Windows.UI.XAML.Controls.Primitives.Popup bằng bất kỳ cơ hội nào không?

Answer 1

Không có kiểm soát ngoài hộp để Popup xử lý kiểu giao diện người dùng này, thư viện Callisto sử dụng điều khiển này khá nhiều để nó có nhiều ví dụ hay về cách sử dụng của nó.

Chỉnh sửa: Thực tế bây giờ thư viện Callisto có kiểm soát CustomDialog để giúp bạn thực hiện chính xác việc này.

Answer 2

Bạn không thể kết hợp và điều khiển XAML với trải nghiệm ứng dụng html.

Bạn có thể xây dựng điều khiển hộp thoại của riêng mình với tất cả những gì nó đòi hỏi (tập trung là khó!) Hoặc tôi khuyên bạn nên sử dụng các điều khiển WinJS.UI.Flyout và liên quan. Dưới đây là một số nguyên tắc: http://msdn.microsoft.com/en-us/library/windows/apps/hh465341.aspx

Bạn sẽ có thể tạo kiểu cho phù hợp.

Answer 3

Có, bạn có thể sử dụng điều khiển bật lên, nhưng bạn cần đặt thuộc tính con thành điều khiển nội dung bao phủ toàn bộ cửa sổ ứng dụng và thay đổi kích thước khi kích thước cửa sổ bị thay đổi. Nó không phải là khó để tạo của riêng bạn.

Tạo một điều khiển cấp mẫu web dựa trên một 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; 
    } 
} 

Thêm mã này vào 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> 

Bây giờ bạn có thể tạo một UserControl với PopoverView như nội dung. Ví dụ:

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

Và hiển thị nó khi bạn cần:

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