Uncommon Dialogs: Font Chooser & Color Picker Dialogs

You may have noticed that WPF does not contain some of the standard common dialogs you've come to expect in Win32 API sets. For example, the Win32 Common Dialog Box Library contains a standard user-interface model for dialogs, such as Open, Print, Color, and Font. However, the WPF team has created several dialogs as samples that you may find helpful: a Font Chooser dialog, and a Color Picker dialog.

Font Chooser DialogNiklas, on the Text team, has just posted a sample font dialog that you can easily integrate into your WPF application -- see Sample WPF Font Chooser. This sample illustrates many of the "best practice" programming techniques for using fonts. Here's a screenshot of the font dialog:

Font Chooser Dialog

The Font Chooser sample did not make it into the final RTM release of the WPF SDK, but will be added the next time there is a Windows SDK update.

Color Picker DialogMike, on the WPF SDK team, submitted a Color Picker dialog that is part of the WPF samples of the RC1 Windows SDK. This sample allows you to browse colors by their hue, saturation, and brightness. You can also enter RGB, scRGB, and hex values directly.

You can also find this sample at the bottom of this posting as an attached Zip file (ColorPickerCustomControl.zip) that contains two directories:

ColorPickerSampleApplication - the test sample application
that hosts the ColorPicker control.
ColorPickerLib - the library that defines the ColorPickerDialog
class.

Running the Color Picker Sample ApplicationThe Color Picker Sample application is a simple graphics drawing application that allows you to create a line, an ellipse, and a rectangle. To change the default fill or strokecolor, click on the Fill or Stroke color setting on the left-hand panel:

Color Picker Sample Application

When you click on the Fill or Stroke color setting, the Color Picker dialog box is displayed:

Color Picker Dialog Box

Trying changing a color value by clicking in the color gradient square or moving the setting of the color spectrum bar. Notice that you can also change the alpha value, or opacity, of the color by using the Opacity slider:

Color Picker Dialog Box with alpha

You can also enter the ScRGB, sRGB, and hex color values directly. Click OK and the color of the selected object in the sample application changes!

Using the Color Picker DialogBy creating the Color Picker dialog box functionality as a separate class in a separate library, you can easily integrate the dialog into your application. The SetFill method, defined in SampleViewer.xaml.cs, shows how to instantiate a ColorPickerDialog class object, and display it by using the ShowDialog method. Since the dialog is a modal dialog, you can access the dialog's SelectedColor property after the dialog closes and returns control to your function.

private

void SetFill(object sender, RoutedEventArgs e)
{
Shape selectedShape =
(Shape)GetValue(SelectedShapeProperty);

    Microsoft.Samples.CustomControls.ColorPickerDialog cPicker
= new
Microsoft.Samples.CustomControls.ColorPickerDialog();

cPicker.StartingColor = FillColor;
cPicker.Owner =

this;

bool? dialogResult = cPicker.ShowDialog();
if (dialogResult != null && (bool)dialogResult == true)
{
if (selectedShape != null)
selectedShape.Fill =
new SolidColorBrush(cPicker.SelectedColor);

FillColor = cPicker.SelectedColor;
}
}

Feel free to modify the sample and adapt it to your needs.

Enjoy,
Lorin

About Us


We are the Windows Presentation Foundation SDK writers and editors.

ColorPickerCustomControl.zip