How To Add Code4Fun Color Picker Component In UWP App

 Prerequisites

• Visual Studio 2015 

Introduction

• Code4Fun is an extended color picker which contains attributes and properties to maintain their states. It is a UI Toolkit which contains a collection of components, such as color slider, hexagon, range, and picker.
• It is available in CodePlex, NuGet Package Manager, and on the official website for Code4Fun Picker.

Now, let's create a UWP application containing Color Picker, using Visual Studio 2015 . The following steps are needed to be followed.

Step 1 

Open Visual Studio 2015 to build a color picker app in UWP by clicking on "File >> New >> Project".

 

Step 2

Then, the "New Project" window will open. In the left pane, go to Installed >> Visual C# >> Windows >> Universal. Select "Blank App (Universal Windows)" in the central window and type the name of your app in name box. Now, click "OK" button.

Step 3

Then, select the target version and minimum version that your UWP app will support, and click OK .

Step 4

Download and install Code4Fun Toolkit by clicking on the Tools >>NuGet Package Manager >> Package Manager Console; and using the following command to download the Code4Fun Toolkit. 

Install-Package Coding4Fun.Toolkit.Controls



It takes 15 to 30 seconds to install Code4Fun Toolkit in our solution. 

 

Step 5 

After installation, you will be able to find coding4Fun.Toolkit.Controls. The Package Manager Console is Installed on the Toolkit Controls under references, as shown below.



Step 6 

Add the Code4Fun tools in the toolbar. For this, open the Toolbar and by right clicking on Common XAML Toolkits, click "Add New Tab" and provide a name for your tool.

Step 7

Right click on the Code4Fun, choose items, and add the Code4Fun Toolkit library file. Then, locate the "Coding4Fun.Toolkit.Controls.dll" that is available in the .nuget in the user's folder.



Step 8 

Then, add the application extension in ".dll". The path must be "C:/Users". Click "Coding4Fun.Toolkit.Controls.dll" and click "Open" button as shown below.



Step 9 

Then, we can choose Toolbox Items. You may review the changes as shown below and click OK button to apply the changes.

 

Step 10 

Open the Toolbox. You will find the added tools. From there, select color picker and drag the box into MainPage.XAML and provide the name for the color picker.



Step 11 

Then, we can add the toolbox. In the designer window, add the button, provide the name, and change the value also. Add a border from the toolbar and provide a name, along with width and height for our needs to render a color value. It is generated automatically in IDE.

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <Button x:Name="buttonopen" Content="Open Color Picker" HorizontalAlignment="Left" Margin="10,10,0,0" VerticalAlignment="Top" RenderTransformOrigin="-5.01,1.529" ToolTipService.ToolTip="Open color Picker for changing Background" Click="buttonopen_Click" />
    <Border x:Name="Border" BorderBrush="Black" BorderThickness="1" HorizontalAlignment="Left" Height="213" Margin="10,113,0,0" VerticalAlignment="Top" Width="269" />
    <Controls:ColorPicker x:Name="Colorpick" HorizontalAlignment="Left" Height="358" Margin="284,113,0,0" VerticalAlignment="Top" Width="374" ColorChanged="Colorpick_ColorChanged" Visibility="Collapsed" />
</Grid>

Then, add the code in the MainPage.xaml.cs for initializing the component and changing color picker under visibility. Only click on the button options.

private void buttonPopen_Click(object sender, RoutedEventArgs e) {
    Colorpick.Visibility = Visibility;
}
private void Colorpick_ColorChanged(object sender, Windows.UI.Color color) {
    Border.Background = new SolidColorBrush(color);
}

Step 12
Finally, let's run this project using Local Machine.



Output


Conclusion 

Hence, we have successfully created a UWP app containing Code4Fun Color Picker Component, using Microsoft Visual Studio 2015.