In WinRT api, come accettare l'input dell'utente in una finestra di dialogo proprio come nelle app Meteo e Finanza

Question

Sto tentando di visualizzare una finestra di dialogo che consente all'utente di digitare una posizione, proprio come nella funzione "aggiungi posti" del Meteo App su Windows 8.

Lo spazio dei nomi Windows.UI.Popups non dispone di un controllo appropriato. Ha il MessageDialog, ma non penso che possa essere personalizzato per includere una casella di testo al suo interno.

Avrei bisogno di utilizzare il controllo Windows.UI.XAML.Controls.Primitives.Popup per caso?

Answer 1

Non esiste un controllo fuori dalla casella oltre a Popup per gestire questo stile di interfaccia utente, la libreriautilizza questo controllo un po 'così ha molti buoni esempi del suo utilizzo.

Modifica: In effetti ora la libreria Callisto ha il controllo CustomDialog per aiutarti a fare esattamente questo.

Answer 2

Non è possibile combinare il codice XAML Controlli con l'esperienza di applicazione html.

È possibile costruire il proprio controllo di finestra di dialogo con tutto ciò che esso comporta (la messa a fuoco è difficile!) Oppure si consiglia di utilizzare WinJS.UI.Flyout e i controlli correlati. Ecco alcune linee guida: http://msdn.microsoft.com/en-us/library/windows/apps/hh465341.aspx

Dovresti essere in grado di modellarlo come meglio credi.

Answer 3

Sì, è possibile utilizzare il controllo Popup, ma è necessario impostare la proprietà Child su un controllo contenuto che copra l'intera finestra App E ridimensiona quando viene modificata la dimensione della finestra. Non è difficile crearne di tuoi.

Creare un controllo basato su modelli sulla base di un 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; 
    } 
} 

Aggiungere questo codice al 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> 

Ora è possibile creare un UserControl con il PopoverView come contenuto. Esempio:

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

e mostrare quando ne avete bisogno:

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