Een stijl creëren voor een controle (WPF .NET)
Met Windows Presentation Foundation (WPF) kunt u de verschijning van een bestaand controle aanpassen met uw eigen herbruikbare stijl. Stijlen kunnen globaal worden toegepast op uw app, vensters en pagina's of rechtstreeks op besturingselementen.
Een stijl maken
U kunt een Style beschouwen als een handige manier om een set eigenschapswaarden toe te passen op een of meer elementen. U kunt een stijl gebruiken voor elk element dat is afgeleid van FrameworkElement of FrameworkContentElement, zoals een Window of een Button.
De meest voorkomende manier om een stijl te declareren, is als een resource in de sectie Resources in een XAML-bestand. Omdat stijlen resources zijn, voldoen ze aan dezelfde bereikregels die van toepassing zijn op alle resources. Eenvoudig gezegd, waar u een stijl declareert, beïnvloedt waar de stijl kan worden toegepast. Als u bijvoorbeeld de stijl declareert in het hoofdelement van het XAML-bestand van uw app-definitie, kan de stijl overal in uw app worden gebruikt.
<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>
Als u de stijl declareert in een van de XAML-bestanden van de app, kan de stijl alleen worden gebruikt in dat XAML-bestand. Zie Overzicht van XAML-resourcesvoor meer informatie over bereikregels voor resources.
<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>
Een stijl bestaat uit <Setter> onderliggende elementen die eigenschappen instellen op de elementen waarop de stijl wordt toegepast. In het bovenstaande voorbeeld ziet u dat de stijl is ingesteld om toe te passen op TextBlock typen via het kenmerk TargetType. De stijl stelt de FontSize in op 15 en de FontWeight op ExtraBold. Voeg een <Setter> toe voor elke eigenschap waarbij de stijl verandert.
Een stijl impliciet toepassen
Een Style is een handige manier om een set eigenschapswaarden toe te passen op meer dan één element. Denk bijvoorbeeld aan de volgende TextBlock elementen en hun standaardweergave in een venster.
<StackPanel>
<TextBlock>My Pictures</TextBlock>
<TextBlock>Check out my new pictures!</TextBlock>
</StackPanel>
U kunt het standaard uiterlijk wijzigen door eigenschappen, zoals FontSize en FontFamily, in elk TextBlock element rechtstreeks in te stellen. Als u echter wilt dat uw TextBlock elementen bepaalde eigenschappen delen, kunt u een Style maken in de sectie Resources van uw XAML-bestand, zoals hier wordt weergegeven.
<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>
Wanneer u de TargetType van uw stijl instelt op het TextBlock type en het kenmerk x:Key weglaat, wordt de stijl toegepast op alle TextBlock elementen die zijn gericht op de stijl, wat over het algemeen het XAML-bestand zelf is.
Nu worden de TextBlock elementen als volgt weergegeven.
Een stijl expliciet toepassen
Als u een x:Key kenmerk met waarde toevoegt aan de stijl, wordt de stijl niet meer impliciet toegepast op alle elementen van TargetType. Alleen elementen die expliciet naar de stijl verwijzen, zullen de stijl toegepast krijgen.
Hier volgt de stijl uit de vorige sectie, maar gedeclareerd met het kenmerk 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>
Als u de stijl wilt toepassen, stelt u de eigenschap Style op het element in op de x:Key-waarde, met behulp van een StaticResource-markeringsextensie, zoals hier wordt weergegeven.
<StackPanel>
<TextBlock Style="{StaticResource TitleText}">My Pictures</TextBlock>
<TextBlock>Check out my new pictures!</TextBlock>
</StackPanel>
U ziet dat voor het eerste TextBlock element de stijl is toegepast terwijl het tweede TextBlock-element ongewijzigd blijft. De impliciete stijl van de vorige sectie is gewijzigd in een stijl die het kenmerk x:Key heeft gedeclareerd, wat betekent dat het enige element dat door de stijl wordt beïnvloed, het enige element is dat rechtstreeks naar de stijl verwijst.
Zodra een stijl expliciet of impliciet is toegepast, wordt deze verzegeld en kan deze niet meer worden gewijzigd. Als u een toegepaste stijl wilt wijzigen, maakt u een nieuwe stijl om de bestaande stijl te vervangen. Voor meer informatie, zie de eigenschap IsSealed.
U kunt een object maken dat een stijl kiest die moet worden toegepast op basis van aangepaste logica. Zie het voorbeeld voor de StyleSelector-klasse.
Een stijl programmatisch toepassen
Als u een benoemde stijl aan een element programmatisch wilt toewijzen, haalt u de stijl op uit de resourcesverzameling en wijst u deze toe aan de eigenschap Style van het element. De items in een hulpbronnenverzameling zijn van het type Object. Daarom moet u de opgehaalde stijl casten naar een System.Windows.Style voordat u deze toewijst aan de eigenschap Style. Met de volgende code wordt bijvoorbeeld de stijl van een TextBlock met de naam textblock1 ingesteld op de gedefinieerde stijl TitleText.
textblock1.Style = (Style)Resources["TitleText"];
textblock1.Style = CType(Resources("TitleText"), Windows.Style)
Een stijl uitbreiden
Misschien wilt u dat uw twee TextBlock elementen bepaalde eigenschapswaarden delen, zoals de FontFamily en de gecentreerde HorizontalAlignment. Maar u wilt ook dat de tekst Mijn afbeeldingen extra eigenschappen hebben. U kunt dit doen door een nieuwe stijl te maken die is gebaseerd op de eerste stijl, zoals hier wordt weergegeven.
<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>
Pas vervolgens de stijl toe op een TextBlock.
<StackPanel>
<TextBlock Style="{StaticResource TitleText}" Name="textblock1">My Pictures</TextBlock>
<TextBlock>Check out my new pictures!</TextBlock>
</StackPanel>
Deze TextBlock stijl is nu gecentreerd, gebruikt een Comic Sans MS lettertype met een grootte van 26en de voorgrondkleur ingesteld op de LinearGradientBrush in het voorbeeld. Je merkt dat de FontSize-waarde van de basisstijl wordt overschreven. Als er meer dan één Setter naar dezelfde eigenschap in een Stylewijst, heeft de Setter die als laatste wordt gedeclareerd voorrang.
Hieronder ziet u hoe de TextBlock elementen er nu uitzien:
Deze TitleText stijl breidt de stijl uit die is gemaakt voor het TextBlock type, waarnaar wordt verwezen met BasedOn="{StaticResource {x:Type TextBlock}}". U kunt ook een stijl uitbreiden met een x:Key met behulp van de x:Key van de stijl. Als er bijvoorbeeld een stijl met de naam Header1 en u die stijl wilt uitbreiden, gebruikt u BasedOn="{StaticResource Header1}".
Relatie van de eigenschap TargetType en het kenmerk x:Key
Zoals eerder weergegeven, zorgt het instellen van de eigenschap TargetType op TextBlock zonder de stijl toe te wijzen aan een x:Key ervoor zorgt dat de stijl wordt toegepast op alle TextBlock elementen. In dit geval wordt de x:Key impliciet ingesteld op {x:Type TextBlock}. Dit betekent dat als u de x:Key waarde expliciet instelt op iets anders dan {x:Type TextBlock}, de Style niet automatisch wordt toegepast op alle TextBlock elementen. In plaats daarvan moet u de stijl (met behulp van de x:Key waarde) expliciet toepassen op de TextBlock-elementen. Als uw stijl in de sectie Resources staat en u de eigenschap TargetType niet instelt voor uw stijl, moet u het kenmerk x:Key instellen.
Naast het opgeven van een standaardwaarde voor de x:Key, geeft de eigenschap TargetType het type op waarop settereigenschappen van toepassing zijn. Als u geen TargetTypeopgeeft, moet u de eigenschappen in uw Setter-objecten met een klassenaam kwalificeren met behulp van de syntaxis Property="ClassName.Property". In plaats van bijvoorbeeld Property="FontSize"in te stellen, moet u Property instellen op "TextBlock.FontSize" of "Control.FontSize".
Houd er ook rekening mee dat veel WPF-besturingselementen bestaan uit een combinatie van andere WPF-besturingselementen. Als u een stijl maakt die van toepassing is op alle besturingselementen van een type, krijgt u mogelijk onverwachte resultaten. Als u bijvoorbeeld een stijl maakt die is gericht op het TextBlock type in een Window, wordt de stijl toegepast op alle TextBlock besturingselementen in het venster, zelfs als de TextBlock deel uitmaakt van een ander besturingselement, zoals een ListBox.
Zie ook
.NET Desktop feedback