Pemilih warna

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 Merah-Hijau-Biru (RGB), Hue-Saturation-Value (HSV), atau Heksadesimal.

Apakah ini kontrol yang tepat?

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

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

Recommendations

• Pikirkan tentang jenis pengalaman pemilihan warna 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, menekan spektrum atau menyesuaikan penggeser saja tidak boleh mengkonfirmasi pemilihan warna. Untuk menerapkan pilihan:
  • Berikan tombol untuk menerapkan dan membatalkan pilihan. Menekan tombol kembali atau mengetuk di luar flyout akan menutupnya, dan tidak menyimpan pilihan pengguna.
  • Atau, terapkan pilihan saat menutup flyout, dengan mengetuk di luar flyout atau menekan tombol belakang.

Membuat pemilih warna

• API Penting:kelas ColorPicker, Properti warna, peristiwa ColorChanged

Buka aplikasi Galeri WinUI 3 dan lihat ColorPicker beraksi

Aplikasi Galeri WinUI 3 mencakup contoh interaktif kontrol dan fitur WinUI. Dapatkan aplikasi dari Microsoft Store atau telusuri kode sumber pada 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 Color 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 ke properti Warna, atau mengelola 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 ke warna yang dipilih langsung oleh pemilih warna. 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 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 slider 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"/>

Ketika Anda harus memilih antara spektrum warna persegi dan lingkaran, pertimbangan utama adalah akurasi. Pengguna memiliki kontrol lebih ketika mereka memilih warna tertentu menggunakan persegi karena lebih banyak gamut warna ditampilkan. Anda sebaiknya menganggap spektrum lingkaran sebagai pengalaman pemilihan warna yang lebih "santai".

Tampilkan saluran alfa

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

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

Tampilkan pemilih sederhana

Contoh ini menunjukkan cara mengonfigurasi pemilih warna dengan UI 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 tetap terlihat.

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

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

Nota

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

Perlihatkan atau sembunyikan fitur tambahan

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

Fitur	Karakteristik
Spektrum warna	IsColorSpectrumVisible, BentukSpektrumWarna, KomponenSpektrumWarna
Pratinjau warna	IsColorPreviewVisible
Nilai warna	ApakahSliderWarnaTerlihat, ApakahSaluranWarnaInputTeksTerlihat
Nilai keburaman	IsAlphaDiaktifkan, IsAlphaSliderTerlihat, IsAlphaTextInputTerlihat
Nilai heks	ApakahInputHexaTerlihat

Nota

IsAlphaEnabled harus bernilai benar agar kotak teks dan penggeser transparansi ditampilkan. Visibilitas kontrol input kemudian dapat dimodifikasi menggunakan properti IsAlphaTextInputVisible dan IsAlphaSliderVisible. Lihat dokumentasi API untuk detailnya.

Artikel terkait

• Interaksi pen dan stylus di aplikasi Windows
• Tinta