En WinRT api, cómo aceptar la entrada del usuario en un diálogo como en Weather and Finance aplicaciones

Question

Estoy tratando de mostrar un cuadro de diálogo que permite al usuario escribir una ubicación, al igual que en la función "agregar lugares" del clima Aplicación en Windows 8.

El espacio de nombres Windows.UI.Popups no tiene un control apropiado. Tiene el MessageDialog, pero no creo que se pueda personalizar para incluir un cuadro de texto en él.

¿Tendría que usar el control Windows.UI.XAML.Controls.Primitives.Popup por casualidad?

Answer 1

No hay un control fuera de la caja aparte de Popup para manejar este estilo de UI, la biblioteca Callisto usa este control bastante, por lo que tiene muchos buenos ejemplos de su uso.

Edit: De hecho, ahora la biblioteca de Callisto tiene el control CustomDialog para ayudarle a hacer exactamente esto.

Answer 2

No se puede mezclar y combinar el XAML Controles con la experiencia de la aplicación HTML.

Puede construir su propio control de diálogo con todo lo que esto implica (¡el enfoque es difícil!), O recomendaría usar WinJS.UI.Flyout y controles relacionados. Aquí hay algunas pautas: http://msdn.microsoft.com/en-us/library/windows/apps/hh465341.aspx

Debería poder darle un estilo como mejor le parezca.

Answer 3

Sí, puede utilizar el control emergente, pero debe establecer la propiedad secundaria en un control de contenido que cubra la ventana completa de la aplicación Y cambie de tamaño cuando se cambie el tamaño de la ventana. No es difícil crear el tuyo propio.

crear un control con plantilla basada en una 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; 
    } 
} 

añadir este código a la 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> 

Ahora puede crear un control de usuario con el PopoverView como contenido. Ejemplo:

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

y mostrarla cuando lo necesite:

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