Notitie
Voor toegang tot deze pagina is autorisatie vereist. U kunt proberen u aan te melden of de directory te wijzigen.
Voor toegang tot deze pagina is autorisatie vereist. U kunt proberen de mappen te wijzigen.
U kunt de visuele structuur en het visuele gedrag van een besturingselement aanpassen door een besturingssjabloon te maken in het XAML-framework. Besturingselementen hebben veel eigenschappen, zoals Achtergrond, Voorgrond en FontFamily, die u kunt instellen om verschillende aspecten van het uiterlijk van het besturingselement op te geven. Maar de wijzigingen die u kunt aanbrengen door deze eigenschappen in te stellen, zijn beperkt. U kunt extra aanpassingen opgeven door een sjabloon te maken met behulp van de klasse ControlTemplate . Hier ziet u hoe u een ControlTemplate- kunt maken om het uiterlijk van een selectievakje controle aan te passen.
Belangrijke API's: ControlTemplate-klasse, eigenschap Control.Template
Voorbeeld van aangepaste besturingssjabloon
Standaard plaatst een besturingselement Selectievakje de inhoud (de tekenreeks of het object naast het selectievakje) rechts van het selectievakje en een vinkje geeft aan dat een gebruiker het selectievakje heeft geselecteerd. Deze kenmerken vertegenwoordigen de visuele structuur en het visuele gedrag van het Selectievakje.
Hier volgt een selectievakje met behulp van de standaardinstellingen ControlTemplate die wordt weergegeven in de statussen Unchecked, Checkeden Indeterminate.
U kunt deze kenmerken wijzigen door een ControlTemplate voor het selectievakje te maken. Als u bijvoorbeeld wilt dat de inhoud van het selectievakje onder het selectievakje staat en u een X wilt gebruiken om aan te geven dat een gebruiker het selectievakje heeft ingeschakeld. U geeft deze kenmerken op in controltemplate van het selectievakje.
Als u een aangepaste sjabloon met een besturingselement wilt gebruiken, wijst u de ControlTemplate- toe aan de eigenschap Sjabloon van het besturingselement. Hier is een selectievakje met een ControlTemplate genaamd CheckBoxTemplate1. In de volgende sectie wordt de Extensible Application Markup Language (XAML) voor de ControlTemplate weergegeven.
<CheckBox Content="CheckBox" Template="{StaticResource CheckBoxTemplate1}" IsThreeState="True" Margin="20"/>
Dit selectievakje ziet er als volgt uit in de Unchecked, Checkeden Indeterminate statussen nadat we onze sjabloon hebben toegepast.
De visuele structuur van een besturingselement opgeven
Wanneer u een ControlTemplate-maakt, combineert u FrameworkElement--objecten om één enkele besturingselement te bouwen. Een ControlTemplate mag slechts één FrameworkElement hebben als hoofdelement. Het hoofdelement bevat meestal andere FrameworkElement-objecten . De combinatie van objecten vormt de visuele structuur van het besturingselement.
Met deze XAML maakt u een ControlTemplate voor een Selectievakje waarmee wordt aangegeven dat de inhoud van het besturingselement zich onder het selectievakje bevindt. Het hoofdelement is een rand. In het voorbeeld wordt een Pad opgegeven om een X- te maken die aangeeft dat een gebruiker het Selectievakjeheeft geselecteerd, en een Ellips die een onbepaalde status aangeeft. Houd er rekening mee dat de Dekking is ingesteld op 0 op het pad en de ellips, zodat ze standaard niet worden weergegeven.
Een TemplateBinding is een speciale binding die de waarde van een eigenschap in een besturingselementsjabloon koppelt aan de waarde van een andere weergegeven eigenschap op het sjabloonbesturingselement. TemplateBinding kan alleen worden gebruikt binnen een ControlTemplate-definitie in XAML. Zie de TemplateBinding Markup-extensie voor meer informatie.
Opmerking
Vanaf Windows 10, versie 1809 (SDK 17763), kunt u x:Bind-markeringsextensies gebruiken op plaatsen waar u TemplateBinding gebruikt. Zie de TemplateBinding Markup-extensie voor meer informatie.
<ControlTemplate x:Key="CheckBoxTemplate1" TargetType="CheckBox">
<Border BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Background="{TemplateBinding Background}">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="25"/>
</Grid.RowDefinitions>
<Rectangle x:Name="NormalRectangle" Fill="Transparent" Height="20" Width="20"
Stroke="{ThemeResource SystemControlForegroundBaseMediumHighBrush}"
StrokeThickness="{ThemeResource CheckBoxBorderThemeThickness}"
UseLayoutRounding="False"/>
<!-- Create an X to indicate that the CheckBox is selected. -->
<Path x:Name="CheckGlyph"
Data="M103,240 L111,240 119,248 127,240 135,240 123,252 135,264 127,264 119,257 111,264 103,264 114,252 z"
Fill="{ThemeResource CheckBoxForegroundThemeBrush}"
FlowDirection="LeftToRight"
Height="14" Width="16" Opacity="0" Stretch="Fill"/>
<Ellipse x:Name="IndeterminateGlyph"
Fill="{ThemeResource CheckBoxForegroundThemeBrush}"
Height="8" Width="8" Opacity="0" UseLayoutRounding="False" />
<ContentPresenter x:Name="ContentPresenter"
ContentTemplate="{TemplateBinding ContentTemplate}"
Content="{TemplateBinding Content}"
Margin="{TemplateBinding Padding}" Grid.Row="1"
HorizontalAlignment="Center"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Grid>
</Border>
</ControlTemplate>
Het visuele gedrag van een besturingselement opgeven
Een visueel gedrag geeft het uiterlijk van een besturingselement aan wanneer het zich in een bepaalde status bevindt. Het selectievakje controle heeft drie selectiestatussen: Checked, Uncheckeden Indeterminate. De waarde van de eigenschap IsChecked bepaalt de status van het selectievakje en de status bepaalt wat er in het vak wordt weergegeven.
Deze tabel bevat de mogelijke waarden van IsChecked, de bijbehorende statussen van het selectievakje en het uiterlijk van het selectievakje.
| IsChecked waarde | Status van het selectievakje | Selectievakje uiterlijk |
|---|---|---|
| waar | Checked |
Bevat een X. |
| onwaar | Unchecked |
Leeg. |
| nul | Indeterminate |
Bevat een cirkel. |
U geeft het uiterlijk van een besturingselement op wanneer het een bepaalde status heeft met behulp van VisualState-objecten. Een VisualState bevat een Setter of Storyboard waarmee het uiterlijk van de elementen in de ControlTemplatewordt gewijzigd. Wanneer het besturingselement de status invoert die de eigenschap VisualState.Name opgeeft, worden de wijzigingen in de eigenschap toegepast in de Setter of Storyboard. Wanneer het besturingselement de status verlaat, worden de wijzigingen verwijderd. U voegt VisualState-objecten toe aan VisualStateGroup-objecten . U voegt VisualStateGroup--objecten toe aan de bijgevoegde eigenschap VisualStateManager.VisualStateGroups, die u instelt op de root FrameworkElement van de ControlTemplate-.
Deze XAML toont de VisualState-objecten voor de Checked, Uncheckeden Indeterminate statussen. In het voorbeeld wordt de eigenschap VisualStateManager.VisualStateGroups gekoppeld op de Borderingesteld. Dit is het hoofdelement van de ControlTemplate-. De CheckedVisualState geeft aan dat de Opacity van het Pad met de naam CheckGlyph (die we in het vorige voorbeeld weergeven) 1 is. De IndeterminateVisualState geeft aan dat de Opaciteit van de Ellips met de naam IndeterminateGlyph gelijk aan 1 is. De UncheckedVisualState- heeft geen Setter- of Storyboard-, waardoor het selectievakje terugkeert naar de standaardweergave.
<ControlTemplate x:Key="CheckBoxTemplate1" TargetType="CheckBox">
<Border BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Background="{TemplateBinding Background}">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CheckStates">
<VisualState x:Name="Checked">
<VisualState.Setters>
<Setter Target="CheckGlyph.Opacity" Value="1"/>
</VisualState.Setters>
<!-- This Storyboard is equivalent to the Setter. -->
<!--<Storyboard>
<DoubleAnimation Duration="0" To="1"
Storyboard.TargetName="CheckGlyph" Storyboard.TargetProperty="Opacity"/>
</Storyboard>-->
</VisualState>
<VisualState x:Name="Unchecked"/>
<VisualState x:Name="Indeterminate">
<VisualState.Setters>
<Setter Target="IndeterminateGlyph.Opacity" Value="1"/>
</VisualState.Setters>
<!-- This Storyboard is equivalent to the Setter. -->
<!--<Storyboard>
<DoubleAnimation Duration="0" To="1"
Storyboard.TargetName="IndeterminateGlyph" Storyboard.TargetProperty="Opacity"/>
</Storyboard>-->
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="25"/>
</Grid.RowDefinitions>
<Rectangle x:Name="NormalRectangle" Fill="Transparent" Height="20" Width="20"
Stroke="{ThemeResource SystemControlForegroundBaseMediumHighBrush}"
StrokeThickness="{ThemeResource CheckBoxBorderThemeThickness}"
UseLayoutRounding="False"/>
<!-- Create an X to indicate that the CheckBox is selected. -->
<Path x:Name="CheckGlyph"
Data="M103,240 L111,240 119,248 127,240 135,240 123,252 135,264 127,264 119,257 111,264 103,264 114,252 z"
Fill="{ThemeResource CheckBoxForegroundThemeBrush}"
FlowDirection="LeftToRight"
Height="14" Width="16" Opacity="0" Stretch="Fill"/>
<Ellipse x:Name="IndeterminateGlyph"
Fill="{ThemeResource CheckBoxForegroundThemeBrush}"
Height="8" Width="8" Opacity="0" UseLayoutRounding="False" />
<ContentPresenter x:Name="ContentPresenter"
ContentTemplate="{TemplateBinding ContentTemplate}"
Content="{TemplateBinding Content}"
Margin="{TemplateBinding Padding}" Grid.Row="1"
HorizontalAlignment="Center"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Grid>
</Border>
</ControlTemplate>
Als u beter wilt weten hoe VisualState-objecten werken, moet u overwegen wat er gebeurt wanneer het selectievakje van de Unchecked status naar de Checked status gaat, vervolgens naar de Indeterminate status en vervolgens terug naar de Unchecked status. Dit zijn de overgangen.
| Statusovergang | Wat gebeurt er? | Uiterlijk van selectievakje wanneer de overgang is voltooid |
|---|---|---|
Van Unchecked tot Checked. |
De Setter-waarde van de CheckedVisualState- wordt toegepast, zodat de Opacity van CheckGlyph 1 is. |
Een X wordt weergegeven. |
Van Checked tot Indeterminate. |
De Setter-waarde van de IndeterminateVisualState- wordt toegepast, zodat de Opacity van IndeterminateGlyph 1 is. De Setter waarde van de CheckedVisualState- wordt verwijderd, dus de van CheckGlyph is 0. |
Er wordt een cirkel weergegeven. |
Van Indeterminate tot Unchecked. |
De waarde van de Setter van de IndeterminateVisualState is verwijderd, dus de Opacity van IndeterminateGlyph is 0. |
Er wordt niets weergegeven. |
Meer informatie over het maken van visuele toestanden voor besturingselementen, en met name over het gebruik van de Storyboard-klasse, en de animatietypen vindt u in Storyboarded animaties voor visuele toestanden.
Hulpprogramma's gebruiken om eenvoudig met thema's te werken
Een snelle manier om thema's toe te passen op uw bedieningselementen is door met de rechtermuisknop op een bedieningselement te klikken in het Microsoft Visual Studio documentoverzicht en Thema bewerken of Stijl bewerken te selecteren (afhankelijk van het geselecteerde bedieningselement). U kunt vervolgens een bestaand thema toepassen door Toepassen resource te selecteren of een nieuw thema te definiëren door Leeg aanmakente selecteren.
Besturingselementen en toegankelijkheid
Wanneer u een nieuwe sjabloon voor een besturingselement maakt, kunt u, naast het mogelijk wijzigen van het gedrag en het uiterlijk van het besturingselement, ook de weergave van het besturingselement wijzigen in toegankelijkheidsframeworks. De Windows-app ondersteunt het Microsoft UI Automation-framework voor toegankelijkheid. Alle standaardbesturingselementen en hun sjablonen hebben ondersteuning voor algemene typen en patronen voor UI Automation-besturingselementen die geschikt zijn voor het doel en de functie van het besturingselement. Deze besturingstypen en -patronen worden geïnterpreteerd door UI Automation-clients, zoals ondersteunende technologieën, en hierdoor kan een besturingselement toegankelijk zijn als onderdeel van een grotere gebruikersinterface van een toegankelijke app.
Als u de basisbeheerlogica wilt scheiden en ook wilt voldoen aan een aantal architectuurvereisten van UI Automation, bevatten besturingsklassen hun ondersteuning voor toegankelijkheid in een afzonderlijke klasse, een automatiseringspeering. De automatiseringspeeringen hebben soms interacties met de besturingssjablonen omdat de peers verwachten dat bepaalde benoemde onderdelen in de sjablonen aanwezig zijn, zodat functionaliteit zoals het inschakelen van ondersteunende technologieën om acties van knoppen aan te roepen mogelijk is.
Wanneer u een volledig nieuwe gebruikersbesturing maakt, wilt u soms ook een nieuwe automatiseringspeer maken om mee te gaan. Voor meer informatie, zie Aangepaste automatiseringspeers.
Meer informatie over de standaardsjabloon van een controle
In de onderwerpen die de stijlen en sjablonen voor XAML-besturingselementen documenteren, ziet u fragmenten van dezelfde XAML die u zou zien als u de Thema bewerken of Stijl bewerken technieken eerder uitgelegd had gebruikt. Elk onderwerp bevat de namen van de visuele statussen, de gebruikte themabronnen en de volledige XAML voor de stijl die de sjabloon bevat. De onderwerpen kunnen nuttige richtlijnen zijn als u al bent begonnen met het wijzigen van een sjabloon en wilt zien hoe de oorspronkelijke sjabloon eruitziet of om te controleren of de nieuwe sjabloon alle vereiste benoemde visuele statussen heeft.
Themabronnen in beheersjablonen
Voor sommige van de kenmerken in de XAML-voorbeelden hebt u mogelijk resourceverwijzingen gezien die gebruikmaken van de extensie voor markeringen van {ThemeResource}. Dit is een techniek waarmee één besturingssjabloon resources kan gebruiken die verschillende waarden kunnen zijn, afhankelijk van welk thema momenteel actief is. Dit is met name belangrijk voor borstels en kleuren, omdat het belangrijkste doel van de thema's is om gebruikers in staat te stellen te kiezen of ze een donker, licht of hoog contrastthema willen toepassen op het systeem over het algemeen. Apps die gebruikmaken van het XAML-resourcesysteem kunnen gebruikmaken van een resourceset die geschikt is voor dat thema, zodat de themakeuzen in de gebruikersinterface van een app overeenkomen met de door het systeembrede thema van de gebruiker gekozen thema.
De voorbeeldcode halen
Met ons samenwerken op GitHub
De bron voor deze inhoud vindt u op GitHub, waar u ook problemen en pull-aanvragen kunt maken en controleren. Bekijk onze gids voor inzenders voor meer informatie.
Windows developer