TextskalierungText scaling

Hero Image zeigt ein Beispiel für die Text Skalierung zwischen 100% und 225% an.Hero image showing an example of text scaling from 100% to 225%.
Beispiel für die Text Skalierung in Windows 10 (100% bis 225%)Example of text scaling in Windows 10 (100% to 225%)

ÜbersichtOverview

Das Lesen von Text auf einem Computerbildschirm (vom mobilen Gerät zum Laptop zum Desktop Monitor auf den riesigen Bildschirm einer Surface Hub) kann für viele Personen eine Herausforderung darstellen.Reading text on a computer screen (from mobile device to laptop to desktop monitor to the giant screen of a Surface Hub) can be challenging for many people. Im Gegensatz dazu finden einige Benutzer die Schriftart Größen, die in apps und Websites verwendet werden, um größer als notwendig zu sein.Conversely, some users find the font sizes used in apps and web sites to be larger than necessary.

Um sicherzustellen, dass der Text für die breiteste Palette von Benutzern so lesbar ist wie möglich, bietet Windows die Möglichkeit, die relative Schriftgröße sowohl im Betriebssystem als auch in den einzelnen Anwendungen zu ändern.To ensure text is as legible as possible for the broadest range of users, Windows provides the ability for users to change relative font size across both the OS and individual applications. Statt eine Bildschirmlupen-App zu verwenden(die normalerweise einfach alles in einem Bereich des Bildschirms vergrößert und eigene Nutzbarkeitsprobleme mit sich bringt), die Bildschirmauflösung zu ändern oder sich auf die DPI-Skalierung zu verlassen (bei der die Größen aller Elemente anhand der Anzeige und des typischen Betrachtungsabstands geändert werden), kann ein Benutzer schnell auf eine Einstellung zugreifen, um nur die Textgröße im Bereich von 100 % (Standardgröße) bis zu 225 % zu ändern.Instead of using a magnifier app (which typically just enlarges everything within an area of the screen and introduces its own usability issues), changing display resolution, or relying on DPI scaling (which resizes everything based on display and typical viewing distance), a user can quickly access a setting to resize just text, ranging from 100% (the default size) up to 225%.

SupportSupport

Universelle Windows-Anwendungen (Standard und PWA) unterstützen standardmäßig die Text Skalierung.Universal Windows applications (both standard and PWA), support text scaling by default.

Wenn Ihre Windows-Anwendung benutzerdefinierte Steuerelemente, benutzerdefinierte Text Oberflächen, hart codierte Steuerelement Höhen, ältere Frameworks oder Drittanbieter-Frameworks umfasst, müssen Sie wahrscheinlich einige Updates vornehmen, um eine konsistente und nützliche Umgebung für Ihre Benutzer zu gewährleisten.If your Windows application includes custom controls, custom text surfaces, hard-coded control heights, older frameworks, or 3rd party frameworks, you likely have to make some updates to ensure a consistent and useful experience for your users.

DirectWrite, GDI und XAML-Austausch Vorgänge unterstützen die Text Skalierung nicht nativ, während die Win32-Unterstützung auf Menüs, Symbole und Symbolleisten beschränkt ist.DirectWrite, GDI, and XAML SwapChainPanels do not natively support text scaling, while Win32 support is limited to menus, icons, and toolbars.

BenutzererfahrungUser experience

Benutzer können die textskala mit dem Schieberegler größeren Text vergrößern auf der Seite Einstellungen > Easy of Access-> Vision/Anzeige Bildschirm anpassen.Users can adjust text scale with the Make text bigger slider on the Settings -> Ease of Access -> Vision/Display screen.

Screenshot der Seite mit dem Bildschirm für die Benutzerfreundlichkeit/Anzeigeeinstellungen mit dem Schieberegler größeren Text erstellenScreenshot of the Ease of Access Vision/Display settings page showing the Make text bigger slider.
Textskalierungs Einstellung von Einstellungen-> Easy of Access-> Vision/Anzeige BildschirmText scale setting from Settings -> Ease of Access -> Vision/Display screen

Erläuterungen zur BenutzeroberflächeUX guidance

Wenn die Größe der Text Größe geändert wird, müssen Steuerelemente und Container auch die Größe und den Ablauf ändern, um den Text und das neue Layout zu unterstützen.As text is resized, controls and containers must also resize and reflow to accommodate the text and its new layout. Wie bereits erwähnt, werden in Abhängigkeit von der APP, dem Framework und der Plattform viele dieser Aufgaben für Sie erledigt.As mentioned previously, depending on the app, framework, and platform, much of this work is done for you. Die folgende UX-Anleitung behandelt die Fälle, in denen dies nicht der Fall ist.The following UX guidance covers those cases where it's not.

Verwenden der Platt Form SteuerelementeUse the platform controls

Haben wir das bereits gesagt?Did we say this already? Es lohnt sich, sich zu wiederholen: Wenn möglich, verwenden Sie immer die integrierten Steuerelemente, die mit den verschiedenen Windows-App-Frameworks bereitgestellt werden, um für den geringsten Aufwand eine möglichst umfassende Benutzerumgebung zu erhalten.It's worth repeating: When possible, always use the built-in controls provided with the various Windows app frameworks to get the most comprehensive user experience possible for the least amount of effort.

Beispielsweise unterstützen alle UWP-Text Steuerelemente die vollständige Text Skalierung ohne Anpassung oder Vorlagen.For example, all UWP text controls support the full text scaling experience without any customization or templating.

