Focus onthullen

Reveal Focus is een lichteffect voor ervaringen op een afstand van 10 voet, zoals gameconsoles op televisieschermen. Het geeft een animatie aan de rand van focusbare elementen, zoals knoppen, wanneer de gebruiker de gamepad of toetsenbordfocus naar deze elementen verplaatst. Het is standaard uitgeschakeld, maar het is eenvoudig in te schakelen.

Belangrijke API's: eigenschap Application.FocusVisualKind, FocusVisualKind enum, eigenschap Control.UseSystemFocusVisuals

Hoe het werkt

Focus onthullen vestigt de aandacht op gerichte elementen door een geanimeerde gloed rond de rand van het element toe te voegen.

weergeven

Dit is vooral handig in scenario's waarbij de gebruiker op een afstand van ongeveer drie meter niet de volledige aandacht op het gehele tv-scherm heeft.

Voorbeelden

De WinUI 2 Gallery-app bevat interactieve voorbeelden van de meeste Besturingselementen, functies en functionaliteit van WinUI 2. Download de app uit de Microsoft Store of bezoek GitHubvoor de broncode.

Het gebruik ervan

Focusmodus voor onthullen staat standaard uit. U schakelt dit als volgt in:

1. Roep in de constructor van uw app de eigenschap AnalyticsInfo.VersionInfo.DeviceFamily aan en controleer of de huidige apparaatfamilie is Windows.Xbox.
2. Als de apparaatfamilie is Windows.Xbox, stelt u de eigenschap Application.FocusVisualKind in op FocusVisualKind.Reveal.

    if(AnalyticsInfo.VersionInfo.DeviceFamily == "Windows.Xbox")
    {
        this.FocusVisualKind = FocusVisualKind.Reveal;
    }

Nadat u de eigenschap FocusVisualKind hebt ingesteld, wordt het effect Reveal Focus automatisch toegepast op alle besturingselementen waarvan de eigenschap UseSystemFocusVisuals is ingesteld op True (de standaardwaarde voor de meeste besturingselementen).

Waarom is "Reveal Focus on" niet standaard ingeschakeld?

Zoals u kunt zien, is het vrij eenvoudig om De focus onthullen in te schakelen wanneer de app detecteert dat deze wordt uitgevoerd op een Xbox. Waarom schakelt het systeem het niet voor u in? Omdat 'Focus onthullen' de grootte van de focusweergave vergroot, wat problemen kan veroorzaken met uw UI-indeling. In sommige gevallen wilt u het 'Reveal Focus'-effect aanpassen om het te optimaliseren voor uw app.

Aanpassen van focusweergave

U kunt het Reveal Focus-effect aanpassen door de eigenschappen van de focusvisual voor elke controle te wijzigen: FocusVisualPrimaryThickness, FocusVisualSecondaryThickness, FocusVisualPrimaryBrushen FocusVisualSecondaryBrush. Met deze eigenschappen kunt u de kleur en dikte van de focusrechthoek aanpassen. (Het zijn dezelfde eigenschappen die u gebruikt voor het maken van visuals met hoge zichtbaarheid.)

Maar voordat u begint met personaliseren, is het handig om wat meer te weten te komen over de onderdelen die Reveal Focus vormen.

Er zijn drie onderdelen van de standaard Reveal Focus visuals: de primaire rand, de secundaire rand en de Reveal-gloed. De primaire rand is 2px dik en loopt rond de buitenkant van de secundaire rand. De secundaire rand is 1 pixels dik en loopt rond de binnenkant van de primaire rand. De gloed Van de Onthul focus heeft een dikte die evenredig is met de dikte van de primaire rand en loopt rond de buiten van de primaire rand.

Naast de statische elementen hebben Reveal Focus-visuals een geanimeerd licht dat pulseert wanneer het stilstaat en beweegt in de richting van de focus wanneer de focus zich verplaatst.

De randdikte aanpassen

