XAML-stílusok

Az XAML-keretrendszer használatával számos módon testre szabhatja az alkalmazások megjelenését. A stílusokkal beállíthatja a vezérlő tulajdonságait, és újra felhasználhatja ezeket a beállításokat a több vezérlő egységes megjelenéséhez.

A stílus alapjai

A stílusok használatával a vizuális tulajdonságbeállításokat újrahasználható erőforrásokká alakíthatja. Íme egy példa, amely három gombot mutat be, amelyek stílusa a BorderBrush, a BorderThickness és az Előtér tulajdonságot állítja be. Stílus alkalmazásával a vezérlők ugyanúgy jelennek meg anélkül, hogy ezeket a tulajdonságokat külön-külön kellene beállítania az egyes vezérlőelemeken.

Képernyőkép három egymás mellett elrendezett stílusgombról.

Definiálhat egy stílust az XAML-ben egy vezérlőelemhez, vagy újrafelhasználható erőforrásként. Erőforrások definiálása az egyes lapok XAML-fájljában, az App.xaml fájlban vagy egy külön erőforrás-szótár XAML-fájljában. Az erőforrásszótár XAML-fájlja megosztható az alkalmazások között, és több erőforrásszótár is egyesíthető egyetlen alkalmazásban. Az erőforrás definiálása határozza meg, hogy melyik hatókörben használható. A lapszintű erőforrások csak azon a lapon érhetők el, ahol definiálva vannak. Ha az azonos kulccsal rendelkező erőforrások az App.xaml-ben és egy lapon is vannak definiálva, akkor a lapon lévő erőforrás felülírja az App.xaml erőforrását. Ha egy erőforrás egy külön erőforrás-szótárfájlban van definiálva, annak hatókörét az határozza meg, hogy hol hivatkozik az erőforrás szótárára.

A Stílusdefinícióban egy TargetType attribútumra és egy vagy több Setter-elem gyűjteményére van szükség. A TargetType attribútum egy sztring, amely egy FrameworkElement típust ad meg a stílus alkalmazásához. A TargetType értéknek meg kell adnia egy FrameworkElement-származtatott típust, amelyet a Windows futtatókörnyezet vagy egy hivatkozott szerelvényben elérhető egyéni típus határoz meg. Ha stílust próbál alkalmazni egy vezérlőelemre, és a vezérlő típusa nem egyezik az alkalmazni kívánt stílus TargetType attribútumával, kivétel történik.

Minden Setter-elemhez tulajdonság és érték szükséges. Ezek a tulajdonságbeállítások jelzik, hogy a beállítás mely vezérlőtulajdonságokra vonatkozik, és hogy milyen értéket kell beállítani a tulajdonsághoz. A Setter.Value attribútummal vagy tulajdonságelem-szintaxissal is beállítható. Az XAML itt a korábban megjelenített gombokra alkalmazott stílust jeleníti meg. Ebben az XAML-ben az első két Setter-elem attribútumszintaxisát használja, de az utolsó Setter a BorderBrush tulajdonsághoz a tulajdonságelem szintaxisát használja. A példa nem használja az x:Key attribútum attribútumot , ezért a stílus implicit módon lesz alkalmazva a gombokra. A stílusok implicit vagy explicit alkalmazása a következő szakaszban található.

<Page.Resources>
    <Style TargetType="Button">
        <Setter Property="BorderThickness" Value="5" />
        <Setter Property="Foreground" Value="Black" />
        <Setter Property="BorderBrush" >
            <Setter.Value>
                <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
                    <GradientStop Color="Yellow" Offset="0.0" />
                    <GradientStop Color="Red" Offset="0.25" />
                    <GradientStop Color="Blue" Offset="0.75" />
                    <GradientStop Color="LimeGreen" Offset="1.0" />
                </LinearGradientBrush>
            </Setter.Value>
        </Setter>
    </Style>
</Page.Resources>

<StackPanel Orientation="Horizontal">
    <Button Content="Button"/>
    <Button Content="Button"/>
    <Button Content="Button"/>
</StackPanel>

Implicit vagy explicit stílus alkalmazása

Ha erőforrásként definiál egy stílust, kétféleképpen alkalmazhatja azt a vezérlőkre:

Implicit módon, csak egy TargetType-t ad meg a stílus számára.
Explicit módon egy TargetType és egy x:Key attribútum megadásával a Stílus számára, majd a célvezérlő Stílus tulajdonságának beállításával egy {StaticResource} jelölőnyelvi bővítmény hivatkozással, amely az explicit kulcsot használja.

