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

スポンサーリンク

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

環境

開発環境 Microsoft Visual Studio Professional 2019 Preview
Version 16.11.0 Preview 3.0
Framework Microsoft .NET Framework Version 4.8.04084
その他 Microsoft.Project Reunion 0.8.0-preview
Microsoft.ProjectReunion.Foundation 0.8.0-preview
Microsoft.ProjectReunion.WinUI 0.8.0-preview
Microsoft.UI.Xaml 2.6.1

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

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

プロパティ 説明
MinHue 0〜359の範囲の最小色相値を取得または設定します。
MaxHue  0〜359の範囲の最大色相値を取得または設定します。
MinSaturation 0〜100の範囲の最小彩度値を取得または設定します。
MaxSaturation 0〜100の範囲の最大彩度値を取得または設定します。
MinValue 0〜100の範囲の明度最小値を取得または設定します。
MaxValue 0〜100の範囲の明度最大値を取得または設定します。

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

コメント

タイトルとURLをコピーしました