ComponentOne ColorPicker for WPF
In This Topic
    Quick Start
    In This Topic

    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:

    Set up the Application

     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:

    1. Create a new WPF project in Visual Studio.
    2. Navigate to the Toolbox and double-click the Rectangle icon to add the standard control to the Grid.
    3. Resize the window, and resize the rectangle to fill the window.
    4. Switch to XAML view and add a Fill to the <Rectangle> tag so it appears similar to the following:
      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:

    Designtime look of the rectangle

      

    Add C1ColorPicker Controls

    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:

    1. In Design view, click on the Rectangle to select it and navigate to the Visual Studio Toolbox.
    2. In the Toolbox, locate and double-click the C1ColorPicker icon twice add two controls to the form.
    3. Resize and position the two C1ColorPicker controls, so that they appear in the middle of the rectangle.
    4. Click once on the first C1ColorPicker control, C1ColorPicker1, in Design view, navigate to the Properties window, and set the following properties:
      • Set DropDownDirection to AboveOrBelow to control how the C1ColorPicker opens.
      • Set the Mode to Advanced so only the advanced color picker appears.
    5. Click on the second C1ColorPicker control, C1ColorPicker2, in the Design view, navigate to the Properties window and set the SelectedColor to White(or "#FFFFFFFF"). 

    The page's Design view should now look similar to the following image:

             Designtime look of the application

    Add Code to the Application

    Now to add code the application to finalize it and see its execution do the following steps:
    1. Click once on the first C1ColorPicker control (C1ColorPicker1) to select it.   
    2. In the Properties window, click the lightning bolt Events icon to view control events.
    3. Double-click in the text box next to the SelectedColorChanged event to switch to Code view and create the event handler.
    4. In Code view, add the following import statements to the top of the page: 
      using C1.WPF.ColorPicker;
      
      Imports C1.WPF.ColorPicker
      
    1. Add the following code just after the page's constructor to update the gradient values:        
      void UpdateGradient()
      {
          if (c1ColorPicker1 != null & c1ColorPicker2 != null)
          {
              this.col1r = this.c1ColorPicker1.SelectedColor;
              this.col2.Color = this.c1ColorPicker2.SelectedColor;
          }
      
      Private Sub UpdateGradient()
          If C1ColorPicker1 IsNot Nothing And C1ColorPicker2 IsNot Nothing Then
              Me.col1.Color = Me.C1ColorPicker1.SelectedColor
              Me.col2.Color = Me.C1ColorPicker2.SelectedColor
          End If
      End Sub
      
    1. Add code to the C1ColorPicker1_SelectedColorChanged event handler so that it appears like the following:
      private void c1ColorPicker1_SelectedColorChanged(object sender, C1.WPF.PropertyChangedEventArgs<System.Windows.Media.Color> e)
      {
          UpdateGradient();
      }
      
      private void c1ColorPicker1_SelectedColorChanged(object sender, C1.WPF.PropertyChangedEventArgs<System.Windows.Media.Color> e)
      {
          UpdateGradient();
      }
      
    1. Return to Design view.
    2. Click once on the second C1ColorPicker control (C1ColorPicker2) to select it.
    3. In the Properties window, double-click in the text box next to the SelectedColorChanged event to switch to Code view and create the event handler (you may need to click the lightning bolt Events icon to view control events if events are not listed).
    4. Add code to the C1ColorPicker_SelectedColorChanged event handler so that it appears like the following:   
      private void c1ColorPicker2_SelectedColorChanged(object sender, C1.WPF.PropertyChangedEventArgs<System.Windows.Media.Color> e)
      {
          UpdateGradient();
      }
      
      Private Sub C1ColorPicker2_SelectedColorChanged(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles c1cp1.SelectedColorChanged
          UpdateGradient()
      End Sub
      

    Run the Application

    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:

    1. From the Debug menu, select Start Debugging to view how your application will appear at run time.

    The application will appear similar to the following:

    How application looks

    1. 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.
    2. Choose a color, for example Red, and click OK:   

      Select the color from the first color picker

      Notice that the control's selected color and the rectangle's gradient changes to reflect your color choice.

    3. Click the drop-down arrow in the right color picker.

      Select the color from the second 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.

    4. Pick a color, for example Yellow. The selected color will change and the background gradient of the rectangle will change to match your selection: 

      Rectangle background changes the color as per the selection
    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.