Úprava velikosti textu

Příklad škálování textu ve Windows 11 (100% až 225%)

Přehled

Čtení textu na obrazovce počítače může být pro mnoho lidí náročné. Naopak, někteří uživatelé považují velikosti písem používané v aplikacích a webech za větší, než je třeba.

Aby byl text co nejčednější pro nejširší škálu uživatelů, windows umožňuje uživatelům měnit relativní velikost písma v operačních systémech i v jednotlivých aplikacích. Místo použití aplikace lupy (která obvykle jenom zvětší všechno v oblasti obrazovky a představuje vlastní problémy s použitelností), změnou rozlišení displeje nebo spoléháním na škálování DPI (což mění velikost všeho na základě zobrazení a typické vzdálenosti), může uživatel rychle access nastavení pro změnu velikosti jenom textu v rozsahu 100% (výchozí velikost) až 225%.

Support

Aplikace WinUI ve výchozím nastavení podporují škálování textu.

Pokud vaše aplikace pro Windows obsahuje vlastní ovládací prvky, vlastní textové plochy, pevně zakódované výšky ovládacích prvků, starší architektury nebo architektury třetích stran, budete pravděpodobně muset provést některé aktualizace, abyste zajistili konzistentní a užitečné prostředí pro uživatele.

DirectWrite, GDI a XAML SwapChainPanels nativně nepodporují škálování textu, zatímco podpora Win32 je omezená na nabídky, ikony a panely nástrojů.

Uživatelské prostředí

Uživatelé můžou upravit měřítko textu pomocí posuvníku Zvětšit text na obrazovce Nastavení -> Usnadnění přístupu -> Zrak/Zobrazení.

Nastavení měřítka textu z Nastavení -> Usnadnění přístupu -> Obrazovka/Viditelnost

Návody pro uživatelskou zkušenost

Při změně velikosti textu musejí ovládací prvky a kontejnery také změnit velikost a přerozložit se, aby vyhovovaly textu a jeho novému rozvržení. Jak už jsme zmínili dříve, v závislosti na aplikaci, rozhraní a platformě se většina této práce provádí za vás. Následující doprovodné materiály k uživatelskému prostředí se týkají případů, kdy tomu tak není.

Použijte ovládací prvky platformy

Už jsme to řekli? Je vhodné to opakovat: Pokud je to možné, vždy používejte výchozí ovládací prvky poskytované různými frameworky aplikací pro Windows, abyste získali co nejkomplexnější uživatelské prostředí s co nejmenším úsilím.

Například všechny ovládací prvky textu WinUI podporují prostředí pro škálování celého textu bez jakéhokoli přizpůsobení nebo šablony.

Tady je fragment kódu ze základní aplikace WinUI, která obsahuje několik standardních ovládacích prvků textu:

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="Auto"/>
    </Grid.RowDefinitions>
    <TextBlock Grid.Row="0" 
                Style="{ThemeResource TitleTextBlockStyle}"
                Text="Text scaling test" 
                HorizontalTextAlignment="Center" />
    <Grid Grid.Row="1">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="Auto"/>
        </Grid.ColumnDefinitions>
        <Image Grid.Column="0" 
                Source="Assets/StoreLogo.png" 
                Width="450" Height="450"/>
        <StackPanel Grid.Column="1" 
                    HorizontalAlignment="Center">
            <TextBlock TextWrapping="WrapWholeWords">
                The quick brown fox jumped over the lazy dog.
            </TextBlock>
            <TextBox PlaceholderText="Type something here" />
        </StackPanel>
        <Image Grid.Column="2" 
                Source="Assets/StoreLogo.png" 
                Width="450" Height="450"/>
    </Grid>
    <TextBlock Grid.Row="2" 
                Style="{ThemeResource TitleTextBlockStyle}"
                Text="Text scaling test footer" 
                HorizontalTextAlignment="Center" />
</Grid>

Změna velikosti animovaného textu

Použijte automatické přizpůsobení velikosti

Nezadávejte absolutní velikosti ovládacích prvků. Kdykoli je to možné, nechte platformu změnit velikost ovládacích prvků automaticky na základě nastavení uživatele a zařízení.

V tomto fragmentu kódu z předchozího příkladu použijeme Auto hodnoty a * šířky pro sadu sloupců mřížky a necháme platformu upravit rozložení aplikace na základě velikosti prvků obsažených v mřížce.

<Grid.ColumnDefinitions>
    <ColumnDefinition Width="Auto"/>
    <ColumnDefinition Width="*"/>
    <ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>

Použití obtékání textu

Pokud chcete zajistit, aby rozložení aplikace bylo co nejflexibilnější a přizpůsobitelné, povolte obtékání textu v libovolném ovládacím prvku, který obsahuje text (mnoho ovládacích prvků ve výchozím nastavení nepodporuje obtékání textu).

Pokud nezadáte obtékání textu, platforma použije jiné metody k úpravě rozložení, včetně výřezu (viz předchozí příklad).

V této části používáme vlastnosti AcceptsReturn a TextWrapping TextBox k zajištění co nejflexibilnějšího rozložení.

<TextBox PlaceholderText="Type something here" 
          AcceptsReturn="True" TextWrapping="Wrap" />

Změna velikosti animovaného textu s obtékání textu

Určete chování oříznutí textu

Pokud obtékání textu není upřednostňovaným chováním, většina textových ovládacích prvků umožňuje buď text zkrátit, nebo zobrazit výpustku pro chování oříznutí textu. Přednost se dává ořezání před trojtečkami, protože trojtečky samy zabírají místo.

V tomto příkladu ukazujeme, jak oříznout text v TextBlock pomocí vlastnosti TextTrimming.

<TextBlock TextTrimming="Clip">
    The quick brown fox jumped over the lazy dog.
</TextBlock>

Škálování textu s oříznutím textu

Použijte tooltip

Pokud text oříznete, použijte bublinovou nápovědu k zobrazení celého textu uživatelům.

Tady přidáme tooltip k TextBlocku, který nepodporuje zalamování textu:

<TextBlock TextTrimming="Clip">
    <ToolTipService.ToolTip>
        <ToolTip Content="The quick brown fox jumped over the lazy dog."/>
    </ToolTipService.ToolTip>
    The quick brown fox jumped over the lazy dog.
</TextBlock>

Nezvětšujte ikony ani symboly založené na písmech

Při použití ikon založených na písmu pro zdůraznění nebo dekoraci zakažte škálování těchto znaků.

Nastavte Vlastnost IsTextScaleFactorEnabled pro false většinu ovládacích prvků XAML.

Podpora nativního škálování textu

Zpracování systémové události TextScaleFactorChanged UISettings ve vlastní rozhraní a ovládacích prvcích Tato událost se vyvolá pokaždé, když uživatel nastaví faktor měřítka textu v systému.

Shrnutí

Toto téma obsahuje přehled podpory škálování textu ve Windows a obsahuje uživatelské rozhraní a pokyny pro vývojáře, jak přizpůsobit uživatelské prostředí.

Související články

Referenční informace k rozhraní API

• IsTextScaleFactorEnabled
• TextScaleFactorChanged