Condividi tramite

Introduzione a controlli e modelli

  • Articolo

Nello sviluppo di app di Windows, un controllo è un elemento dell'interfaccia utente che visualizza il contenuto o consente l'interazione. Puoi creare l'interfaccia utente per la tua app usando controlli come pulsanti, caselle di testo e caselle combinate per visualizzare i dati e ottenere l'input dell'utente.

IAPI importanti: Nome spazio Windows.UI.Xaml.Controls

Un modello è una ricetta per modificare un controllo o combinare più controlli per creare qualcosa di nuovo. Ad esempio, il modello elenco/dettagli rappresenta un modo per usare un controllo SplitView per lo spostamento nell'app. Analogamente, puoi personalizzare il modello di un controllo NavigationView per implementare il modello Scheda.

In molti casi, è possibile usare un controllo così come sono. Ma i controlli XAML separano la funzione dalla struttura e dall'aspetto, in modo da poter apportare vari livelli di modifica per renderli adatti alle tue esigenze. Nella sezione Stile puoi imparare a usare gli stili XAML e i modelli di controllo per modificare un controllo.

In questa sezione vengono fornite indicazioni per ognuno dei controlli XAML che è possibile usare per compilare l'interfaccia utente dell'app. Per iniziare, questo articolo illustra come aggiungere controlli all'app. Esistono 3 passaggi chiave per l'uso dei controlli nell'app:

  • Aggiungendo un controllo all'app dell'interfaccia utente.
  • Impostare le proprietà nel controllo, ad esempio larghezza, altezza o colore di primo piano.
  • Aggiungere codice ai gestori eventi del controllo in modo da eseguire operazioni.

Aggiungere un controllo

È possibile aggiungere un controllo a un'app in diversi modi:

  • Usare uno strumento di progettazione come Blend per Visual Studio o la finestra di progettazione XAML (Extensible Application Markup Language) di Microsoft Visual Studio.
  • Aggiungere il controllo al markup XAML nell'editor XAML di Visual Studio.
  • Aggiungere il controllo nel codice. I controlli aggiunti nel codice sono visibili quando l'app viene eseguita, ma non sono visibili nella finestra di progettazione XAML di Visual Studio.

In Visual Studio, quando aggiungi e modifica i controlli nella tua app, puoi usare molte delle funzionalità del programma, tra cui casella degli strumenti, finestra di progettazione XAML, editor XAML e Finestra Proprietà.

La casella degli strumenti di Visual Studio visualizza molti dei controlli che è possibile usare nell'app. Per aggiungere un controllo all'app, fare doppio clic sulla casella degli strumenti. Ad esempio, quando fai doppio clic sul controllo TextBox, questo codice XAML viene aggiunto alla visualizzazione XAML.

<TextBox HorizontalAlignment="Left" Text="TextBox" VerticalAlignment="Top"/>

Puoi anche trascinare il controllo dalla casella degli strumenti alla finestra di progettazione XAML.

Impostare il nome di un controllo

Per usare un controllo nel codice, impostare l'attributo x:Name e farvi riferimento in base al nome nel codice. È possibile impostare il nome nel Finestra Proprietà di Visual Studio o in XAML. Ecco come impostare il nome del controllo attualmente selezionato usando la casella di testo Nome nella parte superiore del Finestra Proprietà.

Nominare un controllo

  1. Selezionare l'elemento da assegnare al nome.
  2. Nel pannello Proprietà, digitare un nome nella casella di testo Nome.
  3. Premere INVIO per confermare il nome.

Proprietà Name nella finestra di progettazione di Visual Studio

Ecco come impostare il nome di un controllo nell'editor XAML aggiungendo l'attributo x:Name.

<Button x:Name="Button1" Content="Button"/>

Impostare proprietà di controllo

Usare le proprietà per specificare l'aspetto, il contenuto e altri attributi dei controlli. Quando si aggiunge un controllo usando uno strumento di progettazione, alcune proprietà che controllano dimensioni, posizione e contenuto possono essere impostate automaticamente da Visual Studio. È possibile modificare alcune proprietà, ad esempio Width, Height o Margin, selezionando e modificando il controllo nella visualizzazione Struttura. Questa figura mostra alcuni degli strumenti di ridimensionamento disponibili nella visualizzazione Progettazione.

Ridimensionamento degli strumenti nella finestra di progettazione di Visual Studio

È possibile che il controllo venga ridimensionato e posizionato automaticamente. In questo caso, è possibile reimpostare le dimensioni e le proprietà di posizione impostate automaticamente da Visual Studio.

Per impostare una proprietà

  1. Nel pannello Proprietà fare clic sul marcatore di proprietà accanto al valore della proprietà. Viene visualizzato il menu delle proprietà.
  2. Nel menu delle proprietà, fare clic su Reimposta.

Opzione di menu Reimpostazione proprietà di Visual Studio

