Pemilih warna

  • Artikel

Pemilih warna digunakan untuk menelusuri dan memilih warna. Secara default, ini memungkinkan pengguna menavigasi melalui warna pada spektrum warna, atau menentukan warna dalam kotak teks Red-Green-Blue (RGB), Hue-Saturation-Value (HSV), atau Hexadesimal.

Pemilih warna default

Apakah ini kontrol yang tepat?

Gunakan pemilih warna untuk memungkinkan pengguna memilih warna di aplikasi Anda. Misalnya, gunakan untuk mengubah pengaturan warna, seperti warna font, latar belakang, atau warna tema aplikasi.

Jika aplikasi Anda untuk menggambar atau tugas serupa menggunakan pena, pertimbangkan untuk menggunakan kontrol Penintaan bersama dengan pemilih warna.

Rekomendasi

  • Pikirkan tentang pengalaman pemilihan warna seperti apa yang sesuai untuk aplikasi Anda. Beberapa skenario mungkin tidak memerlukan pemilihan warna terperinci dan akan mendapat manfaat dari pemilih yang disederhanakan
  • Untuk pengalaman pemilihan warna yang paling akurat, gunakan spektrum persegi dan pastikan setidaknya 256x256px, atau sertakan bidang input teks untuk memungkinkan pengguna memperbaiki warna yang dipilih.
  • Saat digunakan dalam flyout, mengetuk spektrum atau menyesuaikan penggeser saja tidak boleh melakukan pemilihan warna. Untuk menerapkan pilihan:
    • Berikan tombol penerapan dan batalkan untuk menerapkan atau membatalkan pilihan. Menekan tombol kembali atau mengetuk di luar flyout akan mematikannya, dan tidak menyimpan pilihan pengguna.
    • Atau, terapkan pilihan saat mematikan flyout, dengan mengetuk di luar flyout atau menekan tombol kembali.

UWP dan WinUI 2

Penting

Informasi dan contoh dalam artikel ini dioptimalkan untuk aplikasi yang menggunakan SDK Aplikasi Windows dan WinUI 3, tetapi umumnya berlaku untuk aplikasi UWP yang menggunakan WinUI 2. Lihat referensi API UWP untuk informasi dan contoh spesifik platform.

Bagian ini berisi informasi yang Anda butuhkan untuk menggunakan kontrol di aplikasi UWP atau WinUI 2.

Kontrol ColorPicker untuk aplikasi UWP disertakan sebagai bagian dari Windows UI Library 2. Untuk informasi selengkapnya, termasuk instruksi penginstalan, lihat Pustaka Windows UI. API untuk kontrol ini ada di namespace Windows.UI.Xaml.Controls dan Microsoft.UI.Xaml.Controls .

Sebaiknya gunakan WinUI 2 terbaru untuk mendapatkan gaya, templat, dan fitur terbaru untuk semua kontrol. WinUI 2.2 atau yang lebih baru menyertakan templat baru untuk kontrol ini yang menggunakan sudut bulat. Untuk informasi selengkapnya, lihat Radius sudut.

Untuk menggunakan kode dalam artikel ini dengan WinUI 2, gunakan alias di XAML (kami menggunakan muxc) untuk mewakili API Pustaka Windows UI yang disertakan dalam proyek Anda. Lihat Mulai menggunakan WinUI 2 untuk informasi selengkapnya.

xmlns:muxc="using:Microsoft.UI.Xaml.Controls"

<muxc:ColorPicker />

Membuat pemilih warna

Buka aplikasi Galeri WinUI 3 dan lihat ColorPicker beraksi.

Aplikasi WinUI 3 Gallery mencakup contoh interaktif sebagian besar kontrol, fitur, dan fungsi WinUI 3. Dapatkan aplikasi dari Microsoft Store atau dapatkan kode sumber di GitHub

Contoh ini menunjukkan cara membuat pemilih warna default di XAML.

<ColorPicker x:Name="myColorPicker"/>

Secara default, pemilih warna menunjukkan pratinjau warna yang dipilih pada bilah persegi panjang di samping spektrum warna. Anda dapat menggunakan peristiwa ColorChanged atau properti Warna untuk mengakses warna yang dipilih dan menggunakannya di aplikasi Anda. Lihat contoh berikut untuk kode terperinci.

Ikat ke warna yang dipilih

Ketika pemilihan warna harus segera berlaku, Anda dapat menggunakan pengikatan data untuk mengikat properti Warna, atau menangani peristiwa ColorChanged untuk mengakses warna yang dipilih dalam kode Anda.

Dalam contoh ini, Anda mengikat properti Warna dari SolidColorBrush yang digunakan sebagai Isian untuk Persegi panjang langsung ke warna pemilih warna yang dipilih. Setiap perubahan pada pemilih warna menghasilkan perubahan langsung pada properti terikat.

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

