Guida introduttiva: Aggiunta di un riquadro a comparsa

Guida introduttiva: Aggiunta di un riquadro a comparsa (XAML)

[ Questo articolo è rivolto agli sviluppatori per Windows 8.x e Windows Phone 8.x che realizzano app di Windows Runtime. Gli sviluppatori che usano Windows 10 possono vedere Documentazione aggiornata ]

Informazioni su come usare un Flyout per visualizzare temporaneamente l'interfaccia utente rilevante per il contesto degli utenti. Usalo per raccogliere l'input dell'utente, mostrare ulteriori dettagli su un elemento o chiedere all'utente di confermare un'azione.

Prerequisiti

  • Windows 8.1 o Windows Phone 8.1
  • Microsoft Visual Studio 2013
  • In questa esercitazione si suppone che tu sia in grado di aggiungere controlli in un'app di Windows Runtime di base che usa C++, C# o Visual Basic. Per istruzioni sull'aggiunta di un controllo, vedi Guida introduttiva: Aggiunta di controlli e gestione di eventi.

Quando usare un riquadro a comparsa

Un controllo Flyout visualizza un'interfaccia utente semplificata (chiamata riquadro a comparsa) che si limita a fornire informazioni oppure richiede l'interazione dell'utente. Diversamente da una finestra di dialogo, un riquadro a comparsa può essere chiuso facilmente facendo clic con il mouse o toccando lo schermo all'esterno del riquadro. Un riquadro a comparsa deve essere visualizzato solo quando l'utente fa clic con il mouse o tocca lo schermo. Non chiudere un riquadro a comparsa a livello di programmazione a meno che l'utente non abbia premuto un pulsante di comando o abbia scelto una voce di menu nel riquadro. L'utente può chiudere un riquadro a comparsa in qualsiasi momento senza eseguire un'azione, toccando o facendo clic all'esterno di esso oppure premendo ESC.

Gli usi dei riquadri a comparsa includono:

  • Raccolta di informazioni: se l'utente seleziona un'azione che richiede ulteriore input, ad esempio la scelta di un'opzione o la digitazione di informazioni, puoi inserire tale elemento dell'interfaccia utente in un riquadro a comparsa per mantenere l'utente nel contesto originale.
  • Visualizzazione di ulteriori informazioni: mostra altri dettagli su un elemento sullo schermo a cui l'utente è interessato.
  • Avvisi e conferme: avvisa l'utente prima che esegua un'azione potenzialmente distruttiva e richiedi la conferma dell'azione.

Per visualizzare un menu di elementi selezionabili dall'utente, usa un controllo MenuFlyout. Vedi Guida introduttiva: Aggiunta di un controllo MenuFlyout.

Non usare un Flyout in alternativa a un ToolTip o a un menu di scelta rapida. Usa un ToolTip per visualizzare una breve descrizione che scompare dopo un intervallo di tempo specificato. Usa un menu di scelta rapida per azioni contestuali relative alla selezione di testo, ad esempio Copia e Incolla.

Per altre info, vedi Linee guida ed elenco di controllo per i riquadri a comparsa.

Usare un riquadro a comparsa con un controllo pulsante

È comune associare un riquadro a comparsa a un pulsante, pertanto il controllo Button ha una proprietà Flyout che permette di semplificare l'associazione e l'apertura di un controllo Flyout. Un riquadro a comparsa associato a un pulsante si apre automaticamente quando l'utente fa clic sul pulsante. Non devi gestire alcun evento per aprire il riquadro a comparsa, inclusi i controlli derivati da Button, come AppBarButton.

