Controlli (XAML con C#/C++/VB)

I nuovi controlli XAML disponibili in Windows 8.1 ti permettono di aggiungere nuove funzionalità a un'app di Windows Store, inclusi selettori di data/ora e il supporto avanzato per gli spostamenti. Gli aggiornamenti dei controlli esistenti li rendono ancora più versatili e facili da usare. Grazie a questi controlli nuovi e aggiornati, creare un'app dotata di funzionalità complete è ancora più semplice.

Nuovi controlli e aggiornamenti dei controlli

In Windows 8.1 sono stati introdotti questi nuovi controlli e funzionalità:

Windows 8.1 include aggiornamenti per questi controlli esistenti:

Controlli AppBar

[Accedi all'esempio del controllo XAML AppBar ora.]

In Windows 8.1 sono stati introdotti nuovi controlli per XAML che ti permettono di creare più facilmente pulsanti di comando della barra dell'app che riflettono i comportamenti e le linee guida per la progettazione appropriati, ovvero i controlli AppBarButton, AppBarToggleButton e AppBarSeparator.

Pulsanti della barra dell'app per XAML

 

I pulsanti della barra dell'app sono diversi dai pulsanti standard sotto molti aspetti:

  • L'aspetto predefinito è un cerchio invece di un rettangolo.

  • Per impostare il contenuto, devi usare le proprietà Label e Icon invece della proprietà Content. La proprietà Content viene ignorata.

  • La proprietà IsCompact del pulsante ne controlla le dimensioni.

I pulsanti della barra dell'app sono disponibili in due dimensioni, normale e compatta. Per impostazione predefinita presentano un'etichetta di testo e spaziatura completa. Quando la proprietà IsCompact viene impostata su true, l'etichetta di testo viene nascosta e la spaziatura attorno ai pulsanti ridotta. Anche per AppBarSeparator è previsto uno stato compatto in cui la spaziatura è ridotta.

Questi sono gli stessi comandi visualizzati nella figura precedente, ma nella versione compatta.

Pulsanti della barra dell'app in stato compatto

 

Quando usi i controlli della barra dell'app nel nuovo controllo CommandBar, il controllo CommandBar imposta la relativa proprietà IsCompact automaticamente. Se invece usi un pulsante della barra dell'app all'esterno di un controllo CommandBar, ad esempio in un oggetto AppBar o sul canvas di un'app, devi impostare la proprietà IsCompact in modo appropriato nel codice.

I pulsanti della barra dell'app possono essere usati all'esterno di una barra dell'app. Un esempio comune è l'uso di un pulsante della barra dell'app come pulsante Indietro in un'intestazione di pagina. Se un pulsante viene usato al di fuori di una barra dell'app, le linee guida di Windows prevedono che sia sempre in stato compatto.

Per definire il contenuto dei pulsanti della barra dell'app, puoi usare le proprietà Label e Icon. Imposta la proprietà Label su una stringa per specificare l'etichetta di testo. L'etichetta viene visualizzata per impostazione predefinita, ma viene nascosta se il pulsante è nello stato compatto, quindi devi specificare anche un'icona significativa. A questo scopo, imposta la proprietà Icon del pulsante su un elemento derivato dalla nuova classe IconElement. Sono disponibili quattro tipi di elementi icona:

  • FontIcon: l'icona è basata su un glifo della famiglia di caratteri specificata.

  • BitmapIcon: l'icona è basata su un file di immagine bitmap con l'Uri specificato.

  • PathIcon: l'icona è basata su dati Path.

  • SymbolIcon: l'icona è basata su un elenco predefinito di glifi del carattere Segoe UI Symbol.

Creazione di un pulsante della barra dell'app

Questo esempio mostra come creare controlli AppBarButton, AppBarSeparator e AppBarToggleButton con ogni tipo di icona.


<!-- App bar button with symbol icon. -->
<AppBarButton Icon="Like" Label="SymbolIcon" Click="AppBarButton_Click"/>         

<!-- App bar button with bitmap icon. -->
<AppBarButton Label="BitmapIcon" Click="AppBarButton_Click">
    <AppBarButton.Icon>
        <BitmapIcon UriSource="ms-appx:///Assets/globe.png"/>
    </AppBarButton.Icon>
</AppBarButton>

<AppBarSeparator />

<!-- App bar toggle button with font icon. -->
<AppBarToggleButton Label="FontIcon" Click="AppBarButton_Click">
    <AppBarToggleButton.Icon>
        <FontIcon FontFamily="Candara" Glyph="&#x03A3;"/>
    </AppBarToggleButton.Icon>
</AppBarToggleButton>

<!-- App bar toggle button with path icon. -->
<AppBarToggleButton Label="PathIcon" Click="AppBarButton_Click">
    <AppBarToggleButton.Icon>
        <PathIcon Data="F1 M 20,20L 24,10L 24,24L 5,24"/>
    </AppBarToggleButton.Icon>
</AppBarToggleButton>

Il codice di esempio precedente crea questi controlli.

Esempi di icone dei pulsanti della barra dell'app.

 

CommandBar

[Accedi all'esempio del controllo XAML AppBar ora.]

In Windows 8.1 è stato introdotto un nuovo controllo per XAML che ti permette di creare facilmente barre delle app progettate correttamente, ovvero il controllo CommandBar.

La barra dei comandi

 

La classe CommandBar semplifica la creazione di barre delle app semplici grazie a:

  • Layout automatico dei comandi con i comandi principali sul lato destro e quelli secondari sul lato sinistro.

  • Ridimensionamento automatico dei comandi della barra dell'app quando cambiano le dimensioni dell'app.

Se vuoi una barra dell'app contenente solo i controlli AppBarButton,AppBarToggleButton e AppBarSeparator, usa questo nuovo controllo CommandBar. Se devi usare contenuto più complesso, come immagini, barre di stato o blocchi di testo, usa un controllo AppBar.

Per impostazione predefinita, gli elementi aggiunti al controllo CommandBar vengono aggiunti alla raccolta PrimaryCommands. Questi comandi sono visualizzati sul lato destro del controllo CommandBar. Puoi anche aggiungere comandi alla raccolta SecondaryCommands. Questi elementi vengono visualizzati sul lato sinistro.

I pulsanti della barra dell'app sono disponibili in due dimensioni, normale e compatta. Per impostazione predefinita presentano un'etichetta di testo e spaziatura completa. Quando la proprietà IsCompact viene impostata su true, l'etichetta di testo viene nascosta e la spaziatura attorno ai pulsanti ridotta. Anche per AppBarSeparator è previsto uno stato compatto in cui la spaziatura è ridotta. Quando usi questi controlli nel nuovo controllo CommandBar, questo imposta la relativa proprietà IsCompact automaticamente se non è disponibile spazio sufficiente per visualizzarli a dimensioni intere.

Questi sono gli stessi comandi principali visualizzati nella figura precedente, ma nella versione compatta.

La barra dei comandi con i pulsanti compatti

 

Creazione di un controllo CommandBar

Questo esempio crea la barra dei comandi illustrata precedentemente.


<Page.BottomAppBar>
    <CommandBar>
        <AppBarToggleButton Icon="Shuffle" Label="Shuffle" Click="AppBarButton_Click"/>
        <AppBarToggleButton Icon="RepeatAll" Label="Repeat" Click="AppBarButton_Click"/>
        <AppBarSeparator/>
        <AppBarButton Icon="Back" Label="Back" Click="AppBarButton_Click"/>
        <AppBarButton Icon="Stop" Label="Stop" Click="AppBarButton_Click"/>
        <AppBarButton Icon="Play" Label="Play" Click="AppBarButton_Click"/>
        <AppBarButton Icon="Forward" Label="Forward" Click="AppBarButton_Click"/>

        <CommandBar.SecondaryCommands>
            <AppBarButton Icon="Like" Label="Like" Click="AppBarButton_Click"/>
            <AppBarButton Icon="Dislike" Label="Dislike" Click="AppBarButton_Click"/>
        </CommandBar.SecondaryCommands>
    </CommandBar>
</Page.BottomAppBar>

DatePicker

[Accedi all'esempio dei controlli XAML DatePicker e TimePicker ora.]

In Windows 8.1 è stato introdotto un nuovo controllo per XAML che permette a un utente di impostare una data localizzata nella tua app, ovvero il controllo DatePicker.

Controllo selezione data

 

Il controllo di selezione della data ti offre un modo standardizzato per permettere agli utenti di selezionare una data localizzata usando metodi di input tramite tocco, mouse o tastiera. Puoi usare il controllo DatePicker nella forma predefinita con una quantità minima di XAML o di altro codice oppure puoi personalizzarlo in diversi modi.

Il controllo DatePicker supporta tutti i sistemi di calendario supportati da Windows. Questi nove calendari sono specificati nella classe Windows.Globalization.CalendarIdentifiers. Il controllo DatePicker usa il calendario corretto per il linguaggio predefinito dell'app oppure puoi impostare la proprietà CalendarIdentifier in modo da usare un sistema di calendario specifico.

Creazione di un controllo DatePicker

Questo esempio mostra come creare un controllo DatePicker semplice con un'intestazione.


<DatePicker x:Name=arrivalDatePicker Header="Arrival Date"/>

Questo è l'aspetto del controllo DatePicker quando è aperto il selettore del giorno.

Controllo selezione data con selettore del giorno aperto

 

Puoi impostare la data nel codice o eseguire il binding del controllo a un'istanza di DateTimeOffset. In questo esempio il controllo DatePicker è configurato nel codice per impostazione predefinita su una data di 2 mesi a partire dalla data corrente e l'anno minimo è impostato sull'anno in corso.


protected override void OnNavigatedTo(NavigationEventArgs e)
{
    // Set the default date to 2 months from the current date.
    arrivalDatePicker.Date = DateTimeOffset.Now.AddMonths(2);

    // Set the minimum year to the current year.
    arrivalDatePicker.MinYear = DateTimeOffset.Now;
}

Puoi formattare il testo in ogni ComboBox con i modelli di formato standard. Questo esempio mostra come formattare il campo del giorno per visualizzare il giorno del mese e il giorno della settimana abbreviato. Il campo dell'anno è nascosto impostando la proprietà YearVisible su False.


<DatePicker DayFormat="{}{day.integer} ({dayofweek.abbreviated})" YearVisible="False"/>

Questo esempio crea questo controllo DatePicker.

Controllo selezione data con l'anno nascosto

 

Il controllo DatePicker supporta anche layout verticali impostando la proprietà Orientation. È anche estremamente personalizzabile: puoi usare stili e modelli per personalizzare praticamente ogni aspetto del controllo DatePicker e del relativo contenuto.

Flyout

[Accedi all'esempio dei controlli XAML Flyout e MenuFlyout ora.]

In Windows 8.1 è stato introdotto un nuovo controllo per XAML che ti permette di visualizzare temporaneamente un elemento di interfaccia utente correlato all'operazione che sta eseguendo l'utente, ovvero il controllo Flyout.

Pulsante con un riquadro a comparsa

 

Un controllo Flyout visualizza un'interfaccia utente semplificata (chiamata riquadro a comparsa) che si limita a fornire informazioni oppure che 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. Usalo per raccogliere l'input dell'utente, mostrare ulteriori dettagli su un elemento o chiedere all'utente di confermare un'azione. Un riquadro a comparsa deve essere visualizzato solo quando l'utente fa clic con il mouse o tocca lo schermo e viene sempre chiuso quando l'utente tocca un punto fuori dal riquadro.

È comune associare un riquadro a comparsa a un pulsante, pertanto il controllo Button ha una nuova 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 facendo clic sul pulsante.

Puoi anche 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 Tapped, e aprire il controllo Flyout nel codice.

Creazione di un controllo Flyout

Questo esempio crea il controllo Button con un controllo Flyout mostrato nella figura precedente.


<Button Content="Empty cart">
    <Button.Flyout>
        <Flyout>
            <StackPanel>
                <TextBlock Style="{StaticResource BasicTextStyle}">All items will be removed. Do you want to continue?</TextBlock>
                <Button Click="DeleteConfirmation_Click">Yes, empty my cart</Button>
            </StackPanel>
        </Flyout>
    </Button.Flyout>
</Button>

Nel prossimo esempio viene mostrato un controllo Flyout associato a un controllo TextBlock. Come indicato precedentemente, puoi associare un controllo Flyout a qualsiasi oggetto FrameworkElement usando la proprietà associata FlyoutBase.AttachedFlyout.


<TextBlock Text="{Binding ElementName=MyTextBox, Path=Text}"
           Tapped="TextBlock_Tapped" FontSize="18">
    <FlyoutBase.AttachedFlyout>
        <Flyout>
            <TextBox x:Name="MyTextBox" Text="You can edit this text by tapping it."/>
        </Flyout>
    </FlyoutBase.AttachedFlyout>
</TextBlock>

Per aprire questo Flyout, gestisci l'evento Tapped e chiama il metodo FlyoutBase.ShowAttachedFlyout.


private void TextBlock_Tapped(object sender, TappedRoutedEventArgs e)
{
    FrameworkElement element = sender as FrameworkElement;
    if (element != null)
    {
        FlyoutBase.ShowAttachedFlyout(element);
    }
}

Il blocco di testo ha questo aspetto.

Testo con riquadro a comparsa chiuso

 

Toccando il blocco di testo, si apre il riquadro a comparsa contenente il controllo TextBox e il testo può essere modificato.

Testo con riquadro a comparsa aperto

 

Puoi creare un controllo Flyout come risorsa e usarlo in più controlli. In questo esempio un controllo Flyout viene definito come risorsa e condiviso tra due diversi controlli.


<Page.Resources>
    <Flyout x:Key="SharedFlyout">
        <StackPanel>
            <TextBlock Text="This Flyout is shared."/>                      
        </StackPanel>
    </Flyout>
</Page.Resources>

...

<Button Content="Button" Flyout="{StaticResource SharedFlyout}"/>
<TextBlock Text="TextBlock" FlyoutBase.AttachedFlyout="{StaticResource SharedFlyout}" Tapped="TextBlock_Tapped"/>

Per altre informazioni sul controllo Flyout, vedi Guida introduttiva: Aggiunta di un riquadro a comparsa.

Hub

[Accedi all'esempio del controllo XAML Hub ora.]

In Windows 8.1 è stato introdotto un nuovo controllo per XAML che ti permette di creare facilmente il modello di progettazione hub che riflette i comportamenti e le linee guida per la progettazione appropriati, ovvero il controllo Hub.

Una pagina hub

 

Le pagine hub rappresentano il punto di ingresso dell'utente nell'app. Visualizzano il contenuto in una panoramica sofisticata che permette agli utenti di individuare a colpo d'occhio le novità e gli elementi più interessanti, per poi approfondire il contenuto dell'app. L'hub visualizza diverse categorie di contenuto, ognuna mappata alle diverse pagine delle sezioni dell'app. Ogni sezione deve dare accesso a contenuti o funzionalità. L'hub deve essere visivamente vario, deve coinvolgere gli utenti e condurli nelle diverse parti dell'app.

Il controllo XAML Hub fornisce elementi che ti permettono di implementare più facilmente il modello di progettazione hub per un'app. Diversamente da un controllo GridView o ListView che visualizza i dati da una singola origine, ogni sezione dell'hub può visualizzare dati da un'origine diversa. È possibile usare qualsiasi contenuto XAML per creare una pagina hub visivamente elaborata. Per iniziare rapidamente a creare un'app con una pagina Hub, usa il modello di app hub in Microsoft Visual Studio 2013.

Aggiungi un'intestazione al controllo Hub per informare gli utenti del contesto dell'hub. Spesso corrisponde al nome della tua app. Puoi usare una semplice proprietà Header di testo oppure definire una proprietà HeaderTemplate che usa qualsiasi contenuto XAML. È importante ricordare che anche se puoi usare qualsiasi contenuto nell'intestazione, l'altezza dell'intestazione influirà sulla quantità di spazio verticale disponibile per il contenuto della sezione dell'hub. L'intestazione rimane fissa nella posizione definita e non scorre insieme alle sezioni dell'hub.

Sezioni dell'hub

Il contenuto dell'hub viene inserito in diversi controlli HubSection. Analogamente all'hub, ogni controllo HubSection ha una proprietà Header e HeaderTemplate che puoi usare per impostare un'intestazione facoltativa per la sezione. Puoi anche rendere interattiva l'intestazione della sezione. In genere, l'utente può toccare un'intestazione interattiva per passare alla pagina della sezione dell'app corrispondente. Quando la proprietà IsHeaderInteractive è impostata su true, l'intestazione predefinita include un glifo virgolette acute e stati di visualizzazione "passaggio del mouse" e "premuto". Se usi una proprietà HeaderTemplate personalizzata, fornisci segnali visivi simili per indicare che l'intestazione è interattiva.

Il contenuto non viene aggiunto direttamente a una sezione dell'hub. È necessario definire il contenuto del controllo HubSection in un oggetto DataTemplate. Il contenuto può essere definito in linea o associato a un'origine dati. È possibile usare qualsiasi contenuto XAML valido in una sezione dell'hub.

Creazione di un hub

Questo esempio mostra il codice XAML di base usato per creare un controllo Hub.


<Hub Header="News">
    <HubSection MinWidth="600" Header="Latest">
        <DataTemplate>
            <Grid>   
                <TextBlock Text="The most recent news will be here." 
                           Style="{ThemeResource BodyTextBlockStyle}" />
            </Grid>
        </DataTemplate>
    </HubSection>

    <HubSection Header="Tech" IsHeaderInteractive="True"  
                Background="#222222" MinWidth="250">
        <DataTemplate>
            <StackPanel>
                <TextBlock Text="Tech news goes here."
                           Style="{ThemeResource BodyTextBlockStyle}" />
                <TextBlock Text="Click the header to go to the Tech page."
                           Style="{ThemeResource BodyTextBlockStyle}" />
            </StackPanel>
        </DataTemplate>
    </HubSection>

    <HubSection Header="Sports" IsHeaderInteractive="True" 
                Background="#444444" MinWidth="250">
        <DataTemplate>
            <StackPanel>
                <TextBlock Text="Sports news goes here."
                           Style="{ThemeResource BodyTextBlockStyle}" />
                <TextBlock Text="Click the header to go to the Sports page." 
                           Style="{ThemeResource BodyTextBlockStyle}" />
            </StackPanel>
        </DataTemplate>
    </HubSection>
</Hub>

L'esempio precedente crea questo controllo Hub.

Un semplice controllo hub

 

Hyperlink

Windows 8.1 aggiunge l'elemento Hyperlink al modello di oggetti di testo XAML nello spazio dei nomi Windows.UI.Xaml.Documents.

L'elemento Hyperlink ti consente di aggiungere un collegamento ipertestuale a una parte di testo. Il collegamento ipertestuale viene gestito come il resto del testo e incluso nelle interruzioni di riga. Quando viene contrassegnato come collegamento ipertestuale, il testo viene visualizzato in un colore specifico e, se toccato, accede all'URI (Uniform Resource Identifier) specificato nella proprietà NavigateUri.

Ecco un blocco di testo con un elemento Hyperlink incorporato.

Testo con un collegamento ipertestuale

 

Uso di un elemento Hyperlink

Questo esempio crea il testo sopra riportato. Il controllo Hyperlink è inserito nel flusso del resto del testo e apre il sito Windows Dev Center quando un utente lo tocca.


<RichTextBlock Width="200" Style="{StaticResource BasicRichTextStyle}">
    <Paragraph>Hyperlinks let you give readers a visual hint that certain text links to other content.
        <Hyperlink NavigateUri="http://dev.windows.com">Read more on the Windows Dev Center</Hyperlink>
        ... Text in a Hyperlink element is treated like the rest of the text and participates in line breaking.
    </Paragraph>
</RichTextBlock>

MenuFlyout

[Accedi all'esempio dei controlli XAML Flyout e MenuFlyout ora.]

In Windows 8.1 è stato introdotto un nuovo controllo per XAML che ti permette di visualizzare temporaneamente un elenco di comandi o opzioni correlate all'operazione che sta eseguendo l'utente, ovvero il controllo MenuFlyout.

Pulsante con un menu a comparsa

 

Un controllo MenuFlyout visualizza un'interfaccia utente semplificata (chiamata menu a comparsa) che può essere chiusa facilmente facendo clic con il mouse o toccando lo schermo all'esterno del menu. Usa questo controllo per permettere all'utente di effettuare una scelta da un elenco contestuale di comandi o di opzioni semplici. Un menu a comparsa deve essere visualizzato solo quando l'utente fa clic con il mouse o tocca lo schermo e viene sempre chiuso quando l'utente tocca un punto all'esterno.

Per definire il contenuto del menu, devi aggiungere oggetti MenuFlyoutItem, ToggleMenuFlyoutItem e MenuFlyoutSeparator al controllo MenuFlyout. Questi oggetti hanno gli scopi seguenti:

È comune associare un menu a comparsa a un pulsante, pertanto il controllo Button ha una nuova proprietà Flyout che permette di semplificare l'associazione e l'apertura di un controllo MenuFlyout. Un menu a comparsa associato a un pulsante si apre automaticamente facendo clic sul pulsante.

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

Creazione di un controllo MenuFlyout

Questo esempio crea il controllo Button con un controllo MenuFlyout mostrato nella figura precedente.


<Button Content="Options">
    <Button.Flyout>
        <MenuFlyout>
            <MenuFlyoutItem Text="Reset" Click="Reset_Click"/>
            <MenuFlyoutSeparator/>
            <ToggleMenuFlyoutItem Text="Shuffle" IsChecked="{Binding IsShuffleEnabled, Mode=TwoWay}"/>
            <ToggleMenuFlyoutItem Text="Repeat" IsChecked="{Binding IsRepeatEnabled, Mode=TwoWay}"/>
        </MenuFlyout>
    </Button.Flyout>
</Button>

SettingsFlyout

[Accedi all'esempio delle impostazioni dell'app ora.]

In Windows 8.1 è stato introdotto un nuovo controllo per XAML che ti permette di creare facilmente riquadri a comparsa Impostazioni dell'app che riflettono i comportamenti e le linee guida per la progettazione appropriati, ovvero il controllo SettingsFlyout.

Il controllo SettingsFlyout

 

Analogamente a un controllo Page, un controllo SettingsFlyout può essere dichiarato in XAML come elemento radice di un documento, con un attributo x:Class specificato per la divisione in sottoclassi a partire da SettingsFlyout. Puoi impostare la larghezza del riquadro a comparsa Impostazioni, ma l'altezza corrisponde sempre a quella completa dello schermo.

Un controllo SettingsFlyout è composto da una sezione per l'intestazione e una sezione per il contenuto. L'intestazione contiene un pulsante Indietro, un titolo e un'icona facoltativa. Imposta le proprietà HeaderBackground e HeaderForeground in modo che corrispondano ai colori dell'app. Per impostazione predefinita, l'icona visualizza l'icona piccola della tua app. Puoi specificare un'icona diversa impostando la proprietà IconSource. Il pulsante Indietro è sempre visibile.

Visualizzazione e chiusura del controllo SettingsFlyout

Gli utenti possono accedere a un riquadro a comparsa Impostazioni attraverso l'accesso alle impostazioni. Puoi visualizzare a livello di programmazione un controllo SettingsFlyout chiamando il metodo Show o ShowIndependent e chiuderlo chiamando il metodo Hide.

Per impostazione predefinita, il pulsante Indietro chiude il riquadro a comparsa Impostazioni. Se un controllo SettingsFlyout viene visualizzato chiamando il metodo Show, facendo clic sul pulsante Indietro viene chiuso il riquadro a comparsa e viene riaperto il riquadro Impostazioni. Se un controllo SettingsFlyout viene visualizzato chiamando il metodo ShowIndependent, facendo clic sul pulsante Indietro viene chiuso il riquadro a comparsa e l'utente ritorna all'app. Se ad esempio apri un controllo SettingsFlyout da un pulsante Impostazioni nell'app, in genere chiami il metodo ShowIndependent e gli utenti tornano direttamente all'app alla chiusura del riquadro a comparsa.

È possibile visualizzare un solo controllo SettingsFlyout per volta. Chiamando il metodo Show su un controllo SettingsFlyout viene chiuso qualsiasi altro controllo SettingsFlyout visualizzato.

Puoi eseguire l'override del comportamento predefinito del pulsante Indietro gestendo l'evento BackClick. Questo evento viene generato quando l'utente fa clic sul pulsante Indietro. Per eseguire l'override del comportamento predefinito, crea un gestore per l'evento e imposta la proprietà BackClickEventArgs.Handled su true.

Connessione all'oggetto SettingsPane

Il controllo SettingsFlyout deve essere associato manualmente all'oggetto SettingsPane dell'app. Per ottenere questo risultato devi gestire l'evento SettingsPane.CommandsRequested e aggiungere un SettingsCommand alla raccolta ApplicationCommands. SettingsCommand ha un'etichetta per il controllo SettingsFlyout che viene visualizzata nell'accesso alle impostazioni e specifica un metodo che viene eseguito quando un utente seleziona il comando nell'accesso alle impostazioni. In questo metodo devi creare un'istanza del controllo SettingsFlyout e visualizzarla.

Creazione di un controllo SettingsFlyout

Bg182878.wedge(it-it,WIN.10).gifPer aggiungere un controllo SettingsFlyout in Visual Studio

  1. Seleziona Progetto > Aggiungi nuovo elemento.

  2. Nella finestra di dialogo Aggiungi nuovo elemento seleziona Riquadro a comparsa Impostazioni dal riquadro centrale.

  3. Digita un nome per il file del riquadro a comparsa Impostazioni e fai clic su Aggiungi. In questo esempio il riquadro a comparsa Impostazioni è denominato UpdateSettingsFlyout.

    Nota  Quando aggiungi un riquadro a comparsa Impostazioni, crei una nuova classe con il nome specificato derivata da SettingsFlyout. Per creare un'istanza del riquadro a comparsa Impostazioni, usa il nome che hai specificato, ad esempio new UpdateSettingsFlyout().

Questo esempio crea il controllo SettingsFlyout mostrato nella figura precedente.


<SettingsFlyout
    x:Class="SettingsFlyoutExample.UpdateSettingsFlyout"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:SettingsFlyoutExample"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    IconSource="Assets/SmallLogo.png"
    Title="App Updates"
    d:DesignWidth="346"
    Width="346" 
    HeaderBackground="#FF2B4A80">
    <SettingsFlyout.Resources>
        <Style x:Key="SettingsFlyoutSectionStyle" TargetType="StackPanel">
            <Setter Property="Margin" Value="0,0,0,39"/>
        </Style>
    </SettingsFlyout.Resources>

    <!-- This stack panel acts as a root panel for vertical layout of the content sections. -->
    <StackPanel VerticalAlignment="Stretch" HorizontalAlignment="Stretch" >

        <!-- The stack panels below define individual content sections. -->

        <!-- Content Section 1-->
        <StackPanel Style="{StaticResource SettingsFlyoutSectionStyle}">

            <!-- Section 1 header -->
            <TextBlock Style="{StaticResource TitleTextBlockStyle}"
                                 Text="Automatic updates" />

            <!-- Section 1 body -->
            <TextBlock Style="{StaticResource BodyTextBlockStyle}" Margin="0,0,0,25" TextWrapping="Wrap">
                <TextBlock.Text>
                    Turn automatic updating on or off.
                </TextBlock.Text>
            </TextBlock>
            <ToggleSwitch Header="Download updates automatically" />
            <ToggleSwitch Header="Install updates automatically" />

        </StackPanel>

        <!-- Define more Content Sections below as necessary. -->

    </StackPanel>
</SettingsFlyout>

Questo esempio mostra come aggiungere il controllo SettingsFlyout al riquadro Impostazioni.


public MainPage()
{
    this.InitializeComponent();

    Windows.UI.ApplicationSettings.SettingsPane.GetForCurrentView().CommandsRequested += MainPage_CommandsRequested;
}

void MainPage_CommandsRequested(Windows.UI.ApplicationSettings.SettingsPane sender, Windows.UI.ApplicationSettings.SettingsPaneCommandsRequestedEventArgs args)
{
    Windows.UI.ApplicationSettings.SettingsCommand updateSetting = 
        new Windows.UI.ApplicationSettings.SettingsCommand("AppUpdateSettings", "App updates", (handler) =>
    {
        UpdateSettingsFlyout updatesFlyout = new UpdateSettingsFlyout();
        updatesFlyout.Show();

    });

    args.Request.ApplicationCommands.Add(updateSetting);
}

Questo esempio mostra come aprire il controllo SettingsFlyout da un pulsante nell'app.


<Button Content="App update settings" Click="UpdateSettingsButton_Click"/>


private void UpdateSettingsButton_Click(object sender, RoutedEventArgs e)
{
    UpdateSettingsFlyout updatesFlyout = new UpdateSettingsFlyout();
    updatesFlyout.ShowIndependent();
}

TimePicker

[Accedi all'esempio dei controlli XAML DatePicker e TimePicker ora.]

In Windows 8.1 è stato introdotto un nuovo controllo per XAML che permette a un utente di selezionare un valore di ora nell'app, ovvero il controllo TimePicker.

Il controllo TimePicker

 

Il controllo di selezione dell'ora ti offre un modo standardizzato per permettere agli utenti di selezionare un'ora usando metodi di input tramite tocco, mouse o tastiera. Puoi usare il controllo TimePicker nella forma predefinita con una quantità minima di XAML o di altro codice oppure puoi personalizzarlo in diversi modi. Il controllo TimePicker può usare il formato 12 ore o 24 ore.

Creazione di un controllo TimePicker

Questo esempio mostra come creare un controllo TimePicker semplice con un'intestazione.


<TimePicker x:Name=arrivalTimePicker Header="Arrival Time"/>

Questo esempio mostra come creare un controllo TimePicker con un formato 24 ore.


<TimePicker ClockIdentifier="24HourClock" Header="24 hour clock"/>

Il controllo TimePicker nell'esempio ha questo aspetto. Il selettore AM/PM viene nascosto automaticamente.

Controllo TimePicker con formato 24 ore

 

Puoi impostare l'ora nel codice o eseguire il binding del controllo a un'istanza di TimeSpan. In questo esempio il controllo TimePicker è configurato nel codice per impostazione predefinita su 8:00 A.M.


protected override void OnNavigatedTo(NavigationEventArgs e)
{
    // Set the default time to 8 A.M.
    arrivalTimePicker.Time = new TimeSpan(8, 0, 0);
}

Puoi impostare l'incremento nel selettore dei minuti su un valore appropriato per la tua app. In questo caso l'incremento è di 15 minuti.


<TimePicker x:Name=arrivalTimePicker Header="Arrival Time" MinuteIncrement="15"/>

Questo è l'aspetto del controllo TimePicker nell'esempio quando è aperto il selettore dei minuti.

Controllo TimePicker con incrementi di 15 minuti

 

Il controllo TimePicker supporta anche layout verticali impostando la proprietà Orientation. È anche estremamente personalizzabile: puoi usare stili e modelli per personalizzare praticamente ogni aspetto del controllo TimePicker e del relativo contenuto.

Aggiornamenti di FlipView

[Accedi all'esempio del controllo XAML FlipView ora.]

Il controllo XAML FlipView supporta tre modalità di spostamento: basato su tocco, basato su pulsante e a livello di programmazione. Quando un utente usa il tocco per gli spostamenti, gli elementi FlipView scorrono in vista con fluidità. In caso di spostamento con il mouse, la tastiera o a livello di programmazione, non viene applicata l'animazione e gli elementi compaiono semplicemente. Il risultato è un'esperienza non uniforme tra le varie modalità di spostamento.

Windows 8.1 aggiunge la nuova proprietà UseTouchAnimationsForAllNavigation al controllo FlipView per consentire un'esperienza utente uniforme per tutte le modalità di spostamento. Se imposti questa proprietà su true, viene applicata la stessa animazione, indipendentemente dal fatto che lo spostamento sia basato su tocco, su pulsante o a livello di programmazione.

Intestazioni per i controlli ComboBox, DatePicker, TimePicker, Slider e di modifica

[Accedi all'esempio dei controlli XAML di base ora.]

Alcuni controlli, come ComboBox, sono solitamente accompagnati da un'etichetta che descrive il contesto del controllo. L'aggiunta di un'etichetta a questi controlli può risultare scomoda e richiede l'uso di elementi aggiuntivi, come oggetti TextBlock e StackPanel, per ottenere il layout corretto.

Windows 8.1 aggiunge le proprietà Header e HeaderTemplate a diversi controlli in modo che sia più facile etichettarli. Le nuove proprietà sono disponibili per questi controlli:

La proprietà Header predefinita non può essere sottoposta a hit test e non accetta lo stato attivo né l'input da mouse o da tastiera. Un valore stringa vuoto o null crea un'intestazione vuota. Un'intestazione vuota non occupa spazio né influisce sul layout.

Puoi usare una proprietà HeaderTemplate per creare più di un'intestazione di testo semplice. Una proprietà HeaderTemplate può ospitare qualsiasi codice XAML valido, inclusi elementi che possono essere sottoposti a hit test, ad esempio un controllo Button.

Ecco come aggiungere una proprietà Header a un controllo ComboBox e PasswordBox.


<ComboBox Header="Colors" PlaceholderText="Pick a color">
    <x:String>Blue</x:String>
    <x:String>Green</x:String>
    <x:String>Red</x:String>
    <x:String>Yellow</x:String>
</ComboBox>
<PasswordBox Header="Password" PlaceholderText="Enter your password"/>

L'esempio precedente crea questi controlli.

Un controllo ComboBox con intestazione

 

Un controllo PasswordBox con intestazione

 

Nel prossimo esempio una proprietà HeaderTemplate in un controllo RichEditBox di sola lettura contiene un controllo Button. Quando l'utente fa clic sul pulsante, il controllo RichEditBox diventa modificabile e l'intestazione viene modificata.


<RichEditBox x:Name="richTextBox1" IsReadOnly="True">
    <RichEditBox.HeaderTemplate>
        <DataTemplate>
            <Button Content="Click to edit" Click="Button_Click"/>
        </DataTemplate>
    </RichEditBox.HeaderTemplate>
</RichEditBox>


private void Button_Click(object sender, RoutedEventArgs e)
{
    richTextBox1.IsReadOnly = false;
    richTextBox1.HeaderTemplate = null;
    richTextBox1.Header = "Editable RichEditBox";
}

L'esempio precedente crea questo controllo RichEditBox.

Un controllo RichEditBox con modello di intestazione

 

Quando l'utente fa clic sul pulsante, il controllo RichEditBox diventa modificabile e l'intestazione viene modificata, come mostrato di seguito:

Un controllo RichEditBox con intestazione

 

PlaceholderText

Windows 8.1 aggiunge la proprietà PlaceholderText a diversi controlli che contengono testo. Alcuni controlli, come ComboBox o PasswordBox, potrebbero richiedere l'input dell'utente. Se non vuoi presupporre un valore predefinito o visualizzare un controllo vuoto, puoi aggiungere testo segnaposto per fornire informazioni di contesto per l'utente.

La nuova proprietà PlaceholderText è disponibile per questi controlli:

In un controllo ComboBox viene visualizzato il testo segnaposto quando il valore di SelectedIndex è -1 e la proprietà SelectedItem è impostata su null. Queste due proprietà vengono mantenute sincronizzate. Un utente non può visualizzare il testo segnaposto dopo la selezione di un elemento. Puoi comunque impostare a livello di programmazione SelectedIndex su -1 o SelectedItem su null per causare la rivisualizzazione del testo segnaposto.

Nei controlli di modifica del testo il testo segnaposto viene visualizzato quando i controlli sono vuoti. L'utente può ripristinare lo stato del controllo eliminando tutto il testo dai controlli.

Ecco come aggiungere testo segnaposto a un controllo ComboBox e a un controllo PasswordBox.


<ComboBox Header="Colors" PlaceholderText="Pick a color">
    <x:String>Blue</x:String>
    <x:String>Green</x:String>
    <x:String>Red</x:String>
    <x:String>Yellow</x:String>
</ComboBox>
<PasswordBox Header="Password" PlaceholderText="Enter your password"/>

L'esempio precedente crea questi controlli:

Un controllo ComboBox con intestazione

 

Un controllo PasswordBox con intestazione

 

Aggiornamenti di WebView

[Accedi all'esempio del controllo XAML WebView ora.]

Windows 8.1 semplifica notevolmente l'hosting di contenuto HTML e basato su Web nelle tue app. In Windows 8.1 il controllo WebView risolve vari problemi e aggiunge nuove funzionalità, tra le quali:

In Windows 8.1 sono deprecati gli elementi API WebView seguenti:

Queste modifiche non influiscono sulle app di Windows 8 eseguite in Windows 8.1.

Rendering della struttura ad albero XAML come bitmap

Windows Runtime per Windows 8.1 aggiunge un nuovo tipo allo spazio dei nomi Windows.UI.Xaml.Media.Imaging: RenderTargetBitmap.

Questo tipo include due metodi principali:

  • RenderTargetBitmap.RenderAsync, che usa una struttura ad albero visuale XAML e crea una rappresentazione bitmap di tale struttura.

    Nota  Questa operazione esegue il rendering asincrono come bitmap della struttura ad albero di elementi XAML specificata. Questo metodo non viene sincronizzato con l'aggiornamento dello schermo e non garantisce una temporizzazione esatta dei frame, quindi il rendering della bitmap potrebbe avvenire una frazione di secondo prima o dopo il momento di acquisizione previsto.

  • RenderTargetBitmap.GetPixelsAsync, che restituisce una matrice di byte di pixel in un formato specifico.

Ecco come eseguire il rendering di una struttura ad albero di elementi XAML.

var renderTargetBitmap = new RenderTargetBitmap();
await renderTargetBitmap.RenderAsync(myElementTree);

myImage.Source = renderTargetBitmap;

RenderTargetBitmap eredita da ImageSource, in modo da poterlo impostare direttamente come origine per un oggetto Image senza chiamare GetPixelsAsync per ottenere e visualizzare i dati della bitmap.

Ecco come scrivere in un file la bitmap risultante.

var renderTargetBitmap = new RenderTargetBitmap();
await renderTargetBitmap.Render(myElementTree);
var pixels = await renderTargetBitmap.GetPixelsAsync();

var picker = new FileSavePicker();
// Picker setup
var file = await picker.PickSaveFileAsync();
// File validation

using (var stream = await file.OpenAsync(FileAccessMode.ReadWrite))
{
    var encoder = await 
        BitmapEncoder.CreateAsync(BitmapEncoder.BmpEncoderId, stream);
    
    encoder.SetPixelData(BitmapPixelFormat.Rgba8, 100, 0, 96, 96,         
        await renderTargetBitmap.GetPixelsAsync());
        
    await encoder.FlushAsync();
}

Altri aggiornamenti per i controlli

  • Miglioramenti del controllo ScrollViewer XAML:

    Windows 8.1 aggiunge proprietà ScrollViewer (TopHeader, LeftHeader e TopLeftHeader) che ti permettono di definire aree "bloccate" simili ai riquadri bloccati in Microsoft Excel. Il contenuto in queste aree non scorre oppure scorre in una sola direzione insieme al contenuto principale. L'intestazione in alto a sinistra non scorre, l'intestazione a sinistra scorre verticalmente ma non orizzontalmente e l'intestazione in alto scorre orizzontalmente ma non verticalmente.

  • Miglioramenti del data binding XAML:

    Windows 8.1 aggiunge gli elementi API seguenti:

    • L'evento FrameworkElement.DataContextChanged, che ti permette di rispondere alle modifiche del valore della proprietà DataContext. Puoi usare questo evento per aggiornare manualmente le proprietà dei controlli invece di usare il data binding. Si tratta di un'alternativa utile per risolvere problemi di prestazioni del data binding.

    • Le proprietà Binding.FallbackValue e Binding.TargetNullValue, che ti permettono di impostare valori predefiniti per la visualizzazione quando un binding non riesce a risolvere un valore oppure restituisce null.

    • La proprietà Binding.UpdateSourceTrigger, il metodo FrameworkElement.GetBindingExpression e la classe BindingExpression, che ti permettono di modificare il comportamento predefinito dei binding bidirezionali nella proprietà TextBox.Text. Per impostazione predefinita, i binding TextBox.Text aggiornano la loro origine solo quando il controllo perde lo stato attivo. Imposta UpdateSourceTrigger su PropertyChanged per aggiornare l'origine ogni volta che cambia il valore della proprietà TextBox.Text. Imposta UpdateSourceTrigger su Explicit per aggiornare l'origine a livello di programmazione usando il metodo BindingExpression.UpdateSource.

  • Miglioramenti per gli spostamenti XAML:

    Windows 8.1 aggiunge gli elementi API seguenti:

    • Nuove proprietà per Frame: BackStack, ForwardStack, BackStackProperty e ForwardStackProperty. Usa queste proprietà per modificare a livello di programmazione gli stack di spostamento indietro e in avanti tramite l'aggiunta o la rimozione di oggetti PageStackEntry. Si tratta di un'opzione utile in scenari come la rimozione di una pagina di accesso dalla cronologia di spostamento dopo l'accesso da parte dell'utente oppure la cancellazione dello stack di spostamento quando l'app viene riavviata con un contratto di attivazione diverso.

    • Un overload Frame.Navigate che usa un valore del parametro NavigationTransitionInfo. Usa questo overload per spostarti su una pagina usando una particolare transizione animata, invece di qualsiasi transizione definita nel codice XAML della pagina. Puoi anche accedere al valore del parametro in gestori eventi di spostamento tramite le classi NavigationEventArgs e NavigatingCancelEventArgs.

    • Una proprietà NavigatingCancelEventArgs.Parameter. Usa questa proprietà quando devi annullare uno spostamento in base ai valori del parametro di spostamento.

  • Temi dinamici:

    In Windows 8 i temi chiari e scuri per un contrasto elevato vengono caricati all'avvio dell'app. Se però un utente cambia il tema mentre l'app è in esecuzione, il sistema dei temi XAML non rileva la modifica e i temi non vengono cambiati nell'app. In Windows 8.1 il sistema dei temi XAML è in grado di rilevare cambiamenti del tema in fase di esecuzione e ricaricherà le risorse. Le risorse predefinite condivise per i controlli XAML eseguono questa operazione automaticamente in Windows 8.1. Per abilitare questo comportamento in un modello predefinito creato personalmente, fai riferimento alla risorsa specifica del tema usando la nuova estensione markup ThemeResource. Qualsiasi risorsa che definisci in modo diverso per ogni singolo tema viene quindi definita in più dizionari di risorse, uno per tema. Questi dizionari risorse vengono uniti nel set complessivo di risorse definite da XAML per un'app. Il dizionario corretto viene caricato in modo dinamico quando il sistema rileva un cambiamento del tema, anche se si verifica mentre l'app è in esecuzione.

  • Applicazione di temi per singolo controllo:

    In Windows 8 il tema viene impostato usando la proprietà Application.RequestedTheme e viene applicato a tutti gli elementi dell'interfaccia utente dell'app. Application.RequestedTheme non può essere cambiato in fase di esecuzione. In Windows 8.1 puoi richiedere che un singolo elemento dell'interfaccia utente usi un tema diverso dall'impostazione di Application.RequestedTheme. Per ottenere questo risultato, imposta RequestedTheme come attributo per l'elemento o gli elementi per cui vuoi usare un tema diverso. RequestedTheme è una proprietà della classe FrameworkElement e in quanto tale esiste per ogni elemento dell'interfaccia utente. Il valore RequestedTheme di ogni elemento può essere impostato in fase di esecuzione.

  • GetOpenPopups:

    Quando crei un controllo XAML Popup questo non esiste nella struttura ad albero visuale. Se vuoi chiudere i popup per motivi di spostamento, sospensione o altro e non hai salvato un riferimento, può risultare difficile trovare e chiudere gli elementi Popup con il codice di Windows 8. In Windows 8.1 è stata introdotta l'API VisualTreeHelper.GetOpenPopups, un'utilità in grado di restituire un elenco di tutti i popup aperti. Puoi quindi impostare IsOpen su false per ogni popup che vuoi chiudere.

  • Accessibilità e automazione dell'interfaccia utente:

    Windows 8.1 aggiunge peer per alcuni controlli che esistono in Windows 8 ma usano la classe FrameworkElementAutomationPeer per il supporto. Il controllo AppBar ad esempio ha un peer dedicato. Se crei peer personalizzati per le classi, puoi usarli come base e riutilizzare le implementazioni delle API del modello esistenti per l'implementazione del peer di automazione dell'interfaccia utente Microsoft personalizzato. È inoltre disponibile il supporto di codice gestito per i modelli aggiunti al framework generale di automazione dell'interfaccia utente per Windows 8. Esiste ad esempio un'interfaccia IStylesProvider che puoi usare per implementare il modello Styles su un peer di controllo XAML. È disponibile infine una proprietà associata AccessibilityView a livello di app. Questa proprietà può essere usata per specificare come visualizzare un determinato elemento di interfaccia utente nelle varie rappresentazioni dell'albero di automazione interfaccia utente visibili per un client di automazione interfaccia utente, ad esempio se l'elemento comparirà nell'albero del contenuto o nell'albero dei controlli.

  • Proprietà MaxLines:

    Si applica ai controlli TextBlock, RichTextBlock e RichTextBlockOverflow.

    Questa proprietà ti permette di specificare il numero massimo di righe di testo visualizzate in un blocco di testo. L'altezza del controllo testo viene adattata in modo da visualizzare solo il numero specificato di righe, indipendentemente dalle dimensioni e dallo stile del carattere o dalla lunghezza del testo.

  • Proprietà PreventKeyboardDisplayOnProgrammaticFocus:

    Si applica ai controlli TextBox, RichEditBox e PasswordBox.

    Imposta questa proprietà su true per evitare la visualizzazione della tastiera virtuale su schermo quando lo stato attivo viene impostato su una casella di testo a livello di programmazione. La tastiera virtuale viene visualizzata per impostazione predefinita ogni volta che lo stato attivo passa su una casella di testo modificabile e l'input più recente è stato generato tramite tocco. Ciò accade quando lo stato attivo viene impostato a livello di programmazione o tramite interazione dell'utente. In alcune situazioni, può essere preferibile non visualizzare la tastiera quando lo stato attivo è impostato a livello di programmazione. Ad esempio, potrebbe essere utile evitare che la tastiera copra parte dell'interfaccia utente fino a quando l'utente non è pronto per continuare l'interazione.

  • Proprietà SelectionHighlightColor:

    Si applica ai controlli TextBlock, TextBox, RichEditBox, RichTextBlock e PasswordBox.

    Puoi specificare SolidColorBrush per cambiare il colore di evidenziazione di un controllo di testo in modo coordinato con la personalizzazione della tua app.

  • Evento Paste:

    Si applica ai controlli TextBox, RichEditBox e PasswordBox.

    Puoi permettere la gestione personalizzata dell'evento Paste su controlli testo modificabile nella tua app.

  • Valore TextWrapping.WrapWholeWords:

    Usa questo valore se vuoi evitare che il testo vada a capo nel mezzo di una parola. L'ultima parola causerà il riversamento del blocco di testo invece di andare a capo.

    Con questo valore, l'interruzione di riga si verifica in caso di riversamento della riga oltre la larghezza disponibile per il blocco. È possibile tuttavia che si verifichi il riversamento di una riga oltre la larghezza del blocco se l'algoritmo di interruzione delle righe non riesce a determinare un'opportunità di interruzione, come nel caso di una parola molto lunga vincolata a un contenitore a larghezza fissa in cui non è consentito lo scorrimento.

  • Valore TextTrimming.Clip:

    Con questo valore il testo viene ritagliato a livello di pixel, con conseguente ritaglio visivo dei glifi in eccesso.

  • Valore TextTrimming.CharacterEllipsis:

    Con questo valore il testo viene tagliato in corrispondenza di un limite di carattere invece di un limite di parola. Al posto del testo rimanente vengono inseriti puntini di sospensione (...).

 

 

Mostra:
© 2015 Microsoft