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のこういう初期状態の対処方法は別にあるかもですが、私はまだそこまで理解できてないです)
- TextBlock側のバインディング時にコンバータを利用
冒頭に
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