In questo esempio viene mostrato un controllo Flyout associato a un controllo Button. Il riquadro a comparsa avvisa l'utente che gli elementi verranno eliminati definitivamente, e gli consente di confermare o annullare l'eliminazione.

  1. Dichiara un controllo Button in XAML (Extensible Application Markup Language).
  2. Associa un elemento Flyout alla proprietà Flyout dei pulsanti.
  3. Dichiara i contenuti del riquadro a comparsa. Nel riquadro a comparsa può essere presente soltanto un elemento del contenuto. Gli elementi dell'interfaccia utente complessi devono pertanto essere incapsulati in un riquadro di radice, ad esempio StackPanel o Grid.
  4. Gestisci l'evento Click del pulsante all'interno del riquadro a comparsa in modo che l'azione venga eseguita in seguito alla conferma dell'utente.

    Quando l'utente conferma l'azione, nascondi il riquadro a comparsa a livello di programmazione chiamando il metodo Hide.

    Per annullare l'azione, l'utente può chiudere il riquadro a comparsa toccando lo schermo all'esterno del riquadro o premendo ESC.


<Button x:Name="DeleteButton" Content="Empty cart">
    <Button.Flyout>
        <Flyout>
            <StackPanel>
                <TextBlock Style="{StaticResource BaseTextBlockStyle}">
                    All items will be permanently removed from your cart.
                </TextBlock>
                <Button Click="DeleteConfirmation_Click" Margin="0,5,0,0">
                    Empty my cart
                </Button>
            </StackPanel>
        </Flyout>
    </Button.Flyout>
</Button>


private void DeleteConfirmation_Click(object sender, RoutedEventArgs e)
{
    // Dismiss the Flyout after the action is confirmed.
    DeleteButton.Flyout.Hide();
            
    // Delete content of cart...
}

Quando l'utente fa clic sul pulsante, il riquadro a comparsa assume questo aspetto. L'utente può fare clic sul pulsante all'interno del riquadro a comparsa per proseguire, oppure all'esterno del riquadro a comparsa per chiuderlo e annullare l'azione.

Pulsante con un riquadro a comparsa

Usare un riquadro a comparsa con altri elementi dell'interfaccia utente

Puoi associare un controllo Flyout a un oggetto FrameworkElement usando la proprietà associata FlyoutBase.AttachedFlyout. In questo caso devi rispondere a un'interazione nell'oggetto FrameworkElement, ad esempio l'evento Tapped, e aprire il controllo Flyout nel codice.

Questo esempio mostra come usare un Flyout condiviso per visualizzare un'anteprima quando un utente tocca un controlloImage.

  1. Dichiara il Flyout StaticResource e assegna ad esso un valore attributo x:Key.
  2. Per ciascun elemento che condivide il proprio Flyout, imposta la proprietà associata FlyoutBase.AttachedFlyout sulla risorsa Flyout.
  3. Gestisci l'evento Tapped per ciascun elemento che usa il riquadro a comparsa. Nel gestore eventi chiama il metodo FlyoutBase.AttachedFlyout e passa l'elemento toccato (sender) come parametro.


<!-- Declare the shared flyout as a resource. -->
<Page.Resources>
    <Flyout x:Key="ImagePreviewFlyout" Placement="Right">
        <!-- The DataContext of the Image that the flyout is attached to must be the Image's Source. -->
        <Image Source="{Binding Path=Source}" MaxHeight="400" MaxWidth="400" Stretch="Uniform"/>
        <Flyout.FlyoutPresenterStyle>
            <Style TargetType="FlyoutPresenter">
                <Setter Property="ScrollViewer.ZoomMode" Value="Enabled"/>
                <Setter Property="Background" Value="Black"/>
                <Setter Property="BorderBrush" Value="Gray"/>
                <Setter Property="BorderThickness" Value="5"/>
                <Setter Property="MinHeight" Value="300"/>
                <Setter Property="MinWidth" Value="300"/>
            </Style>
        </Flyout.FlyoutPresenterStyle>
    </Flyout>
</Page.Resources>

... 

