Sdílet prostřednictvím

Zobrazit zaměření

hlavní obrázek

Reveal Focus je světelný efekt určený pro velkoplošné zážitky, jako jsou herní konzole na televizních obrazovkách. Animuje ohraničení zaměřených prvků, jako jsou tlačítka, když uživatel přesune gamepad nebo fokus klávesnice na ně. Ve výchozím nastavení je vypnutý, ale je snadné ho povolit.

důležitá rozhraní API: vlastnost Application.FocusVisualKind, výčet FocusVisualKind, vlastnost Control.UseSystemFocusVisuals

Jak to funguje

Zobrazení fokusu upozorňuje na prvky s fokusem přidáním animované záře kolem ohraničení prvku:

Zobrazit vizuál

To je užitečné zejména ve scénářích s 10 stopami, kdy uživatel nemusí věnovat plnou pozornost celé televizní obrazovce.

Příklady

Aplikace WinUI 2 Gallery obsahuje interaktivní ukázky většiny ovládacích prvků, funkcí a vlastností WinUI 2. Získejte aplikaci z Microsoft Storu nebo získejte zdrojový kód na GitHubu.

Jak ji použít

Fokus je ve výchozím nastavení vypnutý. Chcete-li to povolit:

  1. V konstruktoru aplikace volejte vlastnost AnalyticsInfo.VersionInfo.DeviceFamily a zkontrolujte, jestli je Windows.Xboxaktuální řada zařízení .
  2. Pokud je rodina zařízení Windows.Xbox, nastavte vlastnost Application.FocusVisualKind na FocusVisualKind.Reveal.
    if(AnalyticsInfo.VersionInfo.DeviceFamily == "Windows.Xbox")
    {
        this.FocusVisualKind = FocusVisualKind.Reveal;
    }

Jakmile nastavíte FocusVisualKind vlastnost, systém automaticky použije efekt Zobrazit fokus na všechny ovládací prvky, jejichž UseSystemFocusVisuals vlastnost je nastavena na True (výchozí hodnota pro většinu ovládacích prvků).

Proč se ve výchozím nastavení nezobrazuje fokus?

Jak vidíte, je poměrně snadné zapnout funkci Zobrazit fokus, když aplikace zjistí, že běží na Xboxu. Tak proč to vám systém prostě nezapne? Vzhledem k tomu, že zobrazení fokusu zvětšuje velikost vizuálu fokusu, což může způsobit problémy s rozložením uživatelského rozhraní. V některých případech budete chtít přizpůsobit efekt odhalení zaostření a optimalizovat jej pro vaši aplikaci.

Přizpůsobení zobrazení fokusu

Efekt Zobrazit fokus můžete přizpůsobit úpravou vlastností vizuálu fokusu pro každý ovládací prvek: FocusVisualPrimaryThickness, FocusVisualSecondaryThickness, FocusVisualPrimaryBrusha FocusVisualSecondaryBrush. Tyto vlastnosti umožňují přizpůsobit barvu a tloušťku obdélníku fokusu. (Jedná se o stejné vlastnosti, které používáte k vytváření vizuálů s vysokou viditelností při zaostření.)

Než ho začnete přizpůsobovat, je užitečné nejprve vědět trochu více o komponentách, které tvoří Reveal Focus.

Výchozí vizuální prvky pro režim zobrazení Focus mají tři části: primární ohraničení, sekundární ohraničení a záře v režimu Reveal. Primární okraj je 2px tlustý a běží kolem mimo sekundárního ohraničení. Sekundární okraj je 1px tlustý a běží kolem uvnitř primárního ohraničení. Záře Zaměření odhalení má tloušťku úměrnou tloušťce primárního ohraničení a probíhá kolem vně primárního ohraničení.

Kromě statických prvků mají vizuály Reveal Focus animované světlo, které pulzuje v době klidu a pohybuje se ve směru zaměření při posunu.

Zobrazení vrstev fokusu

Přizpůsobení tloušťky ohraničení

Pokud chcete změnit tloušťku typů ohraničení ovládacího prvku, použijte tyto vlastnosti:

Typ ohraničení Vlastnictví
Primární, Záře FocusVisualPrimaryThickness
(Změna primárního okraje změní tloušťku záře úměrně.)
Sekundární FocusVisualSecondaryThickness

Tento příklad změní tloušťku ohraničení fokusu tlačítka:

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

Přizpůsobení okraje

Okraj je prostor mezi vizuálními hranicemi ovládacího prvku a začátkem sekundárního ohraničení vizuálních prvků zaměření. Výchozí okraj je 1px daleko od hranic ovládacího prvku. Tento okraj můžete upravit pro jednotlivé ovládací prvky změnou vlastnosti FocusVisualMargin :

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

Záporný okraj posune okraj od středu ovládacího prvku a kladný okraj přesune okraj blíž ke středu ovládacího prvku.

Přizpůsobení barvy

Pokud chcete změnit barvu vizuálu Zobrazit fokus, použijte vlastnosti FocusVisualPrimaryBrush a FocusVisualSecondaryBrush.

Vlastnictví Výchozí zdroj Výchozí hodnota zdroje
FocusVisualPrimaryBrush SystemControlRevealFocusVisualBrush SystemAccentColor
FocusVisualSecondaryBrush SystemControlFocusVisualSecondaryBrush SystemAltMediumColor

(Vlastnost FocusPrimaryBrush automaticky používá SystemControlRevealFocusVisualBrush zdroje, když je FocusVisualKind nastavena na Reveal. V opačném případě používá SystemControlFocusVisualPrimaryBrush.)

Pokud chcete změnit barvu vizuálu fokusu jednotlivých ovládacích prvků, nastavte vlastnosti přímo na ovládacím prvku. Tento příklad přepíše barvy fokusu tlačítka.


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

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

Pokud chcete změnit barvu všech vizuálních prvků zaostření v celé aplikaci, přepište zdroje SystemControlRevealFocusVisualBrush a SystemControlFocusVisualSecondaryBrush vaší vlastní definicí:

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

Další informace o úpravě barvy fokusu vizuálu najdete v tématu Branding a Přizpůsobení barev.

Zobrazit pouze svit

Pokud chcete použít pouze záření bez primárního nebo sekundárního vizuálu fokusu, jednoduše nastavte vlastnost FocusVisualPrimaryBrush na Transparent a FocusVisualSecondaryThickness na 0. V tomto případě záře přijme barvu pozadí ovládacího prvku, aby vytvořila pocit bez hranic. Tloušťku záře můžete změnit pomocí FocusVisualPrimaryThickness.


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

Použijte vlastní vizualizace zaměření

Dalším způsobem, jak přizpůsobit zobrazení fokusu, je vypnout systémové vizuály fokusu a nakreslit si vlastní pomocí vizuálních stavů. Další informace najdete v ukázce vizuálů „Focus“.

  • Last updated on