Risorse del tema XAMLXAML theme resources

Le risorse del tema in XAML sono un set di risorse che applicano valori diversi a seconda del tema di sistema attivo.Theme resources in XAML are a set of resources that apply different values depending on which system theme is active. Il framework XAML supporta 3 temi: "Light", "Dark" e "HighContrast".There are 3 themes that the XAML framework supports: "Light", "Dark", and "HighContrast".

Prerequisiti: In questo argomento si presuppone che tu abbia letto Riferimenti a ResourceDictionary e risorse XAML.Prerequisites: This topic assumes that you have read ResourceDictionary and XAML resource references.

Risorse del tema eTheme resources v. risorse statichestatic resources

Esistono due estensioni di markup XAML che possono fare riferimento a una risorsa XAML da un dizionario risorse XAML esistente: l’estensione di markup {StaticResource} e l’estensione di markup {ThemeResource}.There are two XAML markup extensions that can reference a XAML resource from an existing XAML resource dictionary: {StaticResource} markup extension and {ThemeResource} markup extension.

La valutazione di un’estensione di markup {ThemeResource} avviene quando l’app viene caricata e in seguito ogni volta che il tema cambia in fase di esecuzione.Evaluation of a {ThemeResource} markup extension occurs when the app loads and subsequently each time the theme changes at runtime. Di solito, questo si verifica quando l'utente cambia le impostazioni del dispositivo o in seguito a una modifica nell'app a livello di programmazione, che ne sostituisce il tema.This is typically the result of the user changing their device settings or from a programmatic change within the app that alters its current theme.

Al contrario, un’estensione di markup {StaticResource} viene valutata solo al primo caricamento del codice XAML dall’app eIn contrast, a {StaticResource} markup extension is evaluated only when the XAML is first loaded by the app. non viene aggiornata.It does not update. È un po' come trovare e sostituire nel codice XAML il valore di runtime effettivo all'avvio dell'app.It’s similar to a find and replace in your XAML with the actual runtime value at app launch.

Risorse dei temi nella struttura del dizionario risorseTheme resources in the resource dictionary structure

Ogni risorsa del tema fa parte del file XAML themeresources.xaml.Each theme resource is part of the XAML file themeresources.xaml. Ai fini della progettazione, themeresources.xaml è disponibile nella cartella \(Programmi)\Windows Kits\10\DesignTime\CommonConfiguration\Neutral\UAP\<SDK version>\Generic di un'installazione di Windows Software Development Kit (SDK).For design purposes, themeresources.xaml is available in the \(Program Files)\Windows Kits\10\DesignTime\CommonConfiguration\Neutral\UAP\<SDK version>\Generic folder from a Windows Software Development Kit (SDK) installation. I dizionari risorse in themeresources.xaml vengono riprodotti anche nel file generic.xaml nella stessa directory.The resource dictionaries in themeresources.xaml are also reproduced in generic.xaml in the same directory.

Windows Runtime non usa questi file fisici per la ricerca in fase di esecuzione.The Windows Runtime doesn't use these physical files for runtime lookup. Ecco perché sono raccolti specificatamente in una cartella DesignTime e non vengono copiati nelle app per impostazione predefinita.That's why they are specifically in a DesignTime folder, and they aren't copied into apps by default. Questi dizionari risorse esistono invece in memoria come parte di Windows Runtime stesso e i riferimenti a risorse XAML della tua app per le risorse del tema (o le risorse di sistema) sono risolti qui in fase di esecuzione.Instead, these resource dictionaries exist in memory as part of the Windows Runtime itself, and your app's XAML resource references to theme resources (or system resources) resolve there at runtime.

Linee guida per le risorse del tema personalizzateGuidelines for custom theme resources

Puoi seguire queste linee guida per la definizione e l'uso di risorse del tema personalizzate:Follow these guidelines when you define and consume your own custom theme resources:

Attenzione

Se non segui queste linee guida, potresti notare un comportamento imprevisto per i temi nella tua app.If you don’t follow these guidelines, you might see unexpected behavior related to themes in your app. Per altre info, vedi la sezione Risoluzione dei problemi relativi alle risorse del tema.For more info, see the Troubleshooting theme resources section.

Gradazioni di colore XAML e pennelli che dipendono dai temiThe XAML color ramp and theme-dependent brushes

Il set combinato di colori per i temi "Light", "Dark" e "HighContrast" costituisce le gradazioni di colore Windows in XAML.The combined set of colors for "Light", "Dark", and "HighContrast" themes make up the Windows color ramp in XAML. Quando vuoi modificare i temi di sistema o applicare un tema di sistema ai tuoi elementi XAML, è importante sapere come sono strutturate le risorse del colore.Whether you want to modify the system themes, or apply a system theme to your own XAML elements, it’s important to understand how the color resources are structured.

Per altre informazioni su come applicare il colore nella tua app di Windows, vedi Colore nelle app di Windows.For additional information about how to apply color in your Windows app, please see Color in Windows apps.

Colori dei temi Light e DarkLight and Dark theme colors

Il framework XAML include un set di risorse Color denominate con valori personalizzati per i temi "Light" e "Dark".The XAML framework provides a set of named Color resources with values that are tailored for the "Light" and "Dark" themes. Le chiavi da usare per farvi riferimento seguono il formato di denominazione: System[Simple Light/Dark Name]Color.The keys you use to reference these follow the naming format: System[Simple Light/Dark Name]Color.

Questa tabella elenca la chiave, il nome semplice e la rappresentazione stringa del colore (con il formato #aarrggbb) per le risorse "Light" e "Dark" fornite dal framework XAML.This table lists the key, simple name, and string representation of the color (using the #aarrggbb format) for the "Light" and "Dark" resources provided by the XAML framework. La chiave viene usata per fare riferimento alla risorsa nell'app.The key is used to reference the resource in an app. Il nome "Simple light/dark name" viene usato nella convenzione di denominazione dei pennelli che illustreremo più avanti.The "Simple light/dark name" is used as part of the brush naming convention that we explain later.

CodiceKey Simple light/dark nameSimple light/dark name LeggeroLight DarkDark
SystemAltHighColorSystemAltHighColor AltHighAltHigh #FFFFFFFF#FFFFFFFF #FF000000#FF000000
SystemAltLowColorSystemAltLowColor AltLowAltLow #33FFFFFF#33FFFFFF #33000000#33000000
SystemAltMediumColorSystemAltMediumColor AltMediumAltMedium #99FFFFFF#99FFFFFF #99000000#99000000
SystemAltMediumHighColorSystemAltMediumHighColor AltMediumHighAltMediumHigh #CCFFFFFF#CCFFFFFF #CC000000#CC000000
SystemAltMediumLowColorSystemAltMediumLowColor AltMediumLowAltMediumLow #66FFFFFF#66FFFFFF #66000000#66000000
SystemBaseHighColorSystemBaseHighColor BaseHighBaseHigh #FF000000#FF000000 #FFFFFFFF#FFFFFFFF
SystemBaseLowColorSystemBaseLowColor BaseLowBaseLow #33000000#33000000 #33FFFFFF#33FFFFFF
SystemBaseMediumColorSystemBaseMediumColor BaseMediumBaseMedium #99000000#99000000 #99FFFFFF#99FFFFFF
SystemBaseMediumHighColorSystemBaseMediumHighColor BaseMediumHighBaseMediumHigh #CC000000#CC000000 #CCFFFFFF#CCFFFFFF
SystemBaseMediumLowColorSystemBaseMediumLowColor BaseMediumLowBaseMediumLow #66000000#66000000 #66FFFFFF#66FFFFFF
SystemChromeAltLowColorSystemChromeAltLowColor ChromeAltLowChromeAltLow #FF171717#FF171717 #FFF2F2F2#FFF2F2F2
SystemChromeBlackHighColorSystemChromeBlackHighColor ChromeBlackHighChromeBlackHigh #FF000000#FF000000 #FF000000#FF000000
SystemChromeBlackLowColorSystemChromeBlackLowColor ChromeBlackLowChromeBlackLow #33000000#33000000 #33000000#33000000
SystemChromeBlackMediumLowColorSystemChromeBlackMediumLowColor ChromeBlackMediumLowChromeBlackMediumLow #66000000#66000000 #66000000#66000000
SystemChromeBlackMediumColorSystemChromeBlackMediumColor ChromeBlackMediumChromeBlackMedium #CC000000#CC000000 #CC000000#CC000000
SystemChromeDisabledHighColorSystemChromeDisabledHighColor ChromeDisabledHighChromeDisabledHigh #FFCCCCCC#FFCCCCCC #FF333333#FF333333
SystemChromeDisabledLowColorSystemChromeDisabledLowColor ChromeDisabledLowChromeDisabledLow #FF7A7A7A#FF7A7A7A #FF858585#FF858585
SystemChromeHighColorSystemChromeHighColor ChromeHighChromeHigh #FFCCCCCC#FFCCCCCC #FF767676#FF767676
SystemChromeLowColorSystemChromeLowColor ChromeLowChromeLow #FFF2F2F2#FFF2F2F2 #FF171717#FF171717
SystemChromeMediumColorSystemChromeMediumColor ChromeMediumChromeMedium #FFE6E6E6#FFE6E6E6 #FF1F1F1F#FF1F1F1F
SystemChromeMediumLowColorSystemChromeMediumLowColor ChromeMediumLowChromeMediumLow #FFF2F2F2#FFF2F2F2 #FF2B2B2B#FF2B2B2B
SystemChromeWhiteColorSystemChromeWhiteColor ChromeWhiteChromeWhite #FFFFFFFF#FFFFFFFF #FFFFFFFF#FFFFFFFF
SystemListLowColorSystemListLowColor ListLowListLow #19000000#19000000 #19FFFFFF#19FFFFFF
SystemListMediumColorSystemListMediumColor ListMediumListMedium #33000000#33000000 #33FFFFFF#33FFFFFF

Tema chiaroLight theme

Tema scuroDark theme

BaseBase

Tema Base chiaro

Tema Base scuro

ALTAlt

Tema Alt chiaro

Tema Alt scuro

ElencoList

Tema List chiaro

Tema List scuro

ChromeChrome

Tema Chrome chiaro

Tema Chrome scuro

Colori a contrasto elevato del sistema WindowsWindows system high-contrast colors

Oltre al set di risorse fornite dal framework XAML, c'è un set di valori di colori derivati dalla tavolozza del sistema Windows.In addition to the set of resources provided by the XAML framework, there's a set of color values derived from the Windows system palette. Questi colori non sono specifici delle app di Windows Runtime o di Windows.These colors are not specific to the Windows Runtime or Windows apps. Molte risorse Brush XAML, però, usano questi colori quando il sistema è in funzione (e l’app è in esecuzione) con il tema "HighContrast".However, many of the XAML Brush resources consume these colors when the system is operating (and the app is running) using the "HighContrast" theme. Il framework XAML rende disponibili questi colori di sistema come risorse con chiave.The XAML framework provides these system-wide colors as keyed resources. Le chiavi seguono il formato di denominazione: SystemColor[name]Color.The keys follow the naming format: SystemColor[name]Color.

Questa tabella elenca i colori di sistema forniti da XAML come oggetti risorsa derivati dalla tavolozza del sistema Windows.This table lists the system-wide colors that XAML provides as resource objects derived from the Windows system palette. La colonna "Nome accessibilità" indica l'etichetta assegnata al colore nell'interfaccia utente delle impostazioni di Windows.The "Ease of Access name" column shows how color is labeled in the Windows settings UI. La colonna "Simple HighContrast name" è una descrizione di una sola parola di come il colore viene applicato nei controlli XAML comuni.The "Simple HighContrast name" column is a one word description of how the color is applied across the XAML common controls. Questo nome viene usato nella convenzione di denominazione dei pennelli che illustreremo più avanti.It's used as part of the brush naming convention that we explain later. La colonna "Impostazione predefinita iniziale" indica i valori che otterresti se il sistema non operasse a contrasto elevato.The "Initial default" column shows the values you'd get if the system is not running in high contrast at all.

CodiceKey Nome accessibilitàEase of Access name Simple HighContrast nameSimple HighContrast name Impostazione predefinita inizialeInitial default
SystemColorButtonFaceColorSystemColorButtonFaceColor Testo del pulsante (colore di sfondo)Button Text (background) BackgroundBackground #FFF0F0F0#FFF0F0F0
SystemColorButtonTextColorSystemColorButtonTextColor Testo del pulsante (colore di primo piano)Button Text (foreground) ForegroundForeground #FF000000#FF000000
SystemColorGrayTextColorSystemColorGrayTextColor Testo disabilitatoDisabled Text DisabilitataDisabled #FF6D6D6D#FF6D6D6D
SystemColorHighlightColorSystemColorHighlightColor Testo selezionato (colore di sfondo)Selected Text (background) EvidenziazioneHighlight #FF3399FF#FF3399FF
SystemColorHighlightTextColorSystemColorHighlightTextColor Testo selezionato (colore di primo piano)Selected Text (foreground) HighlightAltHighlightAlt #FFFFFFFF#FFFFFFFF
SystemColorHotlightColorSystemColorHotlightColor Collegamenti ipertestualiHyperlinks HyperlinkHyperlink #FF0066CC#FF0066CC
SystemColorWindowColorSystemColorWindowColor BackgroundBackground PageBackgroundPageBackground #FFFFFFFF#FFFFFFFF
SystemColorWindowTextColorSystemColorWindowTextColor TestoText PageTextPageText #FF000000#FF000000

Windows include diversi temi a contrasto elevato e permette all'utente di impostare i colori specifici per le impostazioni di contrasto elevato tramite il Centro accessibilità, come illustrato qui.Windows provides different high-contrast themes, and enables the user to set the specific colors to for their high-contrast settings through the Ease of Access Center, as shown here. Non è quindi possibile fornire un elenco definitivo di valori di colori a contrasto elevato.Therefore, it's not possible to provide a definitive list of high-contrast color values.

Interfaccia utente delle impostazioni di contrasto elevato di Windows

Per altre info sul supporto di temi a contrasto elevato, vedi Temi a contrasto elevato.For more info about supporting high-contrast themes, see High-contrast themes.

Colore principale di sistemaSystem accent color

Oltre ai colori dei temi a contrasto elevato di sistema, viene fornito il colore principale di sistema come risorsa colore speciale con la chiave SystemAccentColor.In addition to the system high-contrast theme colors, the system accent color is provided as a special color resource using the key SystemAccentColor. In fase di esecuzione, questa risorsa ottiene il colore specificato dall'utente come colore principale nelle impostazioni di personalizzazione di Windows.At runtime, this resource gets the color that the user has specified as the accent color in the Windows personalization settings.

Nota

Anche se è possibile eseguire l'override delle risorse per i colori di sistema, è buona norma rispettare le scelte di colore dell'utente, soprattutto per le impostazioni di contrasto elevato.While it’s possible to override the system color resources, it’s a best practice to respect the user’s color choices, especially for high-contrast settings.

Pennelli che dipendono dai temiTheme-dependent brushes

Le risorse colore mostrate nelle sezioni precedenti vengono usate per impostare la proprietà Color delle risorse SolidColorBrush nei dizionari risorse dei temi di sistema.The color resources shown in the preceding sections are used to set the Color property of SolidColorBrush resources in the system theme resource dictionaries. Le risorse pennello vengono usate per applicare il colore agli elementi XAML.You use the brush resources to apply the color to XAML elements. Le chiavi per le risorse pennello seguono il formato di denominazione: SystemControl[Simple HighContrast name][Simple light/dark name]Brush.The keys for the brush resources follow the naming format: SystemControl[Simple HighContrast name][Simple light/dark name]Brush. Ad esempio, SystemControlBackgroundAltHighBrushFor example, SystemControlBackgroundAltHighBrush.

Vediamo come i valori dei colori per questo pennello vengono determinati in fase di esecuzione.Let’s look at how the color value for this brush is determined at run-time. Nei dizionari risorse "Light" e "Dark" questo pennello è definito così:In the "Light" and "Dark" resource dictionaries, this brush is defined like this:

<SolidColorBrush x:Key="SystemControlBackgroundAltHighBrush" Color="{StaticResource SystemAltHighColor}"/>

Nei dizionari risorse "HighContrast" questo pennello è definito così:In the "HighContrast" resource dictionary, this brush is defined like this:

<SolidColorBrush x:Key="SystemControlBackgroundAltHighBrush" Color="{ThemeResource SystemColorButtonFaceColor}"/>

Quando il pennello viene applicato a un elemento XAML, il colore viene determinato in fase di esecuzione dal tema corrente, come indicato in questa tabella.When this brush is applied to a XAML element, its color is determined at run-time by the current theme, as shown in this table.

TemaTheme Nome colore sempliceColor simple name Risorsa coloreColor resource Valore in fase di esecuzioneRuntime value
LeggeroLight AltHighAltHigh SystemAltHighColorSystemAltHighColor #FFFFFFFF#FFFFFFFF
DarkDark AltHighAltHigh SystemAltHighColorSystemAltHighColor #FF000000#FF000000
HighContrastHighContrast BackgroundBackground SystemColorButtonFaceColorSystemColorButtonFaceColor Il colore specificato nelle impostazioni per lo sfondo del pulsante.The color specified in settings for the button background.

Puoi usare lo schema di denominazione SystemControl[Simple HighContrast name][Simple light/dark name]Brush per determinare quale pennello applicare ai tuoi elementi XAML.You can use the SystemControl[Simple HighContrast name][Simple light/dark name]Brush naming scheme to determine which brush to apply to your own XAML elements.

Nota

Non tutte le combinazioni di [Simple HighContrast name][Simple light/dark name] vengono fornite come risorsa.Not every combination of [Simple HighContrast name][Simple light/dark name] is provided as a brush resource.

Gamma di dimensioni e formati previsti XAMLThe XAML type ramp

Il file themeresources.xaml definisce diverse risorse che definiscono un oggetto Style che puoi applicare ai contenitori di testo dell’interfaccia utente, in particolare per TextBlock o RichTextBlock.The themeresources.xaml file defines several resources that define a Style that you can apply to text containers in your UI, specifically for either TextBlock or RichTextBlock. Questi non sono gli stili impliciti predefiniti.These are not the default implicit styles. Vengono forniti per facilitarti la creazione di definizioni dell’interfaccia utente XAML che corrispondono alla gamma di dimensioni e formati previsti per Windows documentata in Linee guida per i tipi di carattere.They are provided to make it easier for you to create XAML UI definitions that match the Windows type ramp documented in Guidelines for fonts.

Questi stili sono per gli attributi di testo che vuoi applicare all'intero contenitore di testo.These styles are for text attributes that you want applied to the whole text container. Se vuoi applicare gli stili solo ad alcune sezioni del testo, imposta gli attributi per gli elementi di testo all’interno del contenitore, ad esempio per Run in TextBlock.Inlines o per Paragraph in RichTextBlock.Blocks.If you want styles applied just to sections of the text, set attributes on the text elements within the container, such as on a Run in TextBlock.Inlines or on a Paragraph in RichTextBlock.Blocks.

Gli stili hanno questo aspetto quando vengono applicati a un controllo TextBlock:The styles look like this when applied to a TextBlock:

Stili del blocco di testo

<TextBlock Text="Header" Style="{StaticResource HeaderTextBlockStyle}"/>
<TextBlock Text="SubHeader" Style="{StaticResource SubheaderTextBlockStyle}"/>
<TextBlock Text="Title" Style="{StaticResource TitleTextBlockStyle}"/>
<TextBlock Text="SubTitle" Style="{StaticResource SubtitleTextBlockStyle}"/>
<TextBlock Text="Base" Style="{StaticResource BaseTextBlockStyle}"/>
<TextBlock Text="Body" Style="{StaticResource BodyTextBlockStyle}"/>
<TextBlock Text="Caption" Style="{StaticResource CaptionTextBlockStyle}"/>

Per indicazioni su come usare la gamma di dimensioni e formati previsti per Windows nella tua app, vedi Tipografia nelle app di Windows.For guidance on how to use the Windows type ramp in your app, see Typography in Windows apps.

BaseTextBlockStyleBaseTextBlockStyle

TargetType: TextBlockTargetType: TextBlock

Fornisce le proprietà comuni per tutti gli altri stili di contenitore TextBlock.Supplies the common properties for all the other TextBlock container styles.

<!-- Usage -->
<TextBlock Text="Base" Style="{StaticResource BaseTextBlockStyle}"/>

<!-- Style definition -->
<Style x:Key="BaseTextBlockStyle" TargetType="TextBlock">
    <Setter Property="FontFamily" Value="Segoe UI"/>
    <Setter Property="FontWeight" Value="SemiBold"/>
    <Setter Property="FontSize" Value="14"/>
    <Setter Property="TextTrimming" Value="None"/>
    <Setter Property="TextWrapping" Value="Wrap"/>
    <Setter Property="LineStackingStrategy" Value="MaxHeight"/>
    <Setter Property="TextLineBounds" Value="Full"/>
</Style>

HeaderTextBlockStyleHeaderTextBlockStyle

<!-- Usage -->
<TextBlock Text="Header" Style="{StaticResource HeaderTextBlockStyle}"/>

<!-- Style definition -->
<Style x:Key="HeaderTextBlockStyle" TargetType="TextBlock"
       BasedOn="{StaticResource BaseTextBlockStyle}">
    <Setter Property="FontSize" Value="46"/>
    <Setter Property="FontWeight" Value="Light"/>
    <Setter Property="OpticalMarginAlignment" Value="TrimSideBearings"/>
</Style>

SubheaderTextBlockStyleSubheaderTextBlockStyle

<!-- Usage -->
<TextBlock Text="SubHeader" Style="{StaticResource SubheaderTextBlockStyle}"/>

<!-- Style definition -->
<Style x:Key="SubheaderTextBlockStyle" TargetType="TextBlock" 
       BasedOn="{StaticResource BaseTextBlockStyle}">
    <Setter Property="FontSize" Value="34"/>
    <Setter Property="FontWeight" Value="Light"/>
    <Setter Property="OpticalMarginAlignment" Value="TrimSideBearings"/>
</Style>

TitleTextBlockStyleTitleTextBlockStyle

<!-- Usage -->
<TextBlock Text="Title" Style="{StaticResource TitleTextBlockStyle}"/>

<!-- Style definition -->
<Style x:Key="TitleTextBlockStyle" TargetType="TextBlock" 
       BasedOn="{StaticResource BaseTextBlockStyle}">
    <Setter Property="FontWeight" Value="SemiLight"/>
    <Setter Property="FontSize" Value="24"/>
    <Setter Property="OpticalMarginAlignment" Value="TrimSideBearings"/>
</Style>

SubtitleTextBlockStyleSubtitleTextBlockStyle

<!-- Usage -->
<TextBlock Text="SubTitle" Style="{StaticResource SubtitleTextBlockStyle}"/>

<!-- Style definition -->
<Style x:Key="SubtitleTextBlockStyle" TargetType="TextBlock" 
       BasedOn="{StaticResource BaseTextBlockStyle}">
    <Setter Property="FontWeight" Value="Normal"/>
    <Setter Property="FontSize" Value="20"/>
    <Setter Property="OpticalMarginAlignment" Value="TrimSideBearings"/>
</Style>

BodyTextBlockStyleBodyTextBlockStyle

<!-- Usage -->
<TextBlock Text="Body" Style="{StaticResource BodyTextBlockStyle}"/>

<!-- Style definition -->
<Style x:Key="BodyTextBlockStyle" TargetType="TextBlock" 
       BasedOn="{StaticResource BaseTextBlockStyle}">
    <Setter Property="FontWeight" Value="Normal"/>
    <Setter Property="FontSize" Value="14"/>
</Style>

CaptionTextBlockStyleCaptionTextBlockStyle

<!-- Usage -->
<TextBlock Text="Caption" Style="{StaticResource CaptionTextBlockStyle}"/>

<!-- Style definition -->
<Style x:Key="CaptionTextBlockStyle" TargetType="TextBlock" 
       BasedOn="{StaticResource BaseTextBlockStyle}">
    <Setter Property="FontSize" Value="12"/>
    <Setter Property="FontWeight" Value="Normal"/>
</Style>

BaseRichTextBlockStyleBaseRichTextBlockStyle

TargetType: RichTextBlockTargetType: RichTextBlock

Fornisce le proprietà comuni per tutti gli altri stili di contenitore RichTextBlock.Supplies the common properties for all the other RichTextBlock container styles.

<!-- Usage -->
<RichTextBlock Style="{StaticResource BaseRichTextBlockStyle}">
    <Paragraph>Rich text.</Paragraph>
</RichTextBlock>

<!-- Style definition -->
<Style x:Key="BaseRichTextBlockStyle" TargetType="RichTextBlock">
    <Setter Property="FontFamily" Value="Segoe UI"/>
    <Setter Property="FontWeight" Value="SemiBold"/>
    <Setter Property="FontSize" Value="14"/>
    <Setter Property="TextTrimming" Value="None"/>
    <Setter Property="TextWrapping" Value="Wrap"/>
    <Setter Property="LineStackingStrategy" Value="MaxHeight"/>
    <Setter Property="TextLineBounds" Value="Full"/>
    <Setter Property="OpticalMarginAlignment" Value="TrimSideBearings"/>
</Style>

BodyRichTextBlockStyleBodyRichTextBlockStyle

<!-- Usage -->
<RichTextBlock Style="{StaticResource BodyRichTextBlockStyle}">
    <Paragraph>Rich text.</Paragraph>
</RichTextBlock>

<!-- Style definition -->
<Style x:Key="BodyRichTextBlockStyle" TargetType="RichTextBlock" BasedOn="{StaticResource BaseRichTextBlockStyle}">
    <Setter Property="FontWeight" Value="Normal"/>
</Style>

Nota:  L'oggetto RichTextBlock non ha tutti gli stili della gamma di dimensioni e formati previsti per il testo disponibili per TextBlock, principalmente perché il modello DOM (Document Object Model) basato su blocchi per RichTextBlock facilita l'impostazione degli attributi per i singoli elementi di testo.Note:  The RichTextBlock styles don't have all the text ramp styles that TextBlock does, mainly because the block-based document object model for RichTextBlock makes it easier to set attributes on the individual text elements. L'impostazione di TextBlock.Text con la proprietà di contenuto XAML, inoltre, genera una situazione in cui non ci sono elementi di testo a cui applicare uno stile e quindi dovresti applicare uno stile al contenitore.Also, setting TextBlock.Text using the XAML content property introduces a situation where there is no text element to style and thus you'd have to style the container. Questo non rappresenta un problema per RichTextBlock, in quanto il relativo contenuto di testo deve sempre trovarsi in elementi di testo specifici come Paragraph, che è la posizione in cui potresti applicare degli stili XAML all'intestazione di pagina, al sottotitolo e a definizioni simili della gamma di dimensioni e formati previsti per il testo.That isn't an issue for RichTextBlock because its text content always has to be in specific text elements like Paragraph, which is where you might apply XAML styles for page header, page subheader and similar text ramp definitions.

Stili denominati variMiscellaneous Named styles

C’è un altro set di definizioni Style con chiave che puoi usare per applicare a Button uno stile diverso da quello implicito predefinito.There's an additional set of keyed Style definitions you can apply to style a Button differently than its default implicit style.

TextBlockButtonStyleTextBlockButtonStyle

TargetType: ButtonBaseTargetType: ButtonBase

Applica questo stile a un controllo Button quando devi mostrare un testo su cui l’utente può fare clic per eseguire un’azione.Apply this style to a Button when you need to show text that a user can click to take action. Lo stile viene applicato al testo con il colore principale corrente per distinguerlo come interattivo e ha rettangoli di selezione che funzionano bene per il testo.The text is styled using the current accent color to distinguish it as interactive and has focus rectangles that work well for text. Diversamente dallo stile implicito di un oggetto HyperlinkButton, TextBlockButtonStyle non sottolinea il testo.Unlike the implicit style of a HyperlinkButton, the TextBlockButtonStyle does not underline the text.

Inoltre, il modello applica uno stile al testo presentato in modo che vengano usati SystemControlHyperlinkBaseMediumBrush (per lo stato "PointerOver"), SystemControlHighlightBaseMediumLowBrush (per lo stato "Pressed") e SystemControlDisabledBaseLowBrush (per lo stato "Disabled").The template also styles the presented text to use SystemControlHyperlinkBaseMediumBrush (for "PointerOver" state), SystemControlHighlightBaseMediumLowBrush (for "Pressed" state) and SystemControlDisabledBaseLowBrush (for "Disabled" state).

Ecco un controllo Button con la risorsa TextBlockButtonStyle applicata.Here's a Button with the TextBlockButtonStyle resource applied to it.

<Button Content="Clickable text" Style="{StaticResource TextBlockButtonStyle}"
        Click="Button_Click"/>

Ha questo aspetto:It looks like this:

Pulsante con stile che gli conferisce l'aspetto di testo

TargetType: ButtonTargetType: Button

Questo Style fornisce un modello completo per un controllo Button che può essere il pulsante Indietro per un’app di esplorazione.This Style provides a complete template for a Button that can be the navigation back button for a navigation app. Le dimensioni predefinite sono 40 x 40 pixel.The default dimensions are 40 x 40 pixels. Per personalizzare lo stile, puoi impostare esplicitamente Height, Width, FontSize e altre proprietà per Button o creare uno stile derivato usando BasedOn.To tailor the styling you can either explicitly set the Height, Width, FontSize, and other properties on your Button or create a derived style using BasedOn.

Ecco un controllo Button con la risorsa NavigationBackButtonNormalStyle applicata.Here's a Button with the NavigationBackButtonNormalStyle resource applied to it.

<Button Style="{StaticResource NavigationBackButtonNormalStyle}" />

Ha questo aspetto:It looks like this:

Pulsante con lo stile del pulsante Indietro

TargetType: ButtonTargetType: Button

Questo Style fornisce un modello completo per un controllo Button che può essere il pulsante Indietro per un’app di esplorazione.This Style provides a complete template for a Button that can be the navigation back button for a navigation app. È simile a NavigationBackButtonNormalStyle, ma le dimensioni sono 30 x 30 pixel.It's similar to NavigationBackButtonNormalStyle, but its dimensions are 30 x 30 pixels.

Ecco un controllo Button con la risorsa NavigationBackButtonSmallStyle applicata.Here's a Button with the NavigationBackButtonSmallStyle resource applied to it.

<Button Style="{StaticResource NavigationBackButtonSmallStyle}" />

Risoluzione dei problemi relativi alle risorse del temaTroubleshooting theme resources

Se non segui le linee guida per usare le risorse del tema, potresti notare un comportamento imprevisto dei temi nella tua app.If you don’t follow the guidelines for using theme resources, you might see unexpected behavior related to themes in your app.

Ad esempio, quando apri un riquadro a comparsa con tema chiaro, anche le parti della tua app con tema scuro cambiano come se avessero il tema chiaro.For example, when you open a light-themed flyout, parts of your dark-themed app also change as if they were in the light theme. Oppure, se passi a una pagina con tema chiaro e poi torni indietro, la pagina originale con tema scuro (o parti di essa) apparirà come se avesse il tema chiaro.Or if you navigate to a light-themed page and then navigate back, the original dark-themed page (or parts of it) now looks as though it is in the light theme.

Di solito, questi tipi di problema si verificano quando fornisci un tema "Default" e un tema "HighContrast" per supportare gli scenari a contrasto elevato e poi usi i temi "Light" e "Dark" in diverse parti della tua app.Typically, these types of issues occur when you provide a "Default" theme and a "HighContrast" theme to support high-contrast scenarios, and then use both "Light" and "Dark" themes in different parts of your app.

Considera, ad esempio, questa definizione del dizionario dei temi:For example, consider this theme dictionary definition:

<!-- DO NOT USE. THIS XAML DEMONSTRATES AN ERROR. -->
<ResourceDictionary>
  <ResourceDictionary.ThemeDictionaries>
    <ResourceDictionary x:Key="Default">
      <SolidColorBrush x:Key="myBrush" Color="{ThemeResource SystemBaseHighColor}"/>
    </ResourceDictionary>
    <ResourceDictionary x:Key="HighContrast">
      <SolidColorBrush x:Key="myBrush" Color="{ThemeResource SystemColorButtonFaceColor}"/>
    </ResourceDictionary>
  </ResourceDictionary.ThemeDictionaries>
</ResourceDictionary>

A prima vista sembra corretta.Intuitively, this looks correct. Vuoi cambiare il colore a cui fa riferimento myBrush quando il contrasto è elevato, ma, quando il contrasto non è elevato, ti affidi all’estensione di markup {ThemeResource} per essere sicuro che myBrush punti al colore giusto per il tema.You want to change the color pointed to by myBrush when in high-contrast, but when not in high-contrast, you rely on the {ThemeResource} markup extension to make sure that myBrush points to the right color for your theme. Se la tua app non ha mai FrameworkElement.RequestedTheme impostato su elementi all’interno della sua struttura ad albero visuale, di solito funziona tutto come previsto.If your app never has FrameworkElement.RequestedTheme set on elements within its visual tree, this will typically work as expected. Avrai però dei problemi con la tua app non appena inizierai ad applicare nuovi temi a parti diverse della struttura ad albero visuale.However, you run into problems in your app as soon as you start to re-theme different parts of your visual tree.

Il problema si verifica perché i pennelli sono risorse condivise, a differenza della maggior parte degli altri tipi XAML.The problem occurs because brushes are shared resources, unlike most other XAML types. Se nei sottoalberi XAML hai 2 elementi con temi diversi che fanno riferimento alla stessa risorsa pennello, quando il framework scorre ogni sottoalbero per aggiornare le espressioni dell’estensione di markup {ThemeResource}, le modifiche apportate alla risorsa pennello condivisa vengono applicate agli altri sottoalberi e questo non è il risultato che vuoi.If you have 2 elements in XAML sub-trees with different themes that reference the same brush resource, then as the framework walks each sub-tree to update its {ThemeResource} markup extension expressions, changes to the shared brush resource are reflected in the other sub-tree, which is not your intended result.

Per risolvere questo problema, sostituisci il dizionario "Default" con dizionari temi distinti per i temi "Light" e "Dark" oltre a "HighContrast":To fix this, replace the "Default" dictionary with separate theme dictionaries for both "Light" and "Dark" themes in addition to "HighContrast":

<!-- DO NOT USE. THIS XAML DEMONSTRATES AN ERROR. -->
<ResourceDictionary>
  <ResourceDictionary.ThemeDictionaries>
    <ResourceDictionary x:Key="Light">
      <SolidColorBrush x:Key="myBrush" Color="{ThemeResource SystemBaseHighColor}"/>
    </ResourceDictionary>
    <ResourceDictionary x:Key="Dark">
      <SolidColorBrush x:Key="myBrush" Color="{ThemeResource SystemBaseHighColor}"/>
    </ResourceDictionary>
    <ResourceDictionary x:Key="HighContrast">
      <SolidColorBrush x:Key="myBrush" Color="{ThemeResource SystemColorButtonFaceColor}"/>
    </ResourceDictionary>
  </ResourceDictionary.ThemeDictionaries>
</ResourceDictionary>

Tuttavia, il problema continua a verificarsi se si fa riferimento a una qualsiasi di queste risorse nelle proprietà ereditate come Foreground.However, problems still occur if any of these resources are referenced in inherited properties like Foreground. Il modello del controllo personalizzato potrebbe specificare il colore di primo piano di un elemento con l’estensione di markup {ThemeResource}, ma, quando il framework propaga il valore ereditato agli elementi figlio, fornisce un riferimento diretto alla risorsa che è stata risolta dall’espressione dell’estensione di markup {ThemeResource}.Your custom control template might specify the foreground color of an element using the {ThemeResource} markup extension, but when the framework propagates the inherited value to child elements, it provides a direct reference to the resource that was resolved by the {ThemeResource} markup extension expression. Si presentano quindi dei problemi quando il framework elabora le modifiche apportate ai temi mentre scorre la struttura ad albero visuale del controllo.This causes problems when the framework processes theme changes as it walks your control's visual tree. Ripete la valutazione dell'espressione dell'estensione di markup {ThemeResource} per ottenere una nuova risorsa pennello, ma non propaga ancora questo riferimento agli elementi figlio del controllo. La propagazione avviene in seguito, ad esempio durante il passaggio di misurazione successivo.It re-evaluates the {ThemeResource} markup extension expression to get a new brush resource but doesn’t yet propagate this reference down to the children of your control; this happens later, such as during the next measure pass.

Di conseguenza, dopo avere percorso la struttura ad albero visuale dei controlli in risposta a una modifica di un tema, il framework scorre gli elementi figlio e aggiorna le espressioni dell’estensione di markup {ThemeResource} impostate per tali elementi o per gli oggetti impostati sulle loro proprietà.As a result, after walking the control visual tree in response to a theme change, the framework walks the children and updates any {ThemeResource} markup extension expressions set on them, or on objects set on their properties. È qui che si verifica il problema: il framework scorre la risorsa pennello e, poiché il colore è specificato con un'estensione di markup {ThemeResource}, la valutazione viene ripetuta.This is where the problem occurs; the framework walks the brush resource and because it specifies its color using a {ThemeResource} markup extension, it's re-evaluated.

A questo punto, il framework ha chiaramente inquinato il dizionario dei temi perché ora include una risorsa di un dizionario con il colore impostato da un altro dizionario.At this point, the framework appears to have polluted your theme dictionary because it now has a resource from one dictionary that has its color set from another dictionary.

Per risolvere il problema, usa l’estensione di markup {StaticResource} anziché l’estensione di markup {ThemeResource}.To fix this problem, use the {StaticResource} markup extension instead of {ThemeResource} markup extension. Applicando queste linee guida, il dizionario dei temi avrà questo aspetto:With the guidelines applied, the theme dictionaries look like this:

<ResourceDictionary>
  <ResourceDictionary.ThemeDictionaries>
    <ResourceDictionary x:Key="Light">
      <SolidColorBrush x:Key="myBrush" Color="{StaticResource SystemBaseHighColor}"/>
    </ResourceDictionary>
    <ResourceDictionary x:Key="Dark">
      <SolidColorBrush x:Key="myBrush" Color="{StaticResource SystemBaseHighColor}"/>
    </ResourceDictionary>
    <ResourceDictionary x:Key="HighContrast">
      <SolidColorBrush x:Key="myBrush" Color="{ThemeResource SystemColorButtonFaceColor}"/>
    </ResourceDictionary>
  </ResourceDictionary.ThemeDictionaries>
</ResourceDictionary>

Nota che l’estensione di markup {ThemeResource} viene ancora usata nel dizionario "HighContrast" invece dell’estensione di markup {StaticResource}.Notice that the {ThemeResource} markup extension is still used in the "HighContrast" dictionary instead of {StaticResource} markup extension. Questo caso rientra nell'eccezione illustrata prima nelle linee guida.This situation falls under the exception given earlier in the guidelines. La maggior parte dei valori di pennello usati per il tema "HighContrast" usa scelte di colore controllate globalmente dal sistema, ma esposte a XAML come una risorsa denominata in modo specifico (quelle con il prefisso "SystemColor" nel nome).Most of the brush values that are used for the "HighContrast" theme are using color choices that are globally controlled by the system, but exposed to XAML as a specially-named resource (those prefixed with ‘SystemColor’ in the name). Il sistema permette all'utente di impostare i colori specifici da usare per le impostazioni di contrasto elevato tramite il Centro accessibilità.The system enables the user to set the specific colors that should be used for their high contrast settings through the Ease of Access Center. Quelle scelte di colore vengono applicate alle risorse denominate in modo specifico.Those color choices are applied to the specially-named resources. Il framework XAML usa lo stesso evento di modifica del tema anche per aggiornare questi pennelli quando rileva che sono stati modificati a livello di sistema.The XAML framework uses the same theme changed event to also update these brushes when it detects they’ve changed at the system level. Per questo qui viene usata l'estensione di markup {ThemeResource}.This is why the {ThemeResource} markup extension is used here.