Launch ColorPicker from a Button

I am using WPF Elements v6.0.2675.23123. I have a button with a background color, and when I click the button, I would like the ColorPicker to come up and based on the color choice, I want to change the background color of the button.

What is the best way to do this? I'm using MVVM Light, and have my button click bound to a RelayCommand, and I can make a ColorPicker object in the ViewModel but it isn't visible (and having it create a GUI control from the ViewModel breaks MVVM I think, though that's not a big concern). I'm thinking there must be a more purely WPF way to do this, so any help would be much appreciated.

Hello Leah

You are right, building the ColorPicker in the model is not the way to go. Do you want the popup section of the color picker to appear underneath the button? If so, you'll probably want the button to actually be a DropDownColorPicker. You can do this by creating a custom DropDownColorPicker style by copying and modifying one of the default themes that can be found in the Themes folder of the installation directory. Search for DropDownColorPicker in one of the files that ends with .Common.xaml. The easiest way would be to replace the DropDownEditBox with a Toggle button with IsChecked binding to IsDropDownOpen. And have a popup on the button containing the color picker bits, and open the popup when the button is checked. Look at the DropDownEditBox to see how we do the popup shadows. Alternatively (instead of replacing the DropDownEditBox), you could create a custom DropDownEditBox style which does not disply the header - only the drop down button, and style this button how you want.

The color of the button can be binding to the result of the color picker.

If you need help, send me the styling code of how far you get, and I'll point you in the right direction.

-Jason Fauchelle

Thanks for the suggestions, attached is what I've got, I'm close! I would like to make the colored part (i.e. the pink part) of the button bigger and then it would be just about exactly what I need.

Hello Leah

Good work on what you have done so far. The size of the colored square is fixed in our default ColorButton styles. So to customize this, you simply need to create a custom ColorButtonStyle. Here is our OfficeBlue style:

<Style x:Key="{x:Type local:ColorButton}" TargetType="{x:Type local:ColorButton}">
  <Setter Property="SnapsToDevicePixels" Value="True" />
  <Setter Property="FocusVisualStyle"   Value="{x:Null}" />
  <Setter Property="BorderBrush" Value="{StaticResource ColorPickerListBoxBorder}" />
  <Setter Property="Template">
    <Setter.Value>
      <ControlTemplate TargetType="{x:Type local:ColorButton}">
        <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}">
          <Grid>
            <Grid.ColumnDefinitions>
              <ColumnDefinition Width="Auto" />
              <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>
            <Border Background="{StaticResource MenuItemLeftMarginBackground}" Width="26" />
            <Border Name="MouseOverBorder" Background="Transparent" BorderThickness="1" BorderBrush="Transparent" Grid.ColumnSpan="2" Margin="1" />
            <Border Width="18" Height="18" BorderThickness="1" BorderBrush="{StaticResource MouseOverColorPickerListBoxItemBorder}"
                    Background="{StaticResource MouseOverColorPickerListBoxItemInnerBorder}" CornerRadius="1"
                    Name="SelectedBorder" Visibility="Hidden" VerticalAlignment="Center" HorizontalAlignment="Center" />
            <Border Width="14" Height="14" BorderThickness="1" BorderBrush="{StaticResource ColorPickerListBoxBorder}"
                    Background="{TemplateBinding Color, Converter={StaticResource ColorToBrush}}" VerticalAlignment="Center" HorizontalAlignment="Center" />
            <ContentPresenter Grid.Column="1" RecognizesAccessKey="True" Margin="8,3,0,4" />
          </Grid>
        </Border>
        <ControlTemplate.Triggers>
          <Trigger Property="IsMouseOver" Value="True">
            <Setter TargetName="MouseOverBorder" Property="Background" Value="{StaticResource HighlightedMenuItemBackground}" />
            <Setter TargetName="MouseOverBorder" Property="BorderBrush" Value="{StaticResource HighlightedMenuItemBorder}" />
          </Trigger>
          <Trigger Property="IsChecked" Value="True">
            <Setter TargetName="SelectedBorder" Property="Visibility" Value="Visible" />
          </Trigger>
          <Trigger Property="IsEnabled" Value="False">
            <Setter Property="Foreground" Value="{StaticResource DisabledForeground}" />
          </Trigger>
        </ControlTemplate.Triggers>
      </ControlTemplate>
    </Setter.Value>
  </Setter>
</Style>

The Border with a width and height of 14 is the element that displays the color. You can change the size, position and border of this however you like. For any converters or brush resources mentioned here, you can find them throughout our OfficeBlue files, or customize them yourself.

Let me know if you need help with this applying this style.

-Jason Fauchelle