ComponentOne Extended Library for UWP
Step 3: Adding Code to the Application
Extended Library for UWP > ColorPicker for UWP > Quick Start > Step 3: Adding Code to the Application

 In this step, you will add code to your UWP application to provide functionality to the added C1ColorPicker controls. Since you have already designed the user interface for your application in the previous step, complete the following steps to add functionality.

  1. In Design view, click once on the C1ControlPicker1 to select it and navigate to the Properties window.
  2. In Properties window, select Events icon, locate SelectedColorChanged event and double-click in the text area.
  3. This opens the code view (MainPage.xaml.cs) for the selected control with an event handler created as C1ColorPicker1_SelectedColorChanged.
  4. Ensure that the following import statements are added to the top in the code.
    Visual Basic
    Copy Code
    Imports C1.Xaml
    Imports C1.Xaml.Extended
    
    C#
    Copy Code
    using C1.Xaml;
    using C1.Xaml.Extended;
    
  5. To update the gradient values and subscribe SelectedColorChanged event handler for C1ColorPicker1, add the following code just below the MainPage's constructor in code view (MainPage.xaml.cs).
    Visual Basic
    Copy Code
    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
    
    
    Private Sub C1ColorPicker1_SelectedColorChanged(sender As Object,
    e As PropertyChangedEventArgs(Of Windows.UI.Color))Handles C1ColorPicker1.SelectedColorChanged
        UpdateGradient()
    
    End Sub
    
    C#
    Copy Code
    void UpdateGradient()
    {
    
      if (C1ColorPicker1 != null & C1ColorPicker2 != null)
    
      {
    
        this.col1.Color = this.C1ColorPicker1.SelectedColor;
    
        this.col2.Color = this.C1ColorPicker2.SelectedColor;
    
      }
    
    }
    
    private void C1ColorPicker1_SelectedColorChanged(object sender, C1.Xaml.PropertyChangedEventArgs < Windows.UI.Color > e)
    {
      UpdateGradient();
    }
    
  6. As done above in Step 1, 2 and 3, add and subscribe SelectedColorChanged event for the second ColorPicker control, C1ColorPicker2. When then event is created, update the gradient values through code as follows:
    Visual Basic
    Copy Code
    Private Sub C1ColorPicker2_SelectedColorChanged(sender As Object,
    e As PropertyChangedEventArgs(Of Windows.UI.Color)) Handles C1ColorPicker2.SelectedColorChanged
        UpdateGradient()
    
    End Sub
    
    C#
    Copy Code
    private void C1ColorPicker2_SelectedColorChanged(object sender, PropertyChangedEventArgs < Windows.UI.Color > e)
    {
      UpdateGradient();
    }
    

With this, you have completed the addition of code to your UWP application and added functionality to the added ColorPicker controls. In the next step, you will run the application to see how the controls function at runtime.   

See Also