Hide Down Arrow in xceed toolkit ColorPicker

Question

I am using Xceed Toolkit ColorPicker in a WPF project. The color picker is working good, but could not find a option to hide the combo box style down arrow.

I am looking for a way to edit the template and hide that.

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

       <xctk:ColorPicker Name="cp" 
                       DisplayColorAndName="False" 
                       Height="25"
                       Width="70"
                       SelectedColorChanged="cp_SelectedColorChanged_1" 
                       AvailableColorsSortingMode="HueSaturationBrightness" >            
    </xctk:ColorPicker>

I am just wondering if anyone has the working XAML template code to share.

score 2 · Answer 1 · answered Aug 21 '20 at 12:59

If there is no ShowDropDownButton property available in the version you are using, creating a custom ButtonStyle should do the trick:

You should use a custom ButtonStyle:

<xctk:ColorPicker Name="cp" 
                  DisplayColorAndName="False" 
                  Height="25"
                  Width="70"
                  SelectedColorChanged="cp_SelectedColorChanged_1" 
                  AvailableColorsSortingMode="HueSaturationBrightness" >
    <xctk:ColorPicker.Resources>
        <BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter" />
    </xctk:ColorPicker.Resources>
    <xctk:ColorPicker.ButtonStyle>
        <Style TargetType="ToggleButton">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="ToggleButton" xmlns:chrome="clr-namespace:Xceed.Wpf.Toolkit.Chromes;assembly=Xceed.Wpf.Toolkit">
                        <Grid SnapsToDevicePixels="True">
                            <Grid>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="*" />
                                    <ColumnDefinition Width="Auto" />
                                </Grid.ColumnDefinitions>

                                <Border Background="{TemplateBinding Background}"
                                        BorderBrush="{TemplateBinding BorderBrush}"
                                        BorderThickness="{TemplateBinding BorderThickness}"
                                        Padding="{TemplateBinding Padding}"
                                        SnapsToDevicePixels="True">
                                    <ContentPresenter Content="{TemplateBinding Content}"
                                                    ContentTemplate="{TemplateBinding ContentTemplate}"
                                                    ContentTemplateSelector="{TemplateBinding ContentTemplateSelector}"
                                                    VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                                    HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" />
                                </Border>
                                <chrome:ButtonChrome x:Name="ToggleButtonChrome"
                                                    Grid.Column="1"
                                                    CornerRadius="0,2.75,2.75,0"
                                                    Visibility="{Binding ShowDropDownButton, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=xctk:ColorPicker}, Converter={StaticResource BooleanToVisibilityConverter}}"
                                                    RenderChecked="{Binding IsOpen, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=xctk:ColorPicker}}"
                                                    RenderEnabled="{Binding IsEnabled, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=xctk:ColorPicker}}"
                                                    RenderMouseOver="{TemplateBinding IsMouseOver}"
                                                    RenderPressed="{TemplateBinding IsPressed}">
                                </chrome:ButtonChrome>
                            </Grid>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </xctk:ColorPicker.ButtonStyle>
</xctk:ColorPicker>

score 1 · Accepted Answer · answered Aug 21 '20 at 06:37

You do not have to edit the template, you can set the ShowDropDownButton property to false.

<xctk:ColorPicker Name="cp" 
                  DisplayColorAndName="False" 
                  Height="25"
                  Width="70"
                  AvailableColorsSortingMode="HueSaturationBrightness"
                  ShowDropDownButton="False">
</xctk:ColorPicker>

This results in the ToggleButton with the arrow not being displayed.

Hide Down Arrow in xceed toolkit ColorPicker

2 Answers2