ロブログ

Windows関連のことを中心につづっていけたらとは思っている。

UWPのColorPickerを使う(備忘録)

Windows10のFall Creators Update (ver. 16299)には、新たなコントロールとしてColorPickerが登場しています。

  • ColorPickerクラスのドキュメント

ColorPicker Class (Windows.UI.Xaml.Controls) - UWP app developer | Microsoft Docs

  • ColorPickerクラスの利用方法

Color Picker - UWP app developer | Microsoft Docs

便利なクラスですね。

  • ColorとSolidColorBrushの変換

ColorPickerクラスで取得できる値の型はColorクラスです。
しかし、TextblockコントールのForeground等に色を指定する場合、型はSolidColorBrushである必要があります。
自分が試して実装できたやり方を備忘録として残します。

  • コンバート用のクラスを作る
    public class Color2BrushConverter : IValueConverter
    {
        /// <summary>
        /// Color⇒brush
        /// </summary>
        public object Convert(object value, Type targetType, object parameter, string language)
        {

            if (value == null)
            {
                return new SolidColorBrush(Colors.Blue);
            }

            if (value is Color color)
            {
                return new SolidColorBrush(color);
            }
            else
                throw new Exception("Can't get SolidColorBrush");
        }

        public object ConvertBack(object value, Type targetType, object parameter, string language)
        {
            throw new NotImplementedException();
        }
    }
  • staticresourceとして使えるようにする

例として、App.xaml。(この手のやり方は調べたらごまんと出てくると思いますw)

<Application

    xmlns:local1="using:SampleApp.Class" >
    <Application.Resources>
        <local1:Color2BrushConverter  x:Key="Color2BrushConverter"/>
    </Application.Resources>   
</Application>
  • ColorPickerの値を記録

MVVM的なやり方で、ViewModelに保存。
ViewModel.MyColorの型はColorです。

<ColorPicker x:Name="myColorPicker" Color="{x:Bind ViewModel.MyColor, Mode=TwoWay}" />

#このとき、Color型のViewModel.MyColorの値が空(#00000000)の場合、コードビハインド側でmyColorPicker.Colorに初期値を与えた方が良さそうです。
(MVVMのこういう初期状態の対処方法は別にあるかもですが、私はまだそこまで理解できてないです)

冒頭に
xmlns:local1="using:SampleApp.Class"
を追加し、TextBlockコントロール内でこんな感じに記載。

<TextBlock Text="サンプル" Foreground="{x:Bind ViewModel.MyColor, Converter={StaticResource Color2BrushConverter}, Mode=OneWay}"/>
  • 色の16進数表記からColor型に変換する

「ViewModel.MyColor.ToString();」とすると、#00FF0000のような16進数表記の値が出力されます。
しかし、これは直接Color型に代入することはできません。
win32?では下記のような変換ができたらしいです。

using System.Windows.Media;
Color color = (Color)ColorConverter.ConvertFromString("#FFDFD991");  
//Or 
string hex = "#FFFFFF";  
Color color = System.Drawing.ColorTranslator.FromHtml(hex);  

しかし、上記はUWPでは無理なので、変換するためのメソッドを用意する必要がありそうです。

    public SolidColorBrush GetSolidColorBrush(string hex)
    {
      hex = hex.Replace("#", string.Empty);
      byte a = (byte)(Convert.ToUInt32(hex.Substring(0, 2), 16));
      byte r = (byte)(Convert.ToUInt32(hex.Substring(2, 2), 16));
      byte g = (byte)(Convert.ToUInt32(hex.Substring(4, 2), 16));
      byte b = (byte)(Convert.ToUInt32(hex.Substring(6, 2), 16));
      SolidColorBrush myBrush = new SolidColorBrush(Windows.UI.Color.FromArgb(a, r, g, b));
      return myBrush;
    }

これにより、
ViewModel.MyColor = GetSolidColorBrush("#FFDFD991").Color;
とすることで変換ができそうです。

今回参考にしたブログはこちらです
www.joeljoseph.net