<!-- Assign the flyout to each element that shares it. -->
<StackPanel>
    <Image Source="Assets/cliff.jpg" Width="50" Height="50" Margin="10" Tapped="Image_Tapped" 
           FlyoutBase.AttachedFlyout="{StaticResource ImagePreviewFlyout}"
           DataContext="{Binding RelativeSource={RelativeSource Mode=Self}}"/>
    <Image Source="Assets/grapes.jpg" Width="50" Height="50" Margin="10" Tapped="Image_Tapped" 
           FlyoutBase.AttachedFlyout="{StaticResource ImagePreviewFlyout}"
           DataContext="{Binding RelativeSource={RelativeSource Mode=Self}}"/>
    <Image Source="Assets/rainier.jpg" Width="50" Height="50" Margin="10" Tapped="Image_Tapped" 
           FlyoutBase.AttachedFlyout="{StaticResource ImagePreviewFlyout}"
           DataContext="{Binding RelativeSource={RelativeSource Mode=Self}}"/>
</StackPanel>
...


private void Image_Tapped(object sender, TappedRoutedEventArgs e)
{
    FlyoutBase.ShowAttachedFlyout((FrameworkElement)sender);  
}

Quando un utente tocca un'immagine di dimensioni ridotte, un'anteprima ingrandita viene visualizzata in un riquadro a comparsa simile a questo.

Immagine con un riquadro a comparsa

Mostrare e nascondere un riquadro a comparsa

È possibile aprire un solo riquadro a comparsa alla volta. Quando si apre un riquadro a comparsa, i riquadri a comparsa già aperti vengono chiusi automaticamente.

Come illustrato nel primo esempio di questa esercitazione, prima di eseguire un'azione devi chiudere un riquadro a comparsa chiamando il relativo metodo Hide.



    DeleteButton.Flyout.Hide();


Non chiudere un riquadro a comparsa a livello di programmazione a meno che l'utente non abbia premuto un pulsante di comando o abbia scelto una voce di menu nel riquadro. Se ad esempio l'utente ha semplicemente attivato o disattivato un'impostazione, non devi chiudere il riquadro a comparsa. Il riquadro a comparsa viene chiuso automaticamente quando un'azione viene annullata dall'utente facendo clic all'esterno del riquadro.

Un riquadro a comparsa associato a un controllo Button viene visualizzato automaticamente facendo clic sul pulsante. Quando un riquadro a comparsa è associato a un altro elemento, devi aprire il riquadro a comparsa in risposta a un evento, in genere un evento Tapped. Nel gestore eventi chiama il metodo FlyoutBase.ShowAttachedFlyout. Questa operazione è illustrata nel secondo esempio dell'esercitazione.



    FlyoutBase.ShowAttachedFlyout((FrameworkElement)sender);  


Il riquadro a comparsa viene in genere posizionato accanto all'elemento associato, per mantenere l'utente nel contesto corrente. Se può rivelarsi utile posizionare il riquadro a comparsa accanto a un elemento correlato diverso dall'elemento da cui è stato richiamato, puoi chiamare ShowAt. Per altre info ed esempi, vedi il metodo ShowAt.

Condivisione di un riquadro a comparsa

Un Flyout dichiarato in XAML può essere dichiarato come integrato o come risorsa da condividere. Il primo esempio dell'esercitazione illustra come dichiarare un Flyout inline nel codice XAML di un pulsante. Questo Flyout può essere associato solo al Button in cui è dichiarato.

Il secondo esempio dell'esercitazione illustra come dichiarare un Flyout StaticResource e usarlo con diversi elementi. In questo esempio, la proprietà DataContext del controllo Image principale è impostata su se stessa.


<Image DataContext="{Binding RelativeSource={RelativeSource Mode=Self}}"/>

Il controllo Flyout eredita la proprietà DataContext del relativo elemento anchor in modo che tu possa associare la proprietà Source del controllo Image nel Flyout alla proprietà Source di DataContext. In questo modo, in un singolo Flyout viene visualizzata un'anteprima di qualsiasi Image toccata dall'utente.



<Flyout>
    <Image Source="{Binding Path=Source}"/>
...
</Flyout>

Questo esempio illustra la sintassi per dichiarare un Flyout integrato o una risorsa condivisibile.



<!-- Inline flyouts -->
<!-- Flyout declared inline on a Button -->
<Button>
    <Button.Flyout>
        <Flyout>
        <!-- Flyout content -->
        </Flyout>
    </Button.Flyout>
</Button>

