[WinUI 3][ColorPicker] HSV 色空間の色合い、彩度、値の最小値/最大値の取得/設定をする

この記事では、ColorPicker における HSV 色空間の「色合い」「彩度」「値（明度）」の最小値と最大値を取得/設定する方法について説明します。

環境

HSV 色空間の「色合い」「彩度」「値（明度）」を表すプロパティ

HSV 色空間の「色合い」「彩度」「値（明度）」を表すプロパティは以下の通りです。

※HSV色空間について知りたい方は Wikipedia の記事を参考にしてください。 https://ja.wikipedia.org/wiki/HSV%E8%89%B2%E7%A9%BA%E9%96%93

色合い、彩度、値の最小値/最大値の取得

最小値と最大値を取得する

以下は、ボタンをクリックしたときに ColorPicker の色合い、彩度、値（明度）の最小値と最大値を取得する例です。

private async void myButton_Click(object sender, RoutedEventArgs e)
{
    Debug.WriteLine($@"最小色相値：{myColorPicker.MinHue}");
    Debug.WriteLine($@"最大色相値：{myColorPicker.MaxHue}");
    Debug.WriteLine($@"最小彩度値：{myColorPicker.MinSaturation}");
    Debug.WriteLine($@"最大彩度値：{myColorPicker.MaxSaturation}");
    Debug.WriteLine($@"明度最小値：{myColorPicker.MinValue}");
    Debug.WriteLine($@"明度最大値：{myColorPicker.MaxValue}");
}

XAML は以下の通りです。

<Window
    x:Class="Button.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Button"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
    mc:Ignorable="d"
    >

    <StackPanel Orientation="Vertical" HorizontalAlignment="Center" VerticalAlignment="Top">
        <ColorPicker x:Name="myColorPicker"
                     ColorSpectrumShape="Box"/>
        
        <Button Content="値の取得" Click="myButton_Click" Margin="10,50"/>
    </StackPanel>
</Window>

色相/彩度/明度の取得

最小値と最大値を設定する

以下は、ボタンをクリックしたときに ColorPicker の色合い、彩度、値（明度）の最小値と最大値を設定する例です。

private async void myButton_Click(object sender, RoutedEventArgs e)
{
    myColorPicker.MinHue = 10;
    myColorPicker.MaxHue = 300;
    myColorPicker.MinSaturation = 20;
    myColorPicker.MaxSaturation = 90;
    myColorPicker.MinValue = 30;
    myColorPicker.MaxValue = 80;
}

XAML は以下の通りです。

<Window
    x:Class="Button.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Button"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
    mc:Ignorable="d"
    >

    <StackPanel Orientation="Vertical" HorizontalAlignment="Center" VerticalAlignment="Top">
        <ColorPicker x:Name="myColorPicker"
                     ColorSpectrumShape="Box"/>
        
        <Button Content="値の取得" Click="myButton_Click" Margin="10,50"/>
    </StackPanel>
</Window>

色相/彩度/明度の設定

Please follow and like us: