Metin ölçeklendirme

100% ile 225%metin ölçeklendirme örneğini gösteren Hero görüntüsü.
Windows 11 metin ölçeklendirme örneği (100% ile 225%)

Genel Bakış

Bilgisayar ekranında metin okumak birçok kişi için zor olabilir. Buna karşılık, bazı kullanıcılar uygulamalarda ve web sitelerinde kullanılan yazı tipi boyutlarının gerekliden daha büyük olduğunu fark eder.

En geniş kullanıcı aralığı için metnin mümkün olduğunca okunaklı olmasını sağlamak için Windows, kullanıcıların hem işletim sistemi hem de tek tek uygulamalarda göreli yazı tipi boyutunu değiştirmelerini sağlar. Bir büyüteç uygulaması kullanmak (genellikle yalnızca ekranın bir alanındaki her şeyi büyütüp kendi kullanılabilirlik sorunlarını ortaya çıkarır), ekran çözünürlüğünü değiştirmek veya DPI ölçeklendirmesine (her şeyi görüntüleme ve tipik görüntüleme mesafesine göre yeniden boyutlandıran) kullanmak yerine, kullanıcı yalnızca metni yeniden boyutlandırmak için 100% (varsayılan boyut) ile 225%arasında değişen bir ayarı hızla access.

Support

WinUI uygulamaları metin ölçeklendirmeyi varsayılan olarak destekler.

Windows uygulamanız özel denetimler, özel metin yüzeyleri, sabit kodlanmış denetim yükseklikleri, eski çerçeveler veya üçüncü taraf çerçeveler içeriyorsa, kullanıcılarınız için tutarlı ve kullanışlı bir deneyim sağlamak için büyük olasılıkla bazı güncelleştirmeler yapmanız gerekir.

DirectWrite, GDI ve XAML SwapChainPanels metin ölçeklendirmeyi yerel olarak desteklemezken, Win32 desteği menüler, simgeler ve araç çubuklarıyla sınırlıdır.

Kullanıcı deneyimi

Kullanıcılar, Ayarlar -> Erişim Kolaylığı -> Görme/Ekran ekranında metni büyüt kaydırıcısını kullanarak metin ölçeğini ayarlayabilir.

Ayarlar -> Erişim Kolaylığı -> Görme/Görüntü ekranı - Yazı tipi ölçek ayarı

UX kılavuzu

Metin yeniden boyutlandırıldıkça, denetimler ve kapsayıcılar da metni ve yeni düzenini alacak şekilde boyutlandırılmalı ve yeniden düzenlenmelidir. Daha önce belirtildiği gibi, uygulamaya, çerçeveye ve platforma bağlı olarak, bu işin büyük bir kısmı sizin için yapılır. Aşağıdaki UX kılavuzu, olmadığı durumları kapsar.

Platform denetimlerini kullanma

Bunu zaten mi dedik? Tekrar etmeye değer: Mümkün olduğunda, en az çaba için mümkün olan en kapsamlı kullanıcı deneyimini elde etmek için her zaman çeşitli Windows app çerçeveleriyle sağlanan yerleşik denetimleri kullanın.

Örneğin, tüm WinUI metin denetimleri herhangi bir özelleştirme veya şablon oluşturma olmadan tam metin ölçeklendirme deneyimini destekler.

Aşağıda, birkaç standart metin denetimi içeren temel bir WinUI uygulamasından bir kod parçacığı bulabilirsiniz:

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

Metnin %100'den %225'e ölçeklenmesi animasyonu.
Animasyonlu metin ölçeklendirme

Otomatik boyutlandırmayı kullanma

Denetimleriniz için mutlak boyutları belirtmeyin. Mümkün olduğunda, platformun kullanıcı ve cihaz ayarlarına göre denetimlerinizi otomatik olarak yeniden boyutlandırmasına izin verin.

Önceki örnekte yer alan bu kod parçacığında, ve genişlik değerlerini bir dizi kılavuz sütunu için kullanırız ve platformun, kılavuz içerisindeki öğelerin boyutuna göre uygulama düzenini ayarlamasına izin veririz.

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

Metin kaydırmayı kullanın

Uygulamanızın düzeninin olabildiğince esnek ve uyarlanabilir olduğundan emin olmak için, metin içeren herhangi bir denetimde metin kaydırmayı etkinleştirin (çoğu denetim metin kaydırmayı varsayılan olarak desteklemez).

Metin kaydırma belirtmezseniz, platform kırpma da dahil olmak üzere düzeni ayarlamak için başka yöntemler kullanır (önceki örne bakın).

Burada, ve TextBox özelliklerini kullanarak düzenimizin mümkün olduğunca esnek olduğundan emin oluruz.

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

Metin kaydırma ile 100%'den 225%'ye ölçeklendirme animasyonu.
Metin kaydırma ile animasyonlu metin ölçeklendirme

Metin kırpma davranışını belirtme

Tercih edilen davranış metin kaydırma değilse, çoğu metin kontrolü metninizi kırpmanıza veya metin kırpma davranışı için üç nokta (ellips) kullanmanıza olanak tanır. Kırpma, üç noktanın yer kaplaması nedeniyle tercih edilir.

Uyarı

Metninizi kırpmanız gerekiyorsa, dizenin başını değil sonunu kırpın.

Bu örnekte, TextTrimming özelliğini kullanarak TextBlock'ta metin kırpmayı göstereceğiz.

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

Metin kırpmasıyla 100% 225% metin ölçeklendirmesinin ekran görüntüsü.
Metin kırpma ile metin ölçeklendirme

Metni kırpacaksanız, kullanıcılarınıza tam metni sağlamak için bir araç ipucu kullanın.

Burada, metin kaydırmayı desteklemeyen bir TextBlock'a araç ipucu ekliyoruz:

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

Yazı tipi tabanlı simgeleri veya simgeleri ölçeklendirmeyin

Vurgu veya dekorasyon için yazı tipi tabanlı simgeler kullanırken, bu karakterler üzerinde ölçeklendirmeyi devre dışı bırakın.

Çoğu XAML denetimi için IsTextScaleFactorEnabled özelliğini olarak ayarlayın.