Im folgenden finden Sie einen Ausschnitt aus einer grundlegenden UWP-APP, die einige Standardtext Steuerelemente umfasst:Here's a snippet from a basic UWP app that includes a couple of standard text controls:

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

Animation von Text Skalierung 100% bis 225%.Animation of text scaling 100% to 225%.
Animierte Text SkalierungAnimated text scaling

Verwenden der automatischen GrößenanpassungUse auto-sizing

Geben Sie keine absoluten Größen für Ihre Steuerelemente an.Don't specify absolute sizes for your controls. Lassen Sie die Größe der Plattform nach Möglichkeit automatisch basierend auf den Benutzer-und Geräteeinstellungen ändern.Whenever possible, let the platform resize your controls automatically based on user and device settings.

In diesem Code Ausschnitt aus dem vorherigen Beispiel verwenden wir die Auto Width- * Werte und für einen Satz von Raster Spalten und ermöglichen der Plattform das Anpassen des App-Layouts basierend auf der Größe der im Raster enthaltenen Elemente.In this snippet from the previous example, we use the Auto and * width values for a set of grid columns and let the platform adjust the app layout based on the size of the elements contained within the grid.

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

Verwenden von Text WrappingUse text wrapping

Um sicherzustellen, dass das Layout Ihrer APP so flexibel und anpassungsfähig wie möglich ist, aktivieren Sie das Umwickeln von Text in jedem Steuerelement, das Text enthält (viele Steuerelemente unterstützen standardmäßig keine Text Umbrüchen).To ensure the layout of your app is as flexible and adaptable as possible, enable text wrapping in any control that contains text (many controls do not support text wrapping by default).

Wenn Sie Text umschließen nicht angeben, verwendet die Plattform andere Methoden, um das Layout anzupassen, einschließlich Clipping (siehe vorheriges Beispiel).If you don't specify text wrapping, the platform uses other methods to adjust the layout, including clipping (see previous example).

Hier verwenden wir die AcceptsReturn TextWrapping Text Feldeigenschaften und, um sicherzustellen, dass unser Layout so flexibel wie möglich ist.Here, we use the AcceptsReturn and TextWrapping TextBox properties to ensure our layout is as flexible as possible.

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

Animation von Text Skalierung von 100% bis 225% mit Text Umbrüchen.Animation of text scaling 100% to 225% with text wrapping.
Animierte Text Skalierung mit Text WrappingAnimated text scaling with text wrapping

Textkürzungs Verhalten angebenSpecify text trimming behavior

Wenn Text Wrapping nicht das bevorzugte Verhalten ist, können Sie mit den meisten Text Steuerelementen entweder Ihren Text ausschneiden oder Ellipsen für das Text Kürzungs Verhalten angeben.If text wrapping is not the preferred behavior, most text controls let you either clip your text or specify ellipses for the text trimming behavior. Das Clipping wird als Auslassungs Zeichen bevorzugt, da Ellipsen selbst Platz belegen.Clipping is preferred to ellipses as ellipses take up space themselves.

Hinweis

Wenn Sie den Text Abschneiden müssen, schneiden Sie das Ende der Zeichenfolge ab, nicht den Anfang.If you need to clip your text, clip the end of the string, not the beginning.

In diesem Beispiel zeigen wir, wie Sie Text in einem TextBlock mithilfe der texttrimmen -Eigenschaft abschneiden.In this example, we show how to clip text in a TextBlock using the TextTrimming property.

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

Screenshot von Text Skalierung von 100% bis 225% mit Text Clipping.Screenshot of text scaling 100% to 225% with text clipping.
Text Skalierung mit Text ClippingText scaling with text clipping

Verwenden einer QuickInfoUse a tooltip

Wenn Sie Text abschneiden, verwenden Sie eine QuickInfo, um Ihren Benutzern den vollständigen Text bereitzustellen.If you clip text, use a tooltip to provide the full text to your users.

Hier fügen wir eine QuickInfo zu einem TextBlock hinzu, der keine Text Umbrüchen unterstützt:Here, we add a tooltip to a TextBlock that doesn't support text wrapping:

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

Schriftart basierte Symbole oder Symbole nicht skalierenDon’t scale font-based icons or symbols

Wenn Sie Schriftart basierte Symbole für die Betonung oder Ergänzung verwenden, deaktivieren Sie die Skalierung für diese Zeichen.When using font-based icons for emphasis or decoration, disable scaling on these characters.

Legen Sie für die meisten XAML-Steuerelemente die Eigenschaft istextscalefactor aktiviert auf fest false .Set the IsTextScaleFactorEnabled property to false for most XAML controls.

Unterstützung von nativer Text SkalierungSupport text scaling natively

Behandeln Sie das " textscalefactorchanged uisettings"-System Ereignis in Ihrem benutzerdefinierten Framework und in den Steuerelementen.Handle the TextScaleFactorChanged UISettings system event in your custom framework and controls. Dieses Ereignis wird jedes Mal ausgelöst, wenn der Benutzer den Faktor für die Text Skalierung auf dem System festlegt.This event is raised each time the user sets the text scaling factor on their system.

ZusammenfassungSummary

Dieses Thema enthält eine Übersicht über die Unterstützung von Text Skalierungen in Windows und enthält Anleitungen und Anleitungen für Entwickler zur Anpassung der Benutzerfreundlichkeit.This topic provides an overview of text scaling support in Windows and includes UX and developer guidance on how to customize the user experience.

API-ReferenzAPI reference