Puoi impostare le proprietà del controllo nel Finestra Proprietà, in XAML o nel codice. Ad esempio, per modificare il colore di primo piano per un controllo Button, impostare la proprietà Foreground del controllo. Questa figura mostra come impostare la proprietà Foreground usando la selezione colori nella Finestra Proprietà.

Selezione colori nella finestra di progettazione di Visual Studio

Ecco come impostare la proprietà Foreground nell'editor XAML. Si noti la finestra di Visual Studio IntelliSense visualizzata per semplificare la sintassi.

IntelliSense nella parte 1 di XAML

IntelliSense nella parte 2 di XAML

Ecco il codice XAML risultante dopo aver impostato la proprietà Foreground.

<Button x:Name="Button1" Content="Button" 
        HorizontalAlignment="Left" VerticalAlignment="Top"
        Foreground="Beige"/>

Ecco come impostare la proprietà Foreground nel codice.

Button1.Foreground = new SolidColorBrush(Windows.UI.Colors.Beige);

Button1().Foreground(Media::SolidColorBrush(Windows::UI::Colors::Beige()));

Aggiunta di un gestore dell'evento

Ogni controllo include eventi che consentono di rispondere alle azioni dell'utente o di altre modifiche nell'app. Ad esempio, un controllo Button ha un evento Click generato quando un utente fa clic sul pulsante. Creare un metodo, denominato gestore eventi, per gestire l'evento. Puoi associare l'evento di un controllo a un metodo del gestore eventi nel Finestra Proprietà, in XAML o nel codice. Per altre informazioni sugli eventi, vedi Panoramica degli eventi e degli eventi indirizzati.

Per creare un gestore eventi, selezionare il controllo e quindi fare clic sulla scheda Eventi nella parte superiore del Finestra Proprietà. Il Finestra Proprietà elenca tutti gli eventi disponibili per tale controllo. Ecco alcuni degli eventi per un pulsante.

Elenco eventi di Visual Studio

Per creare un gestore eventi con il nome predefinito, fare doppio clic sulla casella di testo accanto al nome dell'evento nella Finestra Proprietà. Per creare un gestore eventi con un nome personalizzato, digitare il nome desiderato nella casella di testo e premere INVIO. Il gestore eventi viene creato e il file code-behind viene aperto nell'editor di codice. Il metodo del gestore eventi ha 2 parametri. Il primo è sender, che è un riferimento all'oggetto in cui è associato il gestore. Il sender parametro è di tipo Oggetto. In genere si esegue il cast sender a un tipo più preciso se si prevede di controllare o modificare lo stato sull'oggetto sender stesso. In base alla progettazione dell'app personalizzata, si prevede un tipo a cui eseguire il sender cast sicuro, in base alla posizione in cui è collegato il gestore. Il secondo valore è costituito dai dati dell'evento e , che in genere vengono visualizzati nelle firme come parametro o args .

Ecco il codice che gestisce l'evento Click di un pulsante denominato Button1. Quando si fa clic sul pulsante, la proprietà Foreground del pulsante selezionato è impostata su blu.

private void Button_Click(object sender, RoutedEventArgs e)
{
    Button b = (Button)sender;
    b.Foreground = new SolidColorBrush(Windows.UI.Colors.Blue);
}

#MainPage.h
struct MainPage : MainPageT<MainPage>
    {
        MainPage();
        ...
        void Button1_Click(winrt::Windows::Foundation::IInspectable const& sender, winrt::Windows::UI::Xaml::RoutedEventArgs const& e);
    };
    
#MainPage.cpp
void MainPage::Button1_Click(winrt::Windows::Foundation::IInspectable const& sender, winrt::Windows::UI::Xaml::RoutedEventArgs const& e)
    {
        auto b{ sender.as<winrt::Windows::UI::Xaml::Controls::Button>() };
        b.Foreground(Media::SolidColorBrush(Windows::UI::Colors::Blue()));
    }

Puoi anche associare un gestore eventi in XAML. Nell'editor XAML digitare il nome dell'evento che si vuole gestire. Visual Studio mostra una finestra di IntelliSense quando si inizia a digitare. Dopo aver specificato l'evento, è possibile fare doppio clic <New Event Handler> nella finestra DitelliSense per creare un nuovo gestore eventi con il nome predefinito oppure selezionare un gestore eventi esistente dall'elenco.

Ecco la finestra di IntelliSense visualizzata. Consente di creare un nuovo gestore eventi o di selezionare un gestore eventi esistente.

IntelliSense per l'evento Click

Questo esempio illustra come associare un evento Click a un gestore eventi denominato Button_Click in XAML.

<Button Name="Button1" Content="Button" Click="Button_Click"/>

È anche possibile associare un evento al relativo gestore eventi nel code-behind. Ecco come associare un gestore eventi nel codice.

Button1.Click += new RoutedEventHandler(Button_Click);

Button1().Click({ this, &MainPage::Button1_Click });