Skalowanie tekstu

Przykład skalowania tekstu w systemie Windows 11 (100% do 225%)

Przegląd

Odczytywanie tekstu na ekranie komputera (z urządzenia przenośnego do laptopa do monitora stacjonarnego na gigantycznym ekranie urządzenia Surface Hub) może być trudne dla wielu osób. Z drugiej strony niektórzy użytkownicy uważają, że rozmiary czcionek używane w aplikacjach i witrynach internetowych mają być większe niż jest to konieczne.

Aby zapewnić, że tekst jest tak czytelny, jak to możliwe dla najszerszego zakresu użytkowników, system Windows zapewnia użytkownikom możliwość zmiany względnego rozmiaru czcionki zarówno w systemie operacyjnym, jak i w poszczególnych aplikacjach. Zamiast korzystać z aplikacji powiększającej (która zazwyczaj po prostu powiększa wszystko w obszarze ekranu i wprowadza własne problemy z użytecznością), zmienia rozdzielczość ekranu lub polega na skalowaniu DPI (które zmienia wszystko na podstawie wyświetlanej i typowej odległości wyświetlania), użytkownik może szybko uzyskać dostęp do ustawienia zmiany rozmiaru tylko tekstu, począwszy od 100% (rozmiar domyślny) do 225%.

Support

Aplikacje uniwersalne systemu Windows (zarówno standardowe, jak i PWA) obsługują skalowanie tekstu domyślnie.

Jeśli aplikacja systemu Windows zawiera kontrolki niestandardowe, niestandardowe powierzchnie tekstowe, stałe wysokości kontrolek, starsze struktury lub struktury innych firm, prawdopodobnie trzeba będzie wprowadzić pewne aktualizacje, aby zapewnić spójne i przydatne środowisko dla użytkowników.

SwapChainPanele DirectWrite, GDI i XAML nie obsługują natywnie skalowania tekstu, natomiast obsługa Win32 jest ograniczona do menu, ikon i pasków narzędzi.

Doświadczenie użytkownika

Użytkownicy mogą dostosować skalę tekstu za pomocą suwaka Powiększ tekst na ekranie Ustawienia – Łatwość dostępu – Wizja/Wyświetlacz.

Ustawienie skalowania tekstu z ustawień —> Łatwość dostępu —> Ekran wizualny/wyświetlacz

Wskazówki dotyczące środowiska użytkownika

W miarę zmieniania rozmiaru tekstu kontrolki i kontenery muszą również zmieniać rozmiar i układ, aby pomieścić tekst i jego nowy układ. Jak wspomniano wcześniej, w zależności od aplikacji, frameworku i platformy, większość tej pracy jest wykonywana dla Ciebie. Poniższe wskazówki dotyczące doświadczenia użytkownika obejmują przypadki, w których nie jest to odpowiednie.

Korzystanie z kontrolek platformy

Czy powiedzieliśmy to już? Warto powtórzyć: Jeśli to możliwe, zawsze używaj wbudowanych kontrolek dostarczanych z różnymi strukturami aplikacji systemu Windows, aby uzyskać najbardziej kompleksowe środowisko użytkownika możliwe dla najmniejszej ilości wysiłku.

Na przykład wszystkie kontrolki tekstu platformy UWP obsługują środowisko skalowania pełnotekstowego bez dostosowywania ani tworzenia szablonów.

Oto fragment kodu z podstawowej aplikacji platformy UWP, która zawiera kilka standardowych kontrolek tekstu:

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

Animowane skalowanie tekstu

Użyj automatycznego dopasowywania rozmiaru

Nie określaj bezwzględnych rozmiarów kontrolek. Jeśli to możliwe, pozwól platformie na automatyczne zmienianie rozmiaru kontrolek na podstawie ustawień użytkownika i urządzenia.

W tym fragmencie z poprzedniego przykładu używamy wartości Auto i szerokości * dla zestawu kolumn w siatce, a platforma dostosowuje układ aplikacji na podstawie rozmiaru elementów zawartych w siatce.

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

Korzystanie z zawijania tekstu

Aby upewnić się, że układ aplikacji jest tak elastyczny, jak to możliwe, włącz zawijanie tekstu w dowolnej kontrolce zawierającej tekst (wiele kontrolek domyślnie nie obsługuje zawijania tekstu).

Jeśli nie określisz zawijania tekstu, platforma używa innych metod dostosowywania układu, w tym wycinków (zobacz poprzedni przykład).

W tym miejscu używamy właściwości TextBox AcceptsReturn i TextWrapping, aby upewnić się, że nasz układ jest możliwie jak najbardziej elastyczny.

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

Animowane skalowanie tekstu za pomocą zawijania tekstu

Określanie zachowania przycinania tekstu

Jeśli zawijanie tekstu nie jest preferowanym sposobem, większość kontrolek tekstu umożliwia ucięcie tekstu lub użycie wielokropka dla przycinania tekstu. Preferowanie wycinania zamiast wielokropków jest zalecane, ponieważ wielokropki same zajmują miejsce.

Uwaga / Notatka

Jeśli musisz obciąć tekst, odetnij koniec ciągu, a nie początek.

W tym przykładzie pokazano, jak wyciąć tekst w obiekcie TextBlock przy użyciu właściwości TextTrimming .

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

Skalowanie tekstu przy użyciu wycinków tekstu

Użyj podpowiedzi

Jeśli wyciąć tekst, użyj etykietki narzędzia , aby podać pełny tekst użytkownikom.

W tym miejscu dodajemy podpowiedź do elementu TextBlock, który nie obsługuje zawijania tekstu.

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

Nie skaluj ikon ani symboli opartych na czcionkach

W przypadku używania ikon opartych na czcionkach w celu wyróżnienia lub dekoracji wyłącz skalowanie tych znaków.

Ustaw właściwość IsTextScaleFactorEnabled na false wartość dla większości kontrolek XAML.

Obsługa natywnego skalowania tekstu

Obsługa zdarzenia systemu TextScaleFactorChanged UISettings w niestandardowej strukturze i kontrolkach. To zdarzenie jest wywoływane za każdym razem, gdy użytkownik ustawia współczynnik skalowania tekstu w systemie.

Podsumowanie

Ten temat zawiera omówienie obsługi skalowania tekstu w systemie Windows oraz wskazówki dla deweloperów i środowiska użytkownika dotyczące dostosowywania środowiska użytkownika.

Powiązane artykuły

Odniesienie do API

• IsTextScaleFactorEnabled
• ZmianaWspółczynnikaSkalowaniaTekstu