Windows uygulamalarında tema özelleştirme

Windows uygulamalar açık ve koyu temaları destekler ve uygulamanızın kullanıcının tema tercihine nasıl yanıt vereceğini özelleştirebilirsiniz. Bu makalede temaları değiştirme, tema fırçalarını kullanma, tema renklerini özelleştirme ve renk API'siyle çalışma konuları açıklanmıştır.

Tasarım kılavuzu için, rengi etkili bir şekilde kullanmak adına Windows'ta Renk konusuna bakın.

WinUI Galerisi uygulamasını açın ve Renkler'in nasıl çalıştığını görün

Temayı değiştirme

Dosyanızdaki RequestedTheme özelliğini değiştirerek temaları değiştirebilirsiniz App.xaml .

<Application
    x:Class="App9.App"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:App9"
    RequestedTheme="Dark">
</Application>

RequestedTheme özelliğinin kaldırılması, uygulamanızın kullanıcının sistem ayarlarını kullanacağı anlamına gelir.

Kullanıcılar, arabirimin daha kolay görülmesini sağlayan küçük bir karşıtlık renkleri paleti kullanan yüksek karşıtlık temasını da seçebilir. Bu durumda sistem RequestedTheme'nizi geçersiz kılar.

Temaları test etme

Uygulamanız için tema istemezseniz uygulamanızın her koşulda okunaklı olmasını sağlamak için uygulamanızı hem açık hem de koyu temalarda test edin.

Tema fırçaları

Ortak denetimler, açık ve koyu temalarda karşıtlığı ayarlamak için tema fırçalarını otomatik olarak kullanır.

Örneğin, AutoSuggestBox'ın tema fırçalarını nasıl kullandığını gösteren bir çizim aşağıda verilmişti:

Tema fırçalarını kullanma

Özel denetimler için şablon oluştururken, sabit kod rengi değerleri yerine tema fırçalarını kullanın. Bu şekilde, uygulamanız herhangi bir temaya kolayca uyarlanabilir.

Örneğin, ListView için bu öğe şablonları özel bir şablonda tema fırçalarının nasıl kullanılacağını gösterir.

ile

<ListView ItemsSource="{x:Bind ViewModel.Recordings}">
    <ListView.ItemTemplate>
        <DataTemplate x:Name="DoubleLineDataTemplate" x:DataType="local:Recording">
            <StackPanel Orientation="Horizontal" Height="64" AutomationProperties.Name="{x:Bind CompositionName}">
                <Ellipse Height="48" Width="48" VerticalAlignment="Center">
                    <Ellipse.Fill>
                        <ImageBrush ImageSource="Placeholder.png"/>
                    </Ellipse.Fill>
                </Ellipse>
                <StackPanel Orientation="Vertical" VerticalAlignment="Center" Margin="12,0,0,0">
                    <TextBlock Text="{x:Bind CompositionName}" Style="{ThemeResource BodyStrongTextBlockStyle}" Foreground="{ThemeResource TextFillColorPrimaryBrush}" />
                    <TextBlock Text="{x:Bind ArtistName}" Style="{ThemeResource BodyTextBlockStyle}" Foreground="{ThemeResource TextFillColorTertiaryBrush}"/>
                </StackPanel>
            </StackPanel>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

Uygulamanızda tema fırçalarını kullanma hakkında daha fazla bilgi için bkz. Tema Kaynakları.

Vurgu renkleri

Yaygın denetimler, durum bilgilerini iletmek için bir vurgu rengi kullanır. Varsayılan olarak, vurgu rengi kullanıcıların Ayarları'nda seçtiği renktir SystemAccentColor . Ancak, uygulamanızın tema rengini markanızı yansıtacak şekilde de özelleştirebilirsiniz.

Vurgu rengini geçersiz kılma

Uygulamanızın vurgulu rengini değiştirmek için aşağıdaki kodu app.xaml yerleştirin.

<Application.Resources>
    <ResourceDictionary>
        <Color x:Key="SystemAccentColor">#107C10</Color>
    </ResourceDictionary>
</Application.Resources>

Tema rengi seçme

Uygulamanız için özel bir tema rengi seçerseniz, lütfen tema rengini kullanan metin ve arka planların en iyi okunabilirlik için yeterli karşıtlıkta olduğundan emin olun. Karşıtlığı test etmek için Windows Ayarlar'da renk seçici aracını veya bu online karşıtlık araçlarını kullanabilirsiniz.

