Stílus létrehozása vezérlőelemekhez

A Windows Presentation Foundation (WPF) segítségével testre szabhatja egy meglévő vezérlő megjelenését a saját újrafelhasználható stílusával. A stílusok globálisan alkalmazhatók az alkalmazásra, az ablakokra és a lapokra, vagy közvetlenül a vezérlőkre.

Stílus létrehozása

A Style-ra úgy is tekinthet, mint a tulajdonságértékek egy vagy több elemre való alkalmazásának kényelmes módjára. Bármilyen olyan elemhez használhat stílust, amely a FrameworkElement-ból vagy a FrameworkContentElement-ből származik, például Window vagy Button.

A stílus deklarálása leggyakrabban erőforrásként történik egy XAML-fájl Resources szakaszában. Mivel a stílusok erőforrások, ugyanazokat a hatókörkezelési szabályokat tartják be, amelyek az összes erőforrásra vonatkoznak. Egyszerűen fogalmazva, ahol deklarál egy stílust, az befolyásolja, hogy hol alkalmazható a stílus. Ha például az alkalmazásdefiníció XAML-fájljának gyökérelemében deklarálja a stílust, a stílus bárhol használható az alkalmazásban.

<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>

Ha az alkalmazás egyik XAML-fájljában deklarálja a stílust, a stílus csak abban az XAML-fájlban használható. További információ az erőforrások hatókörkezelési szabályairól: XAML-erőforrások áttekintése.

<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>

A stílus <Setter> gyermekelemekből áll, amelyek a stílus által alkalmazott elemek tulajdonságait állítják be. A fenti példában figyelje meg, hogy a stílus a TextBlock attribútumon keresztül TargetType típusokra van beállítva. A stílus a FontSize-t 15-re és a FontWeight-t ExtraBold-ra állítja. Adjon hozzá egy <Setter> minden olyan tulajdonsághoz, amelynél a stílus megváltozik.

Implicit stílus alkalmazása

A Style kényelmes módja annak, hogy tulajdonságértékeket alkalmazzunk több elemre. Vegyük például az alábbi TextBlock elemeket és azok alapértelmezett megjelenését egy ablakban.

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

előtt

Az alapértelmezett megjelenést úgy módosíthatja, hogy az egyes FontSize elemeken közvetlenül beállítja a tulajdonságokat( például FontFamily és TextBlock). Ha azonban azt szeretné, hogy a TextBlock elemei megosszanak bizonyos tulajdonságokat, létrehozhat egy Style az XAML-fájl Resources szakaszában, ahogyan az itt látható.

<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>

Amikor a stílus TargetType értékét TextBlock típusra állítja, és kihagyja a x:Key attribútumot, a stílus érvényes az összes TextBlock elemre, amelyek jellemzően az XAML-fájlban találhatóak.

Most a TextBlock elemek a következőképpen jelennek meg.

Stílus alkalmazása explicit módon

Ha egy x:Key attribútumot ad hozzá a stílushoz, a stílus többé nem lesz implicit módon alkalmazva a TargetTypeminden elemére. Csak a stílusra kifejezetten hivatkozó elemekre vonatkozik a stílus.

Itt található az előző szakasz stílusa, de az x:Key attribútummal deklarálva.

<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>

A stílus alkalmazásához állítsa az elem Style tulajdonságát a x:Key értékre egy StaticResource korrektúrakiterjesztéshasználatával, ahogyan az itt látható.

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

Figyelje meg, hogy az első TextBlock elem stílusa van alkalmazva rá, míg a második TextBlock elem változatlan marad. Az előző szakasz implicit stílusa olyan stílusra módosult, amely deklarálta a x:Key attribútumot, ami azt jelenti, hogy a stílus által érintett egyetlen elem az, amely közvetlenül hivatkozott a stílusra.

Ha egy stílust explicit módon vagy implicit módon alkalmaz, az lepecsételődik, és nem módosítható. Ha módosítani szeretne egy alkalmazott stílust, hozzon létre egy új stílust a meglévő helyett. További információért lásd a IsSealed tulajdonságot.