Ha egy stílus tartalmazza az x:Key attribútumot, akkor csak úgy alkalmazhatja egy vezérlőelemre, ha a vezérlőelem Stílus tulajdonságát a kulcsos stílusra állítja. Ezzel szemben egy x:Key attribútum nélküli stílus automatikusan alkalmazva lesz a céltípus minden vezérlőelemére, amely egyébként nem rendelkezik explicit stílusbeállítással.

Az alábbiakban két gomb látható, amelyek implicit és explicit stílusokat mutatnak be.

implicit módon és explicit módon formázott gombok.

Ebben a példában az első stílus x:Key attribútummal rendelkezik, céltípusa Pedig Gomb. Az első gomb Stílus tulajdonsága erre a kulcsra van beállítva, így a stílus explicit módon lesz alkalmazva. A második stílus implicit módon lesz alkalmazva a második gombra, mert a céltípus gomb , és a stílus nem rendelkezik x:Key attribútummal.

<Page.Resources>
    <Style x:Key="PurpleStyle" TargetType="Button">
        <Setter Property="FontFamily" Value="Segoe UI"/>
        <Setter Property="FontSize" Value="14"/>
        <Setter Property="Foreground" Value="Purple"/>
    </Style>

    <Style TargetType="Button">
        <Setter Property="FontFamily" Value="Segoe UI"/>
        <Setter Property="FontSize" Value="14"/>
        <Setter Property="RenderTransform">
            <Setter.Value>
                <RotateTransform Angle="25"/>
            </Setter.Value>
        </Setter>
        <Setter Property="BorderBrush" Value="Green"/>
        <Setter Property="BorderThickness" Value="2"/>
        <Setter Property="Foreground" Value="Green"/>
    </Style>
</Page.Resources>

<Grid x:Name="LayoutRoot">
    <Button Content="Button" Style="{StaticResource PurpleStyle}"/>
    <Button Content="Button"/>
</Grid>

Alapstílusok használata

A stílusok könnyebb karbantartása és a stílusok újrafelhasználásának optimalizálása érdekében létrehozhat más stílusoktól öröklő stílusokat. A BasedOn tulajdonság használatával öröklött stílusokat hozhat létre. A más stílusoktól öröklő stílusoknak ugyanazt a vezérlőtípust vagy az alapstílus által megcélzott típusból származó vezérlőelemet kell célba vennie. Ha például egy alapstílus a ContentControlt célozza meg, az ezen a stíluson alapuló stílusok megcélozhatják a ContentControlt vagy a ContentControlból származó típusokat, például a Gombot és a ScrollViewert. Ha egy érték nincs beállítva az alapul szolgáló stílusban, az az alapstílustól öröklődik. Ha módosítani szeretne egy értéket az alapstílusról, az alapul szolgáló stílus felülírja ezt az értéket. A következő példa egy gombot és egy jelölőnégyzetet mutat be, amelyek ugyanabból az alapstílusból veszik át stílusukat.

stílusalapú gombok stílusok használatával.

Az alapstílus a ContentControlcélozza meg, és beállítja a Magasságés Szélesség tulajdonságokat. A stílusok, amelyek erre a stílusra épülnek, a Jelölőnégyzetet és Gombot célozzák, és a ContentControlból származnak. Az alapul szolgáló stílusok különböző színeket adnak a BorderBrush és az Előtér tulajdonságaihoz . (Általában nem teszünk szegélyt a jelölőnégyzet köré, de itt azért tesszük, hogy bemutassuk a stílus hatásait.)

<Page.Resources>
    <Style x:Key="BasicStyle" TargetType="ContentControl">
        <Setter Property="Width" Value="130" />
        <Setter Property="Height" Value="30" />
    </Style>

    <Style x:Key="ButtonStyle" TargetType="Button"
           BasedOn="{StaticResource BasicStyle}">
        <Setter Property="BorderBrush" Value="Orange" />
        <Setter Property="BorderThickness" Value="2" />
        <Setter Property="Foreground" Value="Red" />
    </Style>

    <Style x:Key="CheckBoxStyle" TargetType="CheckBox"
           BasedOn="{StaticResource BasicStyle}">
        <Setter Property="BorderBrush" Value="Blue" />
        <Setter Property="BorderThickness" Value="2" />
        <Setter Property="Foreground" Value="Green" />
    </Style>
</Page.Resources>

<StackPanel>
    <Button Content="Button" Style="{StaticResource ButtonStyle}" Margin="0,10"/>
    <CheckBox Content="CheckBox" Style="{StaticResource CheckBoxStyle}"/>
</StackPanel>

Könnyű stílus

A rendszerkefék felülbírálása általában az alkalmazás vagy az oldal szintjén történik, és mindkét esetben a szín felülbírálása hatással lesz az adott ecsetre hivatkozó összes vezérlőre – és az XAML-ben számos vezérlő hivatkozhat ugyanarra a rendszerkefére.

<Page.Resources>
    <ResourceDictionary>
        <ResourceDictionary.ThemeDictionaries>
            <ResourceDictionary x:Key="Light">
                 <SolidColorBrush x:Key="ButtonBackground" Color="Transparent"/>
                 <SolidColorBrush x:Key="ButtonForeground" Color="MediumSlateBlue"/>
                 <SolidColorBrush x:Key="ButtonBorderBrush" Color="MediumSlateBlue"/>
            </ResourceDictionary>
        </ResourceDictionary.ThemeDictionaries>
    </ResourceDictionary>
</Page.Resources>

Az olyan állapotok esetében, mint a PointerOver (az egér a gomb fölé van húzva), a PointerPressed (a gomb meghívásra került), vagy Letiltva (a gomb nem használható). Ezek a végződések hozzá vannak fűzve az eredeti egyszerűsített stílusnevekhez: ButtonBackgroundPointerOver, ButtonForegroundPressed, ButtonBorderBrushDisabled stb. Ha ezeket az ecseteket is módosítja, a vezérlők mindig az alkalmazás témájának megfelelően lesznek színezve.

Ha ezeket az ecset felülbírálásokat az App.Resources szintjén helyezi el, az alkalmazás összes gombját módosítja, nem pedig egyetlen oldalon.

Vezérlőnkénti stílus

Más esetekben az egyetlen vezérlő csak egy oldalon való módosítására van szükség, hogy egy bizonyos módon nézzen ki, anélkül, hogy módosítaná a vezérlő más verzióit:

Képernyőkép három, egymás fölé halmozott gombról.

<CheckBox Content="Normal CheckBox" Margin="5"/>
<CheckBox Content="Special CheckBox" Margin="5">
    <CheckBox.Resources>
        <ResourceDictionary>
            <ResourceDictionary.ThemeDictionaries>
                <ResourceDictionary x:Key="Light">
                    <SolidColorBrush x:Key="CheckBoxForegroundUnchecked"
                        Color="Purple"/>
                    <SolidColorBrush x:Key="CheckBoxForegroundChecked"
                        Color="Purple"/>
                    <SolidColorBrush x:Key="CheckBoxCheckGlyphForegroundChecked"
                        Color="White"/>
                    <SolidColorBrush x:Key="CheckBoxCheckBackgroundStrokeChecked"  
                        Color="Purple"/>
                    <SolidColorBrush x:Key="CheckBoxCheckBackgroundFillChecked"
                        Color="Purple"/>
                </ResourceDictionary>
            </ResourceDictionary.ThemeDictionaries>
        </ResourceDictionary>
    </CheckBox.Resources>
</CheckBox>
<CheckBox Content="Normal CheckBox" Margin="5"/>

Ez csak egy "Speciális jelölőnégyzetet" eredményezne azon a lapon, ahol a vezérlő létezett.

Egyéni vezérlők

Ha saját egyéni vezérlőket hoz létre, amelyek vizuálisan és/vagy funkcionálisan igazodnak a beépített vezérlőinkhez, fontolja meg implicit stílus- és egyszerűsített stíluserőforrások használatát az egyéni tartalom definiálásához. Használhatja közvetlenül az erőforrásokat, vagy létrehozhat egy új aliast az erőforráshoz.

Közvetlen vezérlési erőforrások használata

Ha például gombnak tűnő vezérlőelemet ír, a vezérlő közvetlenül hivatkozhat a gomb erőforrásaira, például a következőhöz:

<Style TargetType="local:MyCustomControl">
  <Setter Property="Background" Value="{ThemeResource ButtonBackground}" />
  <Setter Property="BorderBrush" Value="{ThemeResource ButtonBorderBrush}" />
</Style>

Erőforrások új nevek szerinti átnevezése

Másik lehetőségként, ha inkább saját erőforrásokat szeretne létrehozni, ezeket az egyéni neveket az alapértelmezett egyszerűsített stíluserőforrásainkhoz kell aliasként használnia.

Előfordulhat például, hogy az egyéni vezérlő stílusa speciális erőforrás-definíciókkal rendelkezik:

