XamColorPicker – 派生色パレットをカスタマイズしたい

XamColorPicker の派生色パレットは製品内部で自動的に生成される仕様のため、既定の状態では個別に色を指定することができません。既定の ControlTemplate を上書きし、派生色パレット部分を任意の色で構成した ColorStrip に置き換えることで、派生色パレットをカスタマイズできます。

XamColorPicker の設定

まず XamColorPicker を配置し、通常の色パレットとなる CurrentPalette を設定します。この時点では、ドロップダウン下段に表示される派生色パレットは製品内部で自動的に生成され、個別に色を指定することはできません。

<ig:XamColorPicker x:Name="xamColorPicker1">
    <ig:XamColorPicker.CurrentPalette>
        <ig:ColorPalette>
            <ig:ColorPalette.Colors>
                <ig:ColorPatchCollection>
                    <ig:ColorPatch Color="Red"/>
                    <ig:ColorPatch Color="Green"/>
                    <ig:ColorPatch Color="Blue"/>
                    ...
                </ig:ColorPatchCollection>
            </ig:ColorPalette.Colors>
        </ig:ColorPalette>
    </ig:XamColorPicker.CurrentPalette>
</ig:XamColorPicker>

既定スタイルの上書きによる派生色パレットの置き換え

XamColorPicker の既定のスタイル（generic.xaml）は、こちらのページで確認できます。

派生色パレットを任意の色で構成するには、XamColorPicker の既定の ControlTemplate を上書きし、テンプレート内の派生色パレット部分を、任意の ColorPatch を持つ ColorStrip に置き換えます。

<ig:XamColorPicker.Resources>
    <Style TargetType="igCP:XamColorPicker">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="igCP:XamColorPicker">
                    <Grid x:Name="Root">
                        ...
                        <Popup x:Name="Popup" ...>
                            <Border ...>
                                <StackPanel Orientation="Vertical">
                                    ...
                                    <StackPanel PreviewMouseMove="StackPanel_PreviewMouseMove" PreviewMouseLeftButtonUp="StackPanel_PreviewMouseLeftButtonUp">
                                        <igPrim:ColorStrip igPrim:ColorStripManager.Manager="{StaticResource StripManager}">
                                            <igPrim:ColorStrip.ColorPalette>
                                                <ig:ColorPalette>
                                                    <ig:ColorPalette.Colors>
                                                        <ig:ColorPatchCollection>
                                                            <ig:ColorPatch Color="DarkRed"/>
                                                            <ig:ColorPatch Color="DarkGreen"/>
                                                            ...
                                                        </ig:ColorPatchCollection>
                                                    </ig:ColorPalette.Colors>
                                                </ig:ColorPalette>
                                            </igPrim:ColorStrip.ColorPalette>
                                        </igPrim:ColorStrip>
                                        <igPrim:ColorStrip igPrim:ColorStripManager.Manager="{StaticResource StripManager}">
                                            ...
                                        </igPrim:ColorStrip>
                                    </StackPanel>
                                    ...
                                </StackPanel>
                            </Border>
                        </Popup>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</ig:XamColorPicker.Resources>

置き換えた StackPanel の PreviewMouseMove と PreviewMouseLeftButtonUp イベントをハンドラに接続し、カスタムパレットの色をポイント・クリックした際に SelectedColorPreview と SelectedColor に反映させます。

private void StackPanel_PreviewMouseMove(object sender, MouseEventArgs e)
{
    var borderObj = Utilities.GetAncestorFromType(e.OriginalSource as DependencyObject, typeof(Border), true);
    var rectObj = Utilities.GetDescendantFromType(borderObj, typeof(Rectangle), true) as Rectangle;
    if (rectObj != null)
    {
        var solidBrush = rectObj.Fill as SolidColorBrush;
        if (solidBrush != null)
        {
            xamColorPicker1.SelectedColorPreview = solidBrush.Color;
        }
    }
}

private void StackPanel_PreviewMouseLeftButtonUp(object sender, MouseButtonEventArgs e)
{
    Dispatcher.BeginInvoke(DispatcherPriority.Background, new Action(() =>
    {
        var borderObj = Utilities.GetAncestorFromType(e.OriginalSource as DependencyObject, typeof(Grid), true);
        var rectObj = Utilities.GetDescendantFromType(borderObj, typeof(Rectangle), true) as Rectangle;
        if (rectObj != null)
        {
            var solidBrush = rectObj.Fill as SolidColorBrush;
            if (solidBrush != null)
            {
                xamColorPicker1.SelectedColor = solidBrush.Color;
                xamColorPicker1.IsDropDownOpen = false;
            }
        }
    }));
}

実行結果

実行すると、XamColorPicker のドロップダウンに表示される派生色パレットが、任意に指定した色のパレットに置き換わっていることを確認できます。パレット内の色をポイントすると SelectedColorPreview に反映され、クリックするとその色が SelectedColor として選択色に反映されます。