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 で選択されている色を取得するには 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 プロパティ値を取得する
コードで 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値を取得する例を以下に示します。
この例では ボタンクリック時に アルファ(プロパティ 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); }
コメント