The following quick start is intended to get you up and running with ColorPicker for WPF. In this quick start you'll create a new WPF project, using two C1ColorPicker controls and a standard Rectangle control. The C1ColorPicker controls will control a gradient that is applied to the Rectangle, so that choosing colors at run time will change the colors of the gradient – letting you explore the possibilities of using ColorPicker. To complete the quick start you need to do the following:
In this step you'll begin in Visual Studio to create a WPF application using ColorPicker. When you add a C1ColorPicker control to your application, you'll have a complete, functional color input selector.
To set up your project and add a C1ColorPicker control to your application, complete the following steps:
XAML |
Copy Code
|
---|---|
<Rectangle Name="Rectangle1" Stroke="Black"> <Rectangle.Fill> <LinearGradientBrush x:Name="colors"> <GradientStop x:Name="col1" Color="Black" Offset="0" /> <GradientStop x:Name="col2" Color="White" Offset="1" /> </LinearGradientBrush> </Rectangle.Fill> </Rectangle> |
This will add a black and white linear gradient fill to the rectangle. The design view of the page should now look similar to the following image:
Now, set up the application's user interface and add C1ColorPicker controls that will control the gradient fill in the Rectangle and set its properties as below:
The page's Design view should now look similar to the following image:
Now that you've created a WPF application and customized the application's appearance and behavior, the only thing left to do is run your application. To run your application and observe ColorPicker for WPF's run-time behavior, complete the following steps:
The application will appear similar to the following:
Congratulations! You've completed the ColorPicker for WPF quick start and created a simple WPF application, added and customized ColorPicker for WPF controls, and viewed some of the run-time capabilities of the controls.
Click the drop-down arrow in the left color picker. Notice that the window opens above the drop-down box and that only the advanced mode is visible. This reflects the changes you made to the control. In advanced mode, users can specify any color and can use multiple methods of selecting a color. Choose a color, for example Red, and click OK:
Notice that the control's selected color and the rectangle's gradient changes to reflect your color choice.
Click the drop-down arrow in the right color picker.
Notice that the Basic tab is visible (default). This tab displays Palette Colors, Standard Colors, and Recent Colors. You can pick any color and can also switch to the Advanced tab to pick a custom color. Note that the currently selected color is highlighted with a red border.
Pick a color, for example Yellow. The selected color will change and the background gradient of the rectangle will change to match your selection: