Condividi tramite


Come creare uno stile per un controllo

Usando Windows Presentation Foundation (WPF), è possibile personalizzare l'aspetto di un controllo esistente creando uno stile riutilizzabile personalizzato. È possibile applicare stili a livello globale all'app, alle finestre e alle pagine o direttamente ai controlli.

Creare uno stile

Si consideri un Style modo pratico per applicare un set di valori di proprietà a uno o più elementi. È possibile utilizzare uno stile su qualsiasi elemento che deriva da FrameworkElement o FrameworkContentElement, come un Window o un Button.

Il modo più comune per dichiarare uno stile è una risorsa nella Resources sezione di un file XAML. Poiché gli stili sono risorse, seguono le stesse regole di ambito di tutte le risorse. Dove dichiari uno stile influisce sulla posizione in cui puoi applicarlo. Ad esempio, se dichiari lo stile nell'elemento radice del file XAML di definizione dell'app, puoi usare lo stile ovunque nella tua app.

<Application x:Class="IntroToStylingAndTemplating.App"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:local="clr-namespace:IntroToStylingAndTemplating"
             StartupUri="WindowExplicitStyle.xaml">
    <Application.Resources>
        <ResourceDictionary>
            
            <Style x:Key="Header1" TargetType="TextBlock">
                <Setter Property="FontSize" Value="15" />
                <Setter Property="FontWeight" Value="ExtraBold" />
            </Style>
            
        </ResourceDictionary>
    </Application.Resources>
</Application>

Se dichiari lo stile in uno dei file XAML dell'app, puoi usare lo stile solo in tale file XAML. Per altre informazioni sulle regole di definizione dell'ambito per le risorse, vedere Panoramica delle risorse XAML.

<Window x:Class="IntroToStylingAndTemplating.WindowSingleResource"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:IntroToStylingAndTemplating"
        mc:Ignorable="d"
        Title="WindowSingleResource" Height="450" Width="800">
    <Window.Resources>
        
        <Style x:Key="Header1" TargetType="TextBlock">
            <Setter Property="FontSize" Value="15" />
            <Setter Property="FontWeight" Value="ExtraBold" />
        </Style>
        
    </Window.Resources>
    <Grid />
</Window>

Uno stile è costituito da <Setter> elementi figlio che impostano proprietà sugli elementi a cui si applica lo stile. Nell'esempio precedente lo stile si applica ai TextBlock tipi tramite l'attributo TargetType . Lo stile imposta il FontSize su 15 e il FontWeight su ExtraBold. Aggiungere un oggetto <Setter> per ogni proprietà modificata dallo stile.

Applicare uno stile in modo implicito

Un Style è un modo pratico per applicare un set di valori di proprietà a più di un elemento. Si considerino, ad esempio, gli elementi seguenti TextBlock e l'aspetto predefinito in una finestra.

<StackPanel>
    <TextBlock>My Pictures</TextBlock>
    <TextBlock>Check out my new pictures!</TextBlock>
</StackPanel>

Screenshot dell'esempio di applicazione di stili prima

È possibile modificare l'aspetto predefinito impostando le proprietà, ad esempio FontSize e FontFamily, in ogni TextBlock elemento direttamente. Tuttavia, se vuoi che gli TextBlock elementi convidano alcune proprietà, puoi creare un oggetto Style nella Resources sezione del file XAML, come illustrato di seguito.

<Window.Resources>
    <!--A Style that affects all TextBlocks-->
    <Style TargetType="TextBlock">
        <Setter Property="HorizontalAlignment" Value="Center" />
        <Setter Property="FontFamily" Value="Comic Sans MS"/>
        <Setter Property="FontSize" Value="14"/>
    </Style>
</Window.Resources>

Quando imposti l'attributo TargetType dello stile al tipo TextBlock e ometti l'attributo x:Key, lo stile si applica a tutti gli TextBlock elementi scoperti dallo stile, che generalmente è il file XAML stesso.

Ora gli TextBlock elementi vengono visualizzati nel modo seguente.

Esempio di stile base dello screenshot

Applicare uno stile in modo esplicito

Se si aggiunge un x:Key attributo con un valore allo stile, lo stile non viene più applicato in modo implicito a tutti gli elementi di TargetType. Solo gli elementi che fanno riferimento in modo esplicito allo stile lo ricevono.

Ecco lo stile della sezione precedente, ma dichiarato con l'attributo x:Key .

<Window.Resources>
    <Style x:Key="TitleText" TargetType="TextBlock">
        <Setter Property="HorizontalAlignment" Value="Center" />
        <Setter Property="FontFamily" Value="Comic Sans MS"/>
        <Setter Property="FontSize" Value="14"/>
    </Style>
</Window.Resources>

Per applicare lo stile, impostare la proprietà Style dell'elemento al valore x:Key usando un'estensione di markup StaticResource, come illustrato di seguito.

<StackPanel>
    <TextBlock Style="{StaticResource TitleText}">My Pictures</TextBlock>
    <TextBlock>Check out my new pictures!</TextBlock>
</StackPanel>

Si noti che al primo TextBlock elemento è applicato lo stile mentre il secondo elemento TextBlock rimane invariato. Lo stile implicito della sezione precedente è stato modificato in uno stile che ha dichiarato l'attributo x:Key . Lo stile influisce solo sugli elementi che vi fanno riferimento direttamente.

Screenshot dell'esempio di applicazione di stili a un blocco di testo

Dopo aver applicato uno stile in modo esplicito o implicito, diventa sigillato e non può essere modificato. Se si desidera modificare uno stile, creare un nuovo stile per sostituire quello esistente. Per ulteriori informazioni, consultare la proprietà IsSealed.

È possibile creare un oggetto che sceglie uno stile da applicare in base alla logica personalizzata. Per un esempio, vedere l'esempio fornito per la StyleSelector classe .

Applicare uno stile a livello di codice

Per assegnare uno stile denominato a un elemento programmaticamente, recuperare lo stile dalla raccolta di risorse e assegnarlo alla proprietà dell'elemento Style. Gli elementi in una raccolta di risorse sono di tipo Object. Pertanto, è necessario eseguire il cast dello stile recuperato a System.Windows.Style prima di assegnarlo alla proprietà Style. Ad esempio, il codice seguente imposta lo stile di un TextBlock oggetto denominato textblock1 sullo stile TitleTextdefinito.

textblock1.Style = (Style)Resources["TitleText"];
textblock1.Style = CType(Resources("TitleText"), Windows.Style)

Estendere uno stile

È possibile che i due TextBlock elementi condividano alcuni valori delle proprietà, come FontFamily o la centratura di HorizontalAlignment. Ma vuoi anche che il testo Immagini personali abbia alcune proprietà aggiuntive. A tale scopo, è possibile creare un nuovo stile basato sul primo stile, come illustrato nell'esempio seguente.

<Window.Resources>
    <!-- .... other resources .... -->

    <!--A Style that affects all TextBlocks-->
    <Style TargetType="TextBlock">
        <Setter Property="HorizontalAlignment" Value="Center" />
        <Setter Property="FontFamily" Value="Comic Sans MS"/>
        <Setter Property="FontSize" Value="14"/>
    </Style>
    
    <!--A Style that extends the previous TextBlock Style with an x:Key of TitleText-->
    <Style BasedOn="{StaticResource {x:Type TextBlock}}"
           TargetType="TextBlock"
           x:Key="TitleText">
        <Setter Property="FontSize" Value="26"/>
        <Setter Property="Foreground">
            <Setter.Value>
                <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
                    <LinearGradientBrush.GradientStops>
                        <GradientStop Offset="0.0" Color="#90DDDD" />
                        <GradientStop Offset="1.0" Color="#5BFFFF" />
                    </LinearGradientBrush.GradientStops>
                </LinearGradientBrush>
            </Setter.Value>
        </Setter>
    </Style>
</Window.Resources>

Applicare quindi lo stile a un oggetto TextBlock.

<StackPanel>
    <TextBlock Style="{StaticResource TitleText}" Name="textblock1">My Pictures</TextBlock>
    <TextBlock>Check out my new pictures!</TextBlock>
</StackPanel>

Questo TextBlock stile è ora centrato, usa un Comic Sans MS tipo di carattere con una dimensione di 26 e imposta il colore di primo piano sul LinearGradientBrush mostrato nell'esempio. Sovrascrive il valore FontSize dello stile di base. Se sono presenti più di un Setter che puntano alla stessa proprietà in un Style, l'oggetto Setter dichiarato per ultimo ha la precedenza.

L'immagine seguente mostra come appaiono ora gli elementi TextBlock.

Blocchi di testo con stile

Questo TitleText stile estende lo stile creato per il TextBlock tipo a cui si fa riferimento tramite BasedOn="{StaticResource {x:Type TextBlock}}". È anche possibile estendere uno stile con un x:Key oggetto utilizzando l'oggetto x:Key dello stile . Ad esempio, se è presente uno stile denominato Header1 e si vuole estendere tale stile, si userà BasedOn="{StaticResource Header1}".

Relazione tra la proprietà TargetType e l'attributo x:Key

Come illustrato in precedenza, impostando la TargetType proprietà su TextBlock senza assegnare lo stile un x:Key fa sì che lo stile venga applicato a tutti gli TextBlock elementi. In questo caso, l'attributo x:Key è impostato in modo implicito su {x:Type TextBlock}. Questo comportamento significa che se si imposta esplicitamente il valore di x:Key a qualcosa di diverso da {x:Type TextBlock}, Style non si applica automaticamente a tutti gli elementi TextBlock. È invece necessario applicare lo stile (usando il x:Key valore) agli TextBlock elementi in modo esplicito. Se lo stile si trova nella sezione resources e non si imposta la TargetType proprietà sullo stile, è necessario impostare l'attributo x:Key .

Oltre a fornire un valore predefinito per x:Key, la TargetType proprietà specifica il tipo a cui si applicano le proprietà setter. Se non si specifica un TargetTypeoggetto , è necessario qualificare le proprietà negli Setter oggetti usando un nome di classe con la sintassi Property="ClassName.Property". Ad esempio, anziché impostare Property="FontSize", è necessario impostare su Property"TextBlock.FontSize" o "Control.FontSize".

Si noti anche che molti controlli WPF sono costituiti da una combinazione di altri controlli WPF. Se si crea uno stile che si applica a tutti i controlli di un tipo, è possibile che si ottengano risultati imprevisti. Ad esempio, se si crea uno stile destinato al TextBlock tipo in un Window, lo stile si applica a tutti i TextBlock controlli della finestra, anche se il TextBlock fa parte di un altro controllo, ad esempio un ListBox.

Vedere anche