Létrehozhat olyan objektumot, amely egyéni logika alapján kiválaszt egy stílust. Egy példát a StyleSelector osztályhoz megadott példában talál.

Stílus alkalmazása programozott módon

Ha programozott módon szeretne hozzárendelni egy elnevezett stílust egy elemhez, kérje le a stílust az erőforráscsoportból, és rendelje hozzá az elem Style tulajdonságához. Az erőforrásgyűjtemény elemei Objecttípusúak. Ezért a beolvasott stílust át kell alakítania System.Windows.Style-vá, mielőtt hozzá szeretné rendelni a Style tulajdonsághoz. Például az alábbi kód beállítja egy TextBlock nevű textblock1 stílusát a definiált TitleTextstílusra.

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

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

Stílus bővítése

Lehet, hogy azt szeretné, hogy a két TextBlock elem megossza bizonyos tulajdonságértékeket, például a FontFamily és a középső HorizontalAlignment. Azt is szeretné azonban, hogy a Saját képek szöveg további tulajdonságokkal rendelkezzen. Ezt úgy teheti meg, hogy létrehoz egy új stílust, amely az első stíluson alapul, ahogy az itt látható.

<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>

Ezután alkalmazza a stílust a(z) TextBlockelemre.

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

Ez a TextBlock stílus mostantól középre van állítva, Comic Sans MS26méretű betűtípust használ, az előtérszín pedig a példában látható LinearGradientBrush. Figyelje meg, hogy felülírja az alapstílus FontSize értékét. Ha egy Settertöbb Style is ugyanarra a tulajdonságra mutat, az utolsóként deklarált Setter elsőbbséget élvez.

Az alábbi ábrán a TextBlock elemek mostantól a következőképpen néznek ki:

Ez a TitleText stílus kiterjeszti a TextBlock típushoz, a BasedOn="{StaticResource {x:Type TextBlock}}"-re hivatkozva létrehozott stílust. A x:Key-al rendelkező stílust a stílus x:Key-ének használatával is kiterjesztheti. Ha például van egy Header1 nevű stílus, és ki szeretné terjeszteni ezt a stílust, BasedOn="{StaticResource Header1}"használná.

A TargetType tulajdonság és az x:Key attribútum kapcsolata

Ahogy korábban is láthattuk, ha a TargetType tulajdonságot TextBlock-re állítjuk anélkül, hogy a stílushoz rendelnék egy x:Key-t, akkor a stílus az összes TextBlock elemre alkalmazásra kerül. Ebben az esetben a x:Key implicit módon {x:Type TextBlock}értékre van állítva. Ez azt jelenti, hogy ha a x:Key értéket a {x:Type TextBlock}kívül másra állítja be, a Style nem lesz automatikusan alkalmazva az összes TextBlock elemre. Ehelyett alkalmaznia kell a stílust (a x:Key érték használatával) a TextBlock elemekre. Ha a stílus az erőforrások szakaszban található, és nem állítja be a stílus TargetType tulajdonságát, akkor be kell állítania a x:Key attribútumot.

A x:Keyalapértelmezett értékének megadása mellett a TargetType tulajdonság határozza meg azt a típust, amelyre a beállítási tulajdonságok vonatkoznak. Ha nem ad meg TargetType, a Setter objektumok tulajdonságait osztálynévvel kell minősítenie a Property="ClassName.Property"szintaxis használatával. A Property="FontSize"beállítása helyett például Property kell beállítania "TextBlock.FontSize" vagy "Control.FontSize".

Azt is vegye figyelembe, hogy számos WPF-vezérlő más WPF-vezérlők kombinációjából áll. Ha olyan stílust hoz létre, amely egy típus összes vezérlőelemére érvényes, váratlan eredményekhez juthat. Ha például olyan stílust hoz létre, amely egy TextBlockWindow típusát célozza meg, akkor a stílus az ablak összes TextBlock vezérlőelemére érvényes, még akkor is, ha a TextBlock egy másik vezérlő, például egy ListBoxrésze.

Lásd még

• Hogyan hozzunk létre egy sablont egy vezérlőhöz
• XAML-erőforrások áttekintése
• XAML-áttekintés