Introduction To Code4Fun Color Picker Component In UWP

Introduction

Code4Fun is a user interface toolkit which contains a collection of components such as a color slider, color range, color hexagon and color picker. It provides graphical representation to Windows universal applications by adding color and color range to labels, shapes etc.

Code4Fun is an extended color picker which contains attributes and properties to maintain their states. Now Code4Fun is available in CodePlex, Nuget Package manager and in the Code4Fun official website.

Before reading this article please go through the following article to get some knowledge about Universal Windows Platform (UWP).

• Introduction to Universal Windows Platform (UWP) App Development 

The following are some of the requirements needed to complete this article.

• Visual Studio 2015 Update 1 (Community or Enterprise edition) 

If you don’t have Visual Studio 2015, download the community edition, as it is absolutely free. To download Visual Studio 2015 Download now. To install Universal Windows Platform (Windows 10 SDK) we are in need of the internet with good bandwidth. 

• Windows 10 (Mandatory)
• Code4Fun Toolkit (Mandatory)

The following are the steps to create Color Picker using Visual Studio.

Open up Visual Studio to build the Color Picker app in Universal Windows Platform.

Click New Project or File and then click New, followed by Project / solution and new project creation wizard appears. Select Visual C# and then Windows.

 

 

 

Provide File name and click create a button to created the project. Then choose Minimum target version from targeted version to start developing a Universal Windows Application.

 

Now it's time to download and install Code4Fun Toolkit from the internet. Click Tools followed by Manage Nuget Packet Manager and then Package Manager Console. Then use the following command to download Code4Fun toolkit.

Install-Package Coding4Fun.Toolkit.Controls

 

 

 

Package Manager console takes up to 10 to 20 seconds to install Code4Fun toolkit in our solution. After Code4Fun toolkit installation you will be able to find Coding4Fun.Toolkit.Controls under reference as shown below.

 

Then add the code4fun tools in the toolbar. So open toolbar and then right click on common XAML Toolkits and click Add New Tab option and provide a name for your Code4Fun tools. Here I use Code4Fun as a tools name.

 

Right click on “Code4Fun” and click choose items and add the Code4Fun toolkit library file. So locate the Coding4Fun.Toolkit.Controls.dll that is available in a .nuget folder in the user's folder.

 

Path must be - C:\Users\<username>\.nuget\packages\Coding4Fun.Toolkit.Controls\2.1.8\lib\netcore451\ Coding4Fun.Toolkit.Controls.dll and click open button to add the code4fun tools.

 

Now in Choose Toolbox Items you may review the changes as shown below and click Ok to apply changes.

 

Now open toolbox, and you will be able to find added tools. From that select color picker, drag that one into MainPage.XAML and provide the name for the color picker.

 

Then add the following component into the designer window. Add the button and provide the name and change the value also.

To render color values use the border to get color value. So add a border from the toolbar and provide a valid name and set width and height for your needs. The given is generated automatically because it is an 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 following code in MainPage.xaml.cs under MainPage initializeComponent.

Here, we are changing ColorPicker appearance into visibility. These operations work when the button is clicked. Here we are storing colorPicker value into the border and rendering the output.

Note
Don’t forget to change colorPicker event method to CPtest_colorchanged

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);
       }

All Done! Click F5 button to deploy our solution. Here we are deploying an output for the local machine and the output is as follows.

Output

  

Download source code from GitHub to download click here.

I hope you enjoyed reading this article. Thanks for reading.

Happy coding.