Modelli di controllo

Puoi personalizzare la struttura visiva e il comportamento visivo di un controllo creando un modello di controllo nel framework XAML. I controlli hanno molte proprietà, ad esempio Background, Foreground e FontFamily, che è possibile impostare per specificare aspetti diversi dell'aspetto del controllo. Tuttavia, le modifiche che è possibile apportare impostando queste proprietà sono limitate. È possibile specificare personalizzazioni aggiuntive creando un modello usando la classe ControlTemplate . Qui viene illustrato come creare un ControlTemplate per personalizzare l'aspetto di un CheckBox controllo.

API importanti: Classe ControlTemplate, Proprietà Control.Template

Esempio di modello di controllo personalizzato

Per impostazione predefinita, un controllo CheckBox inserisce il contenuto (la stringa o l'oggetto accanto al CheckBox) a destra della casella di selezione e un segno di spunta indica che un utente ha selezionato l'CheckBox. Queste caratteristiche rappresentano la struttura visiva e il comportamento visivo di CheckBox.

Ecco un CheckBox di usando il ControlTemplate predefinito visualizzato negli stati , e .

È possibile modificare queste caratteristiche creando un Oggetto ControlTemplate per checkBox. Ad esempio, se si desidera che il contenuto della casella di controllo sia sotto la casella di selezione e si vuole usare una X per indicare che un utente ha selezionato la casella di controllo. Queste caratteristiche vengono specificate nella ControlTemplate del controllo CheckBox .

Per utilizzare un modello personalizzato con un controllo, assegnare il ControlTemplate alla proprietà template del controllo. Ecco un CheckBox usando un ControlTemplate denominato CheckBoxTemplate1. Nella sezione successiva mostriamo XAML (Extensible Application Markup Language) per il ControlTemplate.

<CheckBox Content="CheckBox" Template="{StaticResource CheckBoxTemplate1}" IsThreeState="True" Margin="20"/>

Ecco come questo CheckBox appare negli stati Unchecked, Checkede Indeterminate dopo aver applicato il nostro modello.

Specificare la struttura visiva di un controllo

Quando crei un ControlTemplate, combini gli oggetti FrameworkElement per costruire un singolo controllo. Un oggetto ControlTemplate deve avere un solo FrameworkElement come elemento radice. L'elemento radice contiene in genere altri oggetti FrameworkElement . La combinazione di oggetti costituisce la struttura visiva del controllo.

Questo codice XAML crea un ControlTemplate per un CheckBox che specifica che il contenuto del controllo si trova sotto la casella di selezione. L'elemento radice è un Border. Nell'esempio viene specificato un Path per creare una X che indica che un utente ha selezionato la CheckBox, e un'ellisse che indica uno stato indeterminato. Si noti che l'opacità è impostata su 0 sul tracciato e sull'ellisse in modo che per impostazione predefinita non vengano visualizzati né il tracciato né l'ellisse.

TemplateBinding è un'associazione speciale che collega il valore di una proprietà in un modello di controllo al valore di un'altra proprietà esposta nel controllo basato su modelli. TemplateBinding può essere usato solo all'interno di una definizione ControlTemplate in XAML. Per ulteriori informazioni, vedi l'estensione di markup TemplateBinding.

<ControlTemplate x:Key="CheckBoxTemplate1" TargetType="CheckBox">
    <Border BorderBrush="{TemplateBinding BorderBrush}"
            BorderThickness="{TemplateBinding BorderThickness}"
            Background="{TemplateBinding Background}">
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="*"/>
                <RowDefinition Height="25"/>
            </Grid.RowDefinitions>
            <Rectangle x:Name="NormalRectangle" Fill="Transparent" Height="20" Width="20"
                       Stroke="{ThemeResource SystemControlForegroundBaseMediumHighBrush}"
                       StrokeThickness="{ThemeResource CheckBoxBorderThemeThickness}"
                       UseLayoutRounding="False"/>
            <!-- Create an X to indicate that the CheckBox is selected. -->
            <Path x:Name="CheckGlyph"
                  Data="M103,240 L111,240 119,248 127,240 135,240 123,252 135,264 127,264 119,257 111,264 103,264 114,252 z"
                  Fill="{ThemeResource CheckBoxForegroundThemeBrush}"
                  FlowDirection="LeftToRight"
                  Height="14" Width="16" Opacity="0" Stretch="Fill"/>
            <Ellipse x:Name="IndeterminateGlyph"
                     Fill="{ThemeResource CheckBoxForegroundThemeBrush}"
                     Height="8" Width="8" Opacity="0" UseLayoutRounding="False" />
            <ContentPresenter x:Name="ContentPresenter"
                              ContentTemplate="{TemplateBinding ContentTemplate}"
                              Content="{TemplateBinding Content}"
                              Margin="{TemplateBinding Padding}" Grid.Row="1"
                              HorizontalAlignment="Center"
                              VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
        </Grid>
    </Border>
</ControlTemplate>

Specificare il comportamento visivo di un controllo

Un comportamento visivo specifica l'aspetto di un controllo quando si trova in un determinato stato. Il controllo CheckBox ha 3 stati di controllo: , e . Il valore della proprietà IsChecked determina lo stato del controllo CheckBox e il relativo stato determina ciò che viene visualizzato nella casella.

In questa tabella sono elencati i possibili valori di IsChecked, gli stati corrispondenti del CheckBox e l'aspetto del CheckBox .

Si specifica l'aspetto di un controllo quando si trova in un determinato stato usando gli oggetti VisualState . Un VisualState contiene un Setter o un Storyboard che modifica l'aspetto degli elementi all'interno del ControlTemplate. Quando il controllo entra nello stato specificato dalla proprietà VisualState.Name, vengono applicate le modifiche apportate alla proprietà Setter o Storyboard. Quando il controllo esce dallo stato, le modifiche vengono rimosse. Aggiungi oggetti VisualState agli oggetti VisualStateGroup. Puoi aggiungere oggetti VisualStateGroup alla proprietà associata VisualStateManager.VisualStateGroups impostata sull'elemento radice FrameworkElement del ControlTemplate.

Questo XAML mostra gli oggetti VisualState per gli stati Checked, Uncheckede Indeterminate. Nell'esempio viene impostata la proprietà associata VisualStateManager.VisualStateGroups sul Border, che è l'elemento radice del ControlTemplate. Il CheckedVisualState specifica che l'Opacità del Path denominato CheckGlyph (che mostriamo nell'esempio precedente) è 1. Il VisualState specifica che il Opacity del Ellipse denominato è 1. Il UncheckedVisualState non dispone di Setter o Storyboard, pertanto il CheckBox ritorna al suo aspetto predefinito.