Contoh ini menggunakan pemilih warna yang disederhanakan hanya dengan lingkaran dan slider, yang merupakan pengalaman pemilihan warna "kasual" umum. Ketika perubahan warna dapat dilihat dan terjadi secara real-time pada objek yang terpengaruh, Anda tidak perlu menampilkan bilah pratinjau warna. Lihat bagian Kustomisasi pemilih warna untuk informasi selengkapnya.

Simpan warna yang dipilih

Dalam beberapa kasus, Anda tidak ingin segera menerapkan perubahan warna. Misalnya, saat Anda menghosting pemilih warna dalam flyout, kami sarankan Anda menerapkan warna yang dipilih hanya setelah pengguna mengonfirmasi pilihan atau menutup flyout. Anda juga dapat menyimpan nilai warna yang dipilih untuk digunakan nanti.

Dalam contoh ini, Anda menghosting pemilih warna di Flyout dengan tombol Konfirmasi dan Batalkan. Saat pengguna mengonfirmasi pilihan warna mereka, Anda menyimpan warna yang dipilih untuk digunakan nanti di aplikasi Anda.

<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();
}

Mengonfigurasi pemilih warna

Tidak semua bidang diperlukan untuk membiarkan pengguna memilih warna, sehingga pemilih warna fleksibel. Ini menyediakan berbagai opsi yang memungkinkan Anda mengonfigurasi kontrol agar sesuai dengan kebutuhan Anda.

Misalnya, ketika pengguna tidak memerlukan kontrol yang tepat, seperti memilih warna penyorot dalam aplikasi pengambilan catatan, Anda dapat menggunakan UI yang disederhanakan. Anda dapat menyembunyikan bidang entri teks dan mengubah spektrum warna menjadi lingkaran.

Ketika pengguna memang membutuhkan kontrol yang tepat, seperti di aplikasi desain grafis, Anda dapat menampilkan pengganda dan bidang entri teks untuk setiap aspek warna.

Tampilkan spektrum lingkaran

Contoh ini menunjukkan cara menggunakan properti ColorSpectrumShape untuk mengonfigurasi pemilih warna untuk menggunakan spektrum melingkar alih-alih persegi default.

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

Pemilih warna dengan spektrum lingkaran

Ketika Anda harus memilih antara spektrum warna persegi dan lingkaran, pertimbangan utama adalah akurasi. Pengguna memiliki lebih banyak kontrol saat mereka memilih warna tertentu menggunakan persegi karena lebih banyak gamut warna ditampilkan. Anda harus mempertimbangkan spektrum lingkaran sebagai lebih banyak pengalaman memilih warna "kasual".

Tampilkan saluran alfa

Dalam contoh ini, Anda mengaktifkan slider dan kotak teks opasitas pada pemilih warna.

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

Pemilih warna dengan IsAlphaEnabled diatur ke true

Tampilkan pemilih sederhana

Contoh ini menunjukkan cara mengonfigurasi pemilih warna dengan antarmuka pengguna sederhana untuk penggunaan "kasual". Anda menampilkan spektrum melingkar dan menyembunyikan kotak input teks default. Ketika perubahan warna dapat dilihat dan terjadi secara real-time pada objek yang terpengaruh, Anda tidak perlu menampilkan bilah pratinjau warna. Jika tidak, Anda harus membiarkan pratinjau warna terlihat.

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

Pemilih warna sederhana

Tentukan arah tata letak

Gunakan properti Orientasi untuk menentukan apakah ColorPicker harus selaras secara vertikal atau horizontal. Ini mempengaruhi lokasi kontrol pengeditan relatif terhadap spektrum warna. Secara default, orientasinya adalah Vertikal.

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

Pemilih warna dalam orientasi horizontal

Catatan

Jika Orientasi diatur ke Horizontal, ColorPicker tidak menerapkan properti IsMoreButtonVisible .

Tampilkan atau sembunyikan fitur tambahan

Tabel ini memperlihatkan semua opsi yang bisa Anda gunakan untuk mengonfigurasi kontrol ColorPicker.

Fitur Properti
Spektrum warna IsColorSpectrumVisible, ColorSpectrumShape, ColorSpectrumComponents
Pratinjau warna IsColorPreviewVisible
Nilai warna IsColorSliderVisible, IsColorChannelTextInputVisible
Nilai opasitas IsAlphaEnabled, IsAlphaSliderVisible, IsAlphaTextInputVisible
Nilai heksa IsHexInputVisible

Catatan

IsAlphaEnabled harus benar untuk menampilkan kotak teks dan penggeser opasitas. Visibilitas kontrol input kemudian dapat dimodifikasi menggunakan properti IsAlphaTextInputVisible dan IsAlphaSliderVisible. Lihat dokumentasi API untuk detailnya.

Dapatkan kode sampel