Aracılığıyla paylaş

Renk seçici

Renk seçici, renklere göz atmak ve renkleri seçmek için kullanılır. Varsayılan olarak, kullanıcının renk yelpazesindeki renklerde gezinmesini veya Kırmızı-Green-Blue (RGB), Ton-Saturation-Value (HSV) veya Onaltılık metin kutularında bir renk belirtmesini sağlar.

Varsayılan renk seçici

Doğru kontrol bu mu?

Kullanıcının uygulamanızdaki renkleri seçmesine izin vermek için renk seçiciyi kullanın. Örneğin, yazı tipi renkleri, arka plan veya uygulama teması renkleri gibi renk ayarlarını değiştirmek için bunu kullanın.

Uygulamanız kalem kullanarak çizim veya benzer görevlere yönelikse, Mürekkep oluşturma denetimlerini renk seçici ile birlikte kullanmayı göz önünde bulundurun.

Recommendations

  • Uygulamanız için ne tür bir renk seçme deneyiminin uygun olduğunu düşünün. Bazı senaryolar ayrıntılı renk toplama gerektirmeyebilir ve basitleştirilmiş bir seçiciden yararlanabilir
  • En doğru renk seçme deneyimi için kare spektrumu kullanın ve en az 256x256px olduğundan emin olun veya kullanıcıların seçilen renklerini iyileştirmelerini sağlamak için metin girişi alanlarını ekleyin.
  • Açılır öğede kullanıldığında, spektruma dokunmak veya kaydırıcıyı tek başına ayarlamak renk seçimini işlememelidir. Seçimi işlemek için:
    • Seçimi uygulamak veya iptal etmek için işleme ve iptal düğmeleri sağlayın. Geri düğmesine basmak veya açılır düğmenin dışına dokunmak bu düğmeyi kapatacak ve kullanıcının seçimini kaydetmeyecektir.
    • Alternatif olarak, açılır pencereyi kapatarak, açılır pencerenin dışına dokunarak veya geri düğmesine basarak seçimi onaylayın.

Renk seçici oluşturma

WinUI 3 Galeri uygulamasını açın ve ColorPicker'in nasıl çalıştığını görün

WinUI 3 Galeri simgesi WinUI 3 Galeri uygulaması, WinUI denetimlerinin ve özelliklerinin etkileşimli örneklerini içerir. uygulamayı Microsoft Store adresinden alın veya GitHub üzerindeki kaynak koduna göz atın.

Bu örnekte, XAML'de varsayılan renk seçicinin nasıl oluşturulacağı gösterilmektedir.

<ColorPicker x:Name="myColorPicker"/>

Varsayılan olarak, renk seçici seçilen rengin önizlemesini renk spektrumunun yanındaki dikdörtgen çubukta gösterir. Seçilen renge erişmek ve bunu uygulamanızda kullanmak için ColorChanged olayını veya Color özelliğini kullanabilirsiniz. Ayrıntılı kod için aşağıdaki örneklere bakın.

Seçilen renge bağlama

Renk seçiminin hemen etkili olması gerektiğinde, Color özelliğine veri bağlamayı kullanarak bağlanabilir veya seçilen renge erişmek için ColorChanged olayını kullanabilirsiniz.

Bu örnekte, Bir Dikdörtgen için Dolgu olarak kullanılan SolidColorBrush'ın Color özelliğini doğrudan renk seçicinin seçili rengine bağlarsınız. Renk seçicide yapılan herhangi bir değişiklik, ilişkili özellikte canlı bir değişiklikle sonuçlanır.

<ColorPicker x:Name="myColorPicker"
             ColorSpectrumShape="Ring"
             IsColorPreviewVisible="False"
             IsColorChannelTextInputVisible="False"
             IsHexInputVisible="False"/>

<Rectangle Height="50" Width="50">
    <Rectangle.Fill>
        <SolidColorBrush Color="{x:Bind myColorPicker.Color, Mode=OneWay}"/>
    </Rectangle.Fill>
</Rectangle>

Bu örnekte yalnızca daire ve kaydırıcı ile basitleştirilmiş bir renk seçici kullanılır ve bu da yaygın bir "gündelik" renk seçme deneyimidir. Etkilenen nesnede renk değişikliği gerçek zamanlı olarak görülebiliyor ve gerçekleşebiliyorsa, renk önizleme çubuğunu göstermeniz gerekmez. Daha fazla bilgi için renk seçiciyi özelleştirme bölümüne bakın.

Seçilen rengi kaydetme

Bazı durumlarda renk değişikliğini hemen uygulamak istemezsiniz. Örneğin, bir açılır öğede bir renk seçici barındırdığınızda, seçilen rengi yalnızca kullanıcı seçimi onayladıktan veya açılır öğeyi kapattıktan sonra uygulamanızı öneririz. Seçili renk değerini daha sonra kullanmak üzere de kaydedebilirsiniz.

Bu örnekte, Bir Açılır Öğede Onayla ve İptal düğmeleriyle bir renk seçici barındıracaksınız. Kullanıcı renk seçimini onayladığında, seçili rengi uygulamanızda daha sonra kullanmak üzere kaydedersiniz.

<Page.Resources>
    <Flyout x:Key="myColorPickerFlyout">
        <RelativePanel>
            <ColorPicker x:Name="myColorPicker"
                         IsColorChannelTextInputVisible="False"
                         IsHexInputVisible="False"/>

            <Grid RelativePanel.Below="myColorPicker"
                  RelativePanel.AlignLeftWithPanel="True"
                  RelativePanel.AlignRightWithPanel="True">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition/>
                    <ColumnDefinition/>
                </Grid.ColumnDefinitions>
                <Button Content="OK" Click="confirmColor_Click"
                        Margin="0,12,2,0" HorizontalAlignment="Stretch"/>
                <Button Content="Cancel" Click="cancelColor_Click"
                        Margin="2,12,0,0" HorizontalAlignment="Stretch"
                        Grid.Column="1"/>
            </Grid>
        </RelativePanel>
    </Flyout>
</Page.Resources>

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <Button x:Name="colorPickerButton"
            Content="Pick a color"
            Flyout="{StaticResource myColorPickerFlyout}"/>
</Grid>

private Color myColor;

private void confirmColor_Click(object sender, RoutedEventArgs e)
{
    // Assign the selected color to a variable to use outside the popup.
    myColor = myColorPicker.Color;

    // Close the Flyout.
    colorPickerButton.Flyout.Hide();
}

private void cancelColor_Click(object sender, RoutedEventArgs e)
{
    // Close the Flyout.
    colorPickerButton.Flyout.Hide();
}

Renk seçiciyi yapılandırma

Bir kullanıcının renk seçmesine izin vermek için tüm alanlar gerekli değildir, bu nedenle renk seçici esnektir. Denetimi gereksinimlerinize uyacak şekilde yapılandırmanıza olanak sağlayan çeşitli seçenekler sunar.

Örneğin, kullanıcının not alma uygulamasında vurgulayıcı rengi seçme gibi hassas bir denetime ihtiyacı olmadığında, basitleştirilmiş bir kullanıcı arabirimi kullanabilirsiniz. Metin girişi alanlarını gizleyebilir ve renk spektrumunu daire olarak değiştirebilirsiniz.

Kullanıcının grafik tasarım uygulamasında olduğu gibi hassas denetime ihtiyacı olduğunda, rengin her yönü için hem kaydırıcıları hem de metin girişi alanlarını gösterebilirsiniz.

Daire spektrumunu gösterme

Bu örnekte, renk seçiciyi varsayılan kare yerine dairesel bir spektrum kullanacak şekilde yapılandırmak için ColorSpectrumShape özelliğinin nasıl kullanılacağı gösterilmektedir.

<ColorPicker x:Name="myColorPicker"
             ColorSpectrumShape="Ring"/>

Daire spektrumlu bir renk seçici

Kare ve daire renk spektrumu arasında seçim yapmanız gerektiğinde, öncelikli olarak doğruluk dikkate alınır. Bir kullanıcının kare kullanarak belirli bir rengi seçtiğinde daha fazla denetimi vardır çünkü renk gamutunun daha fazlası gösterilir. Daire spektrumunu daha çok "gündelik" renk seçimi deneyimi olarak düşünmelisiniz.

Alfa kanalını gösterme

Bu örnekte, renk seçicide opaklık kaydırıcısını ve metin kutusunu etkinleştirebilirsiniz.

<ColorPicker x:Name="myColorPicker"
             IsAlphaEnabled="True"/>

IsAlphaEnabled özelliği true olarak ayarlanmış bir renk seçici

Basit bir seçici göster

Bu örnekte renk seçiciyi "gündelik" kullanım için basit bir kullanıcı arabirimiyle yapılandırma gösterilmektedir. Dairesel spektrumu gösterir ve varsayılan metin giriş kutularını gizlersiniz. Etkilenen nesnede renk değişikliği gerçek zamanlı olarak görülebiliyor ve gerçekleşebiliyorsa, renk önizleme çubuğunu göstermeniz gerekmez. Aksi takdirde, renk önizlemesini görünür bırakmanız gerekir.

<ColorPicker x:Name="myColorPicker"
             ColorSpectrumShape="Ring"
             IsColorPreviewVisible="False"
             IsColorChannelTextInputVisible="False"
             IsHexInputVisible="False"/>

Basit bir renk seçici

Düzen yönünü belirtme

ColorPicker'ın dikey veya yatay olarak hizalanıp hizalanmayacağını belirtmek için Orientation özelliğini kullanın. Bu, düzenleme denetimlerinin renk spektrumuyla ilgili konumunu etkiler. Yönlendirme varsayılan olarak Dikey'dir.

<ColorPicker IsAlphaEnabled="True" 
             Orientation="Horizontal"/>

Yatay yönde bir renk seçici

Uyarı

Yönlendirme Yatay olarak ayarlanırsa, ColorPicker IsMoreButtonVisible özelliğini uygulamaz .

Ek özellikleri gösterme veya gizleme

Bu tabloda ColorPicker denetimini yapılandırmak için kullanabileceğiniz tüm seçenekler gösterilir.

Özellik Özellikler
Renk spektrumu RenkSpektrumuGörünürMü, RenkSpektrumuŞekli, RenkSpektrumuBileşenleri
Renk önizlemesi RenkÖnizlemesiGörünürMü
Renk değerleri Renk Kaydırıcısı Görünür, Renk Kanalı Metin Girişi Görünür
Opaklık değerleri AlphaAktif, AlphaKaydırmaÇubuğuGörünür, AlphaMetinGirişiGörünür
Onaltılık değerler HexGirişiGörünürMü

Uyarı

Opaklık metin kutusunu ve kaydırıcıyı göstermek için IsAlphaEnabled true olmalıdır. Ardından, giriş denetimlerinin görünürlüğü IsAlphaTextInputVisible ve IsAlphaSliderVisible özellikleri kullanılarak değiştirilebilir. Ayrıntılar için API belgelerine bakın.

  • Last updated on