<ControlTemplate x:Key="CheckBoxTemplate1" TargetType="CheckBox">
    <Border BorderBrush="{TemplateBinding BorderBrush}"
            BorderThickness="{TemplateBinding BorderThickness}"
            Background="{TemplateBinding Background}">

        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="CheckStates">
                <VisualState x:Name="Checked">
                    <VisualState.Setters>
                        <Setter Target="CheckGlyph.Opacity" Value="1"/>
                    </VisualState.Setters>
                    <!-- This Storyboard is equivalent to the Setter. -->
                    <!--<Storyboard>
                        <DoubleAnimation Duration="0" To="1"
                         Storyboard.TargetName="CheckGlyph" Storyboard.TargetProperty="Opacity"/>
                    </Storyboard>-->
                </VisualState>
                <VisualState x:Name="Unchecked"/>
                <VisualState x:Name="Indeterminate">
                    <VisualState.Setters>
                        <Setter Target="IndeterminateGlyph.Opacity" Value="1"/>
                    </VisualState.Setters>
                    <!-- This Storyboard is equivalent to the Setter. -->
                    <!--<Storyboard>
                        <DoubleAnimation Duration="0" To="1"
                         Storyboard.TargetName="IndeterminateGlyph" Storyboard.TargetProperty="Opacity"/>
                    </Storyboard>-->
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>

        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="*"/>
                <RowDefinition Height="25"/>
            </Grid.RowDefinitions>
            <Rectangle x:Name="NormalRectangle" Fill="Transparent" Height="20" Width="20"
                       Stroke="{ThemeResource SystemControlForegroundBaseMediumHighBrush}"
                       StrokeThickness="{ThemeResource CheckBoxBorderThemeThickness}"
                       UseLayoutRounding="False"/>
            <!-- Create an X to indicate that the CheckBox is selected. -->
            <Path x:Name="CheckGlyph"
                  Data="M103,240 L111,240 119,248 127,240 135,240 123,252 135,264 127,264 119,257 111,264 103,264 114,252 z"
                  Fill="{ThemeResource CheckBoxForegroundThemeBrush}"
                  FlowDirection="LeftToRight"
                  Height="14" Width="16" Opacity="0" Stretch="Fill"/>
            <Ellipse x:Name="IndeterminateGlyph"
                     Fill="{ThemeResource CheckBoxForegroundThemeBrush}"
                     Height="8" Width="8" Opacity="0" UseLayoutRounding="False" />
            <ContentPresenter x:Name="ContentPresenter"
                              ContentTemplate="{TemplateBinding ContentTemplate}"
                              Content="{TemplateBinding Content}"
                              Margin="{TemplateBinding Padding}" Grid.Row="1"
                              HorizontalAlignment="Center"
                              VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
        </Grid>
    </Border>