<!-- Flyout declared inline on a FrameworkElement -->
<TextBlock>
    <FlyoutBase.AttachedFlyout>
        <Flyout>
        <!-- Flyout content -->
        </Flyout>
    </FlyoutBase.AttachedFlyout>
</TextBlock>


<!-- Shared resource flyouts -->
<!-- A shared Flyout resource -->
<Page.Resources>
    <Flyout x:Key="SharedFlyoutResource">
        <!-- Flyout content -->
    </Flyout>
</Page.Resources>

<!-- A shared Flyout resource assigned to a Button -->
<Button Flyout="{StaticResource SharedFlyoutResource}"/>

<!-- A shared Flyout resource assigned to a FrameworkElement -->
<TextBlock FlyoutBase.AttachedFlyout="{StaticResource SharedFlyoutResource}"/>


Posizionamento di un riquadro a comparsa

Nota  

Solo app di Windows Store. Per impostazione predefinita, il Flyout viene visualizzato al di sopra dell'elemento a cui è associato. Puoi modificare il posizionamento desiderato per il riquadro a comparsa impostando la proprietà Placement su un valore FlyoutPlacementMode corrispondente a Top, Bottom, Left o Right. Il riquadro a comparsa viene visualizzato secondo il posizionamento desiderato se sullo schermo è disponibile lo spazio sufficiente. Se lo spazio disponibile non è sufficiente e l'elemento è vicino al bordo dello schermo, il riquadro a comparsa viene posizionato secondo questo ordine di fallback:

PosizionamentoOrdine di fallback
TopTop > Bottom > Left > Right
BottomBottom > Top > Left > Right
LeftLeft > Right > Top > Bottom
RightRight > Left > Top > Bottom

 

Nell'esempio di riquadro a comparsa dell'immagine illustrato precedentemente, la proprietà Placement del riquadro a comparsa è impostata su Right, come illustrato qui.



    <Flyout x:Key="ImagePreviewFlyout" Placement="Right">
    ...
    </Flyout>


Nota  

Per le app di Windows Phone Store, la classe Flyout viene visualizzata nella parte superiore della schermata per impostazione predefinita. Puoi sostituire la proprietà Placement con FlyoutPlacementMode.Full per fare in modo che il riquadro a comparsa occupi l'intera schermata. I valori Top, Bottom, Left e Right non hanno alcun effetto nelle app di Windows Phone.

Definizione dello stile di un riquadro a comparsa

Il corpo di un Flyout è sempre visualizzato con il tema chiaro o a contrasto elevato Non puoi applicare direttamente uno stile a un controllo Flyout.

Puoi modificare determinati elementi dell'aspetto del riquadro a comparsa, ad esempio lo sfondo, il bordo, i vincoli di dimensione e le impostazioni del ScrollViewer applicando uno stile al FlyoutPresenter del riquadro a comparsa.

Nell'esempio di riquadro a comparsa dell'immagine illustrato precedentemente, l'aspetto del riquadro a comparsa è stato modificato impostando lo FlyoutPresenterStyle, come illustrato qui.



        <Flyout.FlyoutPresenterStyle>
            <Style TargetType="FlyoutPresenter">
                <Setter Property="ScrollViewer.ZoomMode" Value="Enabled"/>
                <Setter Property="Background" Value="GhostWhite"/>
                <Setter Property="BorderThickness" Value="5"/>
                <Setter Property="MinHeight" Value="300"/>
                <Setter Property="MinWidth" Value="300"/>
            </Style>
        </Flyout.FlyoutPresenterStyle>


Esempi

Per saperne di più sul controllo Flyout, scarica l'esempio dei controlli XAML Flyout e MenuFlyout.

Riepilogo e passaggi successivi

Hai imparato a usare un controllo Flyout per mostrare all'utente elementi dell'interfaccia utente contestuali e temporanei.

Nell'esercitazione Guida introduttiva: Aggiunta di un controllo MenuFlyout imparerai a utilizzare un controllo MenuFlyout per mostrare agli utenti un menu di voci contestuali.

 

 

Mostra:
© 2017 Microsoft