Als u de dikte van de randtypen van een besturingselement wilt wijzigen, gebruikt u deze eigenschappen:

In dit voorbeeld wordt de randdikte van de focusvisual van een knop gewijzigd:

<Button FocusVisualPrimaryThickness="2" FocusVisualSecondaryThickness="1"/>

De marge aanpassen

De marge is de ruimte tussen de visuele grenzen van het besturingselement en het begin van de focusvisuals' secundaire rand. De standaardmarge is 1 pixel verwijderd van de rand van het controle-element. U kunt deze marge per controle bewerken door de eigenschap FocusVisualMargin te wijzigen:

<Button FocusVisualPrimaryThickness="2" FocusVisualSecondaryThickness="1" FocusVisualMargin="-3"/>

Een negatieve marge duwt de rand weg van het midden van het besturingselement en een positieve marge verplaatst de rand dichter bij het midden van het besturingselement.

De kleur aanpassen

Als u de kleur van de Reveal Focus-visual wilt wijzigen, gebruikt u de eigenschappen FocusVisualPrimaryBrush en FocusVisualSecondaryBrush.

(De eigenschap FocusPrimaryBrush is alleen standaard ingesteld op de SystemControlRevealFocusVisualBrush resources wanneer FocusVisualKind is ingesteld op Reveal. Anders wordt SystemControlFocusVisualPrimaryBrush gebruikt.)

Als u de kleur van de focusvisual van een afzonderlijk besturingselement wilt wijzigen, stelt u de eigenschappen rechtstreeks op het besturingselement in. In dit voorbeeld worden de focusvisualkleuren van een knop overschreven.

<!-- Specifying a color directly -->
<Button
    FocusVisualPrimaryBrush="DarkRed"
    FocusVisualSecondaryBrush="Pink"/>

<!-- Using theme resources -->
<Button
    FocusVisualPrimaryBrush="{ThemeResource SystemBaseHighColor}"
    FocusVisualSecondaryBrush="{ThemeResource SystemAccentColor}"/>    

Als u de kleur van alle focusvisuals in uw hele app wilt wijzigen, overschrijft u de resources SystemControlRevealFocusVisualBrush en SystemControlFocusVisualSecondaryBrush met uw eigen definitie:

<!-- App.xaml -->
<Application.Resources>

    <!-- Override Reveal Focus default resources. -->
    <SolidColorBrush x:Key="SystemControlRevealFocusVisualBrush" Color="{ThemeResource SystemBaseHighColor}"/>
    <SolidColorBrush x:Key="SystemControlFocusVisualSecondaryBrush" Color="{ThemeResource SystemAccentColor}"/>
</Application.Resources>

Zie Color Branding & Customizing voor meer informatie over het wijzigen van de kleur van de focusvisual.

Alleen de gloed weergeven

Als u alleen de gloed wilt gebruiken zonder de primaire of secundaire focusvisual, stelt u de eigenschap FocusVisualPrimaryBrush in op Transparent en de eigenschap FocusVisualSecondaryThickness op 0. In dit geval zal de gloed de kleur van de besturingsachtergrond aannemen om een randloos gevoel te bieden. U kunt de dikte van de gloed wijzigen met behulp van FocusVisualPrimaryThickness.

<!-- Show just the glow -->
<Button
    FocusVisualPrimaryBrush="Transparent"
    FocusVisualSecondaryThickness="0" />    

Je eigen focusafbeeldingen gebruiken

Een andere manier om Reveal Focus aan te passen, is door af te zien van de door het systeem geleverde focusweergaven door uw eigen visuele toestanden te tekenen. Zie het voorbeeld van focusvisuals voor meer informatie.

Verwante artikelen

• Interacties met gamepad en afstandsbediening
• voorbeeldvoorbeeld van Focusvisuals
• samenstellingseffecten
• Wetenschap in het Systeem: Vloeiend Ontwerp en Diepgang
• Wetenschap in het Systeem: Vloeiend Ontwerp en Licht