</ControlTemplate>

Per comprendere meglio come funzionano gli oggetti VisualState, considera cosa accade quando il CheckBox passa dallo stato Unchecked allo stato Checked, quindi allo stato Indeterminate e quindi torna allo stato Unchecked. Ecco le transizioni.

  Per ulteriori informazioni su come creare stati di visualizzazione per i controlli e in particolare su come usare la classe Storyboard e i tipi di animazione, vedi animazioni con storyboard per gli stati di visualizzazione.

Usare gli strumenti per lavorare facilmente con i temi

Un modo rapido per applicare temi ai controlli consiste nel fare clic destro su un controllo nella Struttura documento di Microsoft Visual Studio e selezionare Modifica tema o Modifica stile (a seconda del controllo su cui fai clic destro). È quindi possibile applicare un tema esistente selezionando Applica risorsa o definirne uno nuovo selezionando Crea vuoto.

Controlli e accessibilità

Quando si crea un nuovo modello per un controllo, oltre a modificare il comportamento e l'aspetto visivo del controllo, è anche possibile modificare il modo in cui il controllo rappresenta se stesso in framework di accessibilità. L'app Windows supporta il framework di automazione interfaccia utente Microsoft per l'accessibilità. Tutti i controlli predefiniti e i relativi modelli supportano i tipi e i modelli comuni di controllo di automazione interfaccia utente appropriati per lo scopo e la funzione del controllo. Questi tipi di controllo e modelli vengono interpretati dai client di automazione interfaccia utente, ad esempio assistive technology, e ciò consente di rendere accessibile un controllo come parte di un'interfaccia utente più ampia accessibile dell'app.

Per separare la logica di controllo di base e anche per soddisfare alcuni dei requisiti architetturali di Automazione interfaccia utente, le classi di controllo includono il supporto per l'accessibilità in una classe separata, un peer di automazione. I peer di automazione talvolta interagiscono con i modelli di controllo perché si aspettano che alcune parti denominate esistano nei modelli, consentendo di abilitare le tecnologie assistive per attivare le azioni dei pulsanti.

Quando si crea un controllo personalizzato completamente nuovo, a volte si desidera anche creare un nuovo peer di automazione corrispondente. Per ulteriori informazioni, vedere nodi personalizzati di automazione.

Altre informazioni sul modello predefinito di un controllo

Gli argomenti che documentano gli stili e i modelli per i controlli XAML mostrano gli estratti dello stesso codice XAML iniziale che si vedrebbero se si utilizzassero le tecniche Modifica tema o Modifica stile spiegate in precedenza. Ogni argomento elenca i nomi degli stati di visualizzazione, le risorse del tema usate e il codice XAML completo per lo stile che contiene il modello. Gli argomenti possono essere utili se si è già iniziato a modificare un modello e si vuole visualizzare l'aspetto del modello originale oppure verificare che il nuovo modello abbia tutti gli stati di visualizzazione denominati necessari.

Risorse del tema nei modelli di controllo

Per alcuni degli attributi negli esempi XAML, potresti aver notato riferimenti alle risorse che usano l'estensione di markup {ThemeResource}. Si tratta di una tecnica che consente a un singolo modello di controllo di usare risorse che possono essere valori diversi a seconda del tema attualmente attivo. Ciò è particolarmente importante per pennelli e colori, perché lo scopo principale dei temi è consentire agli utenti di scegliere se vogliono un tema scuro, chiaro o a contrasto elevato applicato al sistema complessivamente. Le app che usano il sistema di risorse XAML possono usare un set di risorse appropriato per il tema, in modo che le scelte del tema nell'interfaccia utente di un'app riflettano la scelta del tema a livello di sistema dell'utente.

Scaricare il codice di esempio

• Esempio della galleria WinUI
• Esempio di controllo di modifica del testo personalizzato