Aksan rengi paleti

Windows kabuğundaki bir tema rengi algoritması, vurgu renginin açık ve koyu tonlarını oluşturur.

Bu gölgelere tema kaynaklarıolarak erişilebilir.

• SystemAccentColorLight3
• SystemAccentColorLight2
• SystemAccentColorLight1
• SystemAccentColorDark1
• SystemAccentColorDark2
• SystemAccentColorDark3

Ayrıca UISettings.GetColorValue yöntemi ve UIColorType sabit listesi ile vurgu rengi paletine program aracılığıyla erişebilirsiniz.

Uygulamanızda renk temaları için vurgu rengi paletini kullanabilirsiniz. Aşağıda, bir düğmede vurgu rengi paletini nasıl kullanabileceğinize ilişkin bir örnek verilmiştir.

<Page.Resources>
    <ResourceDictionary>
        <ResourceDictionary.ThemeDictionaries>
            <ResourceDictionary x:Key="Light">
                <SolidColorBrush x:Key="ButtonBackground" Color="{ThemeResource SystemAccentColor}"/>
                <SolidColorBrush x:Key="ButtonBackgroundPointerOver" Color="{ThemeResource SystemAccentColorLight1}"/>
                <SolidColorBrush x:Key="ButtonBackgroundPressed" Color="{ThemeResource SystemAccentColorDark1}"/>
            </ResourceDictionary>
        </ResourceDictionary.ThemeDictionaries>
    </ResourceDictionary>
</Page.Resources>

<Button Content="Button"></Button>

Renkli arka planda renkli metin kullanırken, metinle arka plan arasında yeterli karşıtlık olduğundan emin olun. Varsayılan olarak, köprü veya köprü metni vurgulama rengini kullanır. Arka plana tema renginin çeşitlemelerini uygularsanız, renkli arka plandaki renkli metnin karşıtlığını iyileştirmek için özgün tema renginin bir varyasyonunu kullanmanız gerekir.

Aşağıdaki grafikte, vurgu renginin çeşitli açık/koyu tonlarına dair bir örnek ve renkli bir yüzeye renkli yazının nasıl uygulanabileceği gösterilmektedir.

Stil denetimleri hakkında daha fazla bilgi için bkz. XAML stilleri.

Renk API'si

Uygulamanıza renk eklemek için kullanılabilecek çeşitli API'ler vardır. İlk olarak, önceden tanımlanmış renklerin büyük bir listesini uygulayan Colors sınıfı. Bunlara XAML özellikleriyle otomatik olarak erişilebilir. Aşağıdaki örnekte bir düğme oluşturup arka plan ve ön plan renk özelliklerini Colors sınıfının üyelerine ayarlayacağız.

<Button Background="MediumSlateBlue" Foreground="White">Button text</Button>

XAML'deki Renk yapısını kullanarak RGB veya onaltılık değerlerden kendi renklerinizi oluşturabilirsiniz.

<Color x:Key="LightBlue">#FF36C0FF</Color>

FromArgb yöntemini kullanarak kodda aynı rengi de oluşturabilirsiniz.

Color LightBlue = Color.FromArgb(255,54,192,255);

Windows::UI::Color LightBlue = Windows::UI::ColorHelper::FromArgb(255,54,192,255);

"Argb" harfleri, bir rengin dört bileşeni olan Alfa (opaklık), Kırmızı, Yeşil ve Mavi'yi ifade eder. Her bağımsız değişken 0 ile 255 arasında değişebilir. İlk değeri atlayabilirsiniz; bu da size varsayılan olarak 255 veya 100% opaklık verir.

Uyarı

C++ kullanıyorsanız ColorHelper sınıfını kullanarak renkler oluşturmanız gerekir.

Color için en yaygın kullanım, SolidColorBrushiçin ui öğelerini tek bir düz renge boyamak için kullanılabilen bir bağımsız değişkendir. Bu fırçalar genellikle bir ResourceDictionary içinde tanımlanır, bu nedenle birden çok öğe için yeniden kullanılabilirler.

<ResourceDictionary>
    <SolidColorBrush x:Key="ButtonBackgroundBrush" Color="#FFFF4F67"/>
    <SolidColorBrush x:Key="ButtonForegroundBrush" Color="White"/>
</ResourceDictionary>

Fırçaları kullanma hakkında daha fazla bilgi için bkz. XAML fırçaları.

Related

• Windows'ta Renk
• XAML Stilleri
• XAML Tema Kaynakları