【VB.NET】【WPF】Extended WPF Toolkit ColorPicker の使い方

WPF の標準コントロールには Forms の ColorDialog に相当するものがありません。

Forms の ColorDialog を WPF で使うこともできるわけですが・・・あまり気持ち良くないじゃないですか（？）。

で、ネット検索してみると、WPF で使えるものがいくつかの団体や会社から提供されているようですね。個人で開発している方もおられるようでした。

選択肢はいくつかあるようですが、ここでは Extended WPF Toolkit の ColorPicker の使い方をご紹介させていただきます。

Extended WPF Toolkit のインストール

Visual Studio の上部メニューから［ツール］＞［NuGet パッケージマネージャー］＞［ソリューションの NuGet パッケージの管理］を選択します。

［参照］を選択し、検索ボックスに「Extended.Wpf.Toolkit」と入力します。左ペインで Extended.Wpf.Toolkit が見つかったらそれを選択し、右側のペインでインストール先プロジェクトにチェックを入れて［インストール］ボタンをクリックします。

確認ダイアログが表示されたら［OK］をクリックします。

ColorPicker を設置する（xaml の編集）

Extended.Wpf.Toolkit をインストールしたら、ColorPicker を使用する Window の xaml を編集します。

Window タグに下記の xctk 名前空間を追加します。

xmlns:xctk=”http://schemas.xceed.com/wpf/xaml/toolkit”

そして ColorPicker を設置したいところに下記のタグを追加します。

<xctk:ColorPicker />

もちろん上記は最低限のタグなので、必要に応じてプロパティを追加してください。

ちなみに、この記事の最初の図のような ColorPicker を表示するには、下記のようにプロパティを追加します。

<xctk:ColorPicker Name="ColorPicker" AdvancedButtonHeader="ユーザー設定" StandardButtonHeader="標準" AvailableColorsHeader="使用可能な色" 
     ShowRecentColors="True" RecentColorsHeader="最近使った色" StandardColorsHeader="標準色" Margin="5,0,0,0" DisplayColorAndName="False" 
     SelectedColorChanged="ColorPicker_SelectedColorChanged" Closed="ColorPicker_Closed" AvailableColorsSortingMode="HueSaturationBrightness" 
     UsingAlphaChannel="True" Width="60" SelectedColor="Red" />

プロパティ

ColorPicker のプロパティは次の通りです。

プロパティ	説明
AdvancedButtonHeader	“Advanced” タブのヘッダーテキストを取得または設定します。
AvailableColors	「使用可能な色」を取得または設定します。
AvailableColorsHeader	「使用可能な色」のヘッダーテキストを取得または設定します。
AvailableColorSortingMode	「使用可能な色」のソート方法（アルファベット順または HSB 色空間順）を取得または設定します。デフォルトはアルファベット順です。
ButtonStyle	ドロップダウンのボタンのスタイルを取得または設定します。
ColorMode	現在の表示画面（ColorPalette または ColorCanvas）を取得または設定します。デフォルトは ColorPalette です。
DisplayColorAndName	コントロールに色と名前を表示するか（True）、色のみを表示するか（False）を取得または設定します。
DisplayColorTooltip	「使用可能な色」の名前をツールチップで表示するかどうかを示す値を取得または設定します。デフォルトは True です。
IsOpen	ドロップダウンが開かれているかどうかを示す値を取得または設定します。
RecentColors	「最近使った色」のすべてを取得または設定します。
RecentColorsHeader	「最近使った色」のヘッダーテキストを取得または設定します。
SelectedColor	現在選択されている色を取得または設定します。
SelectedColorText	SelectedColor の定義済みの色名または 16 進テキストを取得します。
ShowAdvancedButton	“Advanced” ボタンを表示するかどうかを示す値を取得または設定します。（Extended.Wpf.Toolkit 3.5.0 では廃止されている模様 by エレン・イースト）
ShowAvailableColors	AvailableColors を表示するかどうかを示す値を取得または設定します。
ShowDropDownButton	ドロップダウンボタンを表示するかどうかを示す値を取得または設定します。
ShowRecentColors	RecentColors を表示するかどうかを示す値を取得または設定します。（デフォルトは False です）
ShowStandardColors	StandardColors を表示するかどうかを示す値を取得または設定します。
StandardButtonHeader	“Standard” タブのヘッダーテキストを取得または設定します。
StandardColors	標準色のパレットを取得または設定します。
StandardColorsHeader	標準色のヘッダーテキストを取得または設定します。
UsingAlphaChannel	アルファチャネルを使用しているかどうかを示す値を取得します。

イベント

ColorPicker の主なイベントは次の通りです。

イベント	説明
SelectedColorChanged	SelectedColor の値が変化したときに発生します。
Closed	ColorPicker のポップアップが閉じたときに発生します。

値の保存と復元

ColorPicker の「選択中の色」と「最近使った色」を保存／復元するコードの例です。

Dim ColorPickerValuesFile As String = "D:\temp\ColorPickerValues.txt"

Friend Sub SaveColorPickerValues(oColorPicker As Xceed.Wpf.Toolkit.ColorPicker)

If oColorPicker.SelectedColor.HasValue = True OrElse oColorPicker.RecentColors.Count > 0 Then
    Dim sw As New System.IO.StreamWriter(ColorPickerValuesFile)

    '選択中の色
    If oColorPicker.SelectedColor.HasValue = True Then
        Dim c As Color = oColorPicker.SelectedColor.Value
        sw.WriteLine("SelectedColor:" & c.A & "," & c.R & "," & c.G & "," & c.B)
    End If

    '最近使った色
    If oColorPicker.RecentColors.Count > 0 Then
        For Each item As Xceed.Wpf.Toolkit.ColorItem In oColorPicker.RecentColors
            If item.Color IsNot Nothing Then
                Dim c As Color = item.Color
                sw.WriteLine("RecentColor:" & item.Name & "," & c.A & "," & c.R & "," & c.G & "," & c.B)
            End If
        Next
    End If

    sw.Close() : sw.Dispose()
End If

End Sub

Friend Sub ReadColorPickerValues(oColorPicker As Xceed.Wpf.Toolkit.ColorPicker)

If System.IO.File.Exists(ColorPickerValuesFile) = True Then
    Dim allLines() As String = System.IO.File.ReadAllLines(ColorPickerValuesFile)
    For Each aLine As String In allLines
        If aLine.Contains(":") = True Then
            Dim vals As String = aLine.Remove(0, aLine.IndexOf(":")+1)
            Dim valsArray() As String = vals.Split(",")
            If aLine.Contains("SelectedColor") = True Then
                '選択中の色
                oColorPicker.SelectedColor = Color.FromArgb(valsArray(0),valsArray(1),valsArray(2),valsArray(3))
            Else
                '最近使った色
                Dim oColor As Color = Color.FromArgb(valsArray(1),valsArray(2),valsArray(3),valsArray(4))
                Dim oColorItem As New Xceed.Wpf.Toolkit.ColorItem(oColor, valsArray(0))
                oColorPicker.RecentColors.Add(oColorItem)
            End If
        End If
    Next
End If

End Sub

選択された色を Color に変換

Dim c As Color = oColorPicker.SelectedColor.Value

Dim DrawingColor = System.Drawing.Color.FromArgb(c.A, c.R, c.G, c.B)

Dim MediaColor = System.Windows.Media.Color.FromArgb(c.A, c.R, c.G, c.B)
'Dim MediaColor As System.Windows.Media.Color = oColorPicker.SelectedColor.Value