[WinUI 3][ColorPicker] 選択されている色の取得と設定をする

スポンサーリンク

ColorPicker で選択されている色を取得する方法について説明します。

色を取得する例のほかに、アルファ, R, G, B 値を取得する方法と、ColorPicker にコードから色を設定する方法についても説明します。

環境

開発環境 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

ColorPicker を表示する

ColorPicker を表示する場合の 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>
        <ColorPicker x:Name="myColorPicker" />
    </StackPanel>
</Window>
ColorPicker

ColorPicker

選択されている色を取得する

ColorPicker で選択されている色を取得するには Color プロパティを参照します。

この Color プロパティWindows.UI.Color 型となっており、値は アルファ、赤、緑、および青のチャネルの値が含まれます。

XAML による Color プロパティ値の取得

以下は、Color プロパティ値を TextBlock にバインドする例です。

バインドした値を見ると分かるのですが、#FFFFFFFF のように # の後ろが8桁になっています。先頭の2桁がアルファ値、その後ろは2桁ずつ区切って、赤、青、緑を表しています。

<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>
        <ColorPicker x:Name="myColorPicker" />
        <TextBlock x:Name="myTextBlock" Text="{x:Bind myColorPicker.Color, Mode=OneWay}"  Margin="10,50"/>
    </StackPanel>
</Window>
Color プロパティを TextBlock にバインドする例

Color プロパティを TextBlock にバインドする例

コードで Color プロパティ値を取得する

コードで Color プロパティ値を取得する例を以下に示します。

この例では ボタンクリック時に Color プロパティ値を取得します。

private void myButton_Click(object sender, RoutedEventArgs e)
{
    Windows.UI.Color selectedColor = myColorPicker.Color;
}

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>
        <ColorPicker x:Name="myColorPicker" />
        <Button x:Name="myButton" Content="Get Color" Click="myButton_Click"  Margin="10,50" />
    </StackPanel>
</Window>

アルファ、R、G、Bの値をそれぞれ取得する

XAML による アルファ、R、G、B値の取得

アルファは透明度、Rは赤(Red)、Gは緑(Green)、B(Blue)を表します。

それぞれの値は Color プロパティが持つ A, R, G, B プロパティ値を参照します。

以下は、アルファ、R、G、B のプロパティ値を TextBlock にバインドする例です。

<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>
        <ColorPicker x:Name="myColorPicker" />
        <StackPanel Orientation="Horizontal">
            <TextBlock Text="{x:Bind myColorPicker.Color.A, Mode=OneWay}" Margin="10,50" />
            <TextBlock Text="{x:Bind myColorPicker.Color.R, Mode=OneWay}" Margin="10,50" />
            <TextBlock Text="{x:Bind myColorPicker.Color.G, Mode=OneWay}" Margin="10,50" />
            <TextBlock Text="{x:Bind myColorPicker.Color.B, Mode=OneWay}" Margin="10,50" />
        </StackPanel>
    </StackPanel>
</Window>
アルファ、R、G、B 値の取得

アルファ、R、G、B 値の取得

コードでアルファ、R、G、B値を取得する

コードで アルファ、R、G、B値を取得する例を以下に示します。

この例では ボタンクリック時に アルファ(プロパティ A)、R(プロパティ R)、G(プロパティ G)、B(プロパティ B)値を取得します。

private void myButton_Click(object sender, RoutedEventArgs e)
{
    var alpha = myColorPicker.Color.A;
    var red = myColorPicker.Color.R;
    var green = myColorPicker.Color.G;
    var blue = myColorPicker.Color.B;
}

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>
        <ColorPicker x:Name="myColorPicker" />
        <Button x:Name="myButton" Content="Get Color" Click="myButton_Click"  Margin="10,50" />
    </StackPanel>
</Window>

ColorPicker に色を設定する

ColorPicker の Color プロパティに色を設定する

以下はコードから Color プロパティに色を設定する例です。

ここでは Windows.UI.Color.FromArgb を使用してアルファ, R, G, B の値を設定しています。

public MainWindow()
{
    this.InitializeComponent();
    this.Title = "ColorPicker";

    myColorPicker.Color = Windows.UI.Color.FromArgb(255, 128, 64, 32);
}
コードから色を設定する例

コードから色を設定する例

WinUI 3Tips一覧

WinUI 3 のTips 一覧はこちら

Please follow and like us:

コメント

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