<Style TargetType="local:MyCustomControl">
  <Setter Property="Background" Value="{ThemeResource MyCustomControlBackground}" />
  <Setter Property="BorderBrush" Value="{ThemeResource MyCustomControlBorderBrush}"/>
</Style>

Az erőforrás-szótárban vagy a fődefinícióban az egyszerűsített stíluserőforrásokat az egyéni erőforrásokhoz csatlakoztathatja:

<ResourceDictionary.ThemeDictionaries>
    <ResourceDictionary x:Key="Default">
        <StaticResource x:Key="MyCustomControlBackground" ResourceKey="ButtonBackground" />
        <StaticResource x:Key="MyCustomControlBorderBrush" ResourceKey="ButtonBorderBrush" />
    </ResourceDictionary>        
    <ResourceDictionary x:Key="Light">
        <StaticResource x:Key="MyCustomControlBackground" ResourceKey="ButtonBackground" />
        <StaticResource x:Key="MyCustomControlBorderBrush" ResourceKey="ButtonBorderBrush" />
    </ResourceDictionary>
    <ResourceDictionary x:Key="HighContrast">
        <StaticResource x:Key="MyCustomControlBackground" ResourceKey="ButtonBackground" />
        <StaticResource x:Key="MyCustomControlBorderBrush" ResourceKey="ButtonBorderBrush" />
    </ResourceDictionary>
</ResourceDictionary.ThemeDictionaries>

A három különböző témamódosítás (ThemeDictionary, Default, Light) megfelelő kezeléséhez a háromszor duplikált HighContrast kell használnia.

Figyelmeztetés

Ha egy egyszerűsített stíluserőforrást rendel egy új aliashoz, és újradefinitálja az Egyszerűsített stílus erőforrást is, előfordulhat, hogy a testreszabás nem lesz alkalmazva, ha az erőforrás-keresés nem a megfelelő sorrendben van. Például, ha felüldefiniálja a ButtonBackground-t egy olyan helyen, amelyet a MyCustomControlBackground megtalálása előtt keresnek, a felüldefiniálás kimarad.

Kerülje a vezérlők áttervezését

A legújabb vizuális stílusokkal való naprakészség legjobb módja az egyéni stílusok és sablonok (más néven újraillesztés) elkerülése. A stílusok továbbra is kényelmes módszert jelentenek az értékek készletének következetes alkalmazására az alkalmazás vezérlőelemein. Ha ezt teszi, győződjön meg arról, hogy a legújabb stílusokon alapul.

WinUI-stílusokat (Windows.UI.Xaml.Controls névteret) használó rendszervezérlők esetén állítsa be a BasedOn="{StaticResource Default<ControlName>Style}", ahol a <ControlName> a vezérlő neve. Például:

<Style TargetType="TextBox" BasedOn="{StaticResource DefaultTextBoxStyle}">
    <Setter Property="Foreground" Value="Blue"/>
</Style>

WinUI-vezérlők (Microsoft.UI.Xaml.Controls névtér) esetén az alapértelmezett stílus a metaadatokban van definiálva, ezért hagyja ki BasedOn.

Származtatott vezérlők

Ha egy meglévő XAML-vezérlőből származtat egyéni vezérlőt, előfordulhat, hogy alapértelmezés szerint nem mindig kapja meg a WinUI-stílusokat. A WinUI-stílusok alkalmazása:

Hozzon létre egy új stílust az egyéni vezérlőhöz beállított TargetType-pal.
Alapozza a stílust az ön által származtatott vezérlőelem alapértelmezett stílusára.

Ennek egyik gyakori forgatókönyve egy új vezérlő levezetése a ContentDialogból. Ez a példa bemutatja, hogyan hozhat létre egy új stílust, amely DefaultContentDialogStyle-t alkalmaz az egyéni párbeszédpaneljén.

<ContentDialog
    x:Class="ExampleApp.SignInContentDialog"
    ... >

    <ContentDialog.Resources>
        <Style TargetType="local:SignInContentDialog" BasedOn="{StaticResource DefaultContentDialogStyle}"/>
        ...
    </ContentDialog.Resources> 
    <!-- CONTENT -->
</ContentDialog>

A sablontulajdonság

A vezérlő sablontulajdonságához használható stílusválasztó, amely egy tipikus XAML-stílus és egy alkalmazás XAML-erőforrásainak többségét teszi ki. Erről részletesebben a Control sablonok című témakörben olvashat.

Visszajelzés

Hasznosnak találta ezt az oldalt?

Last updated on 2026-03-14