Coding4fun ColorPicker Control In UWP With XAML And C#

Before reading this article, please go through the article, given below.

1. Introduction To Universal Windows Platform (UWP) App Development Using Windows 10 And Visual Studio 2015

ColorPicker is a UI component, which displays a range of colors in a color space. It consists of a ColorSlider element as well as multiple Rectangle/Ellipse elements. As its name says, it is a kind of extended picker, which shows the selected color, via its Color property.

After reading this article, you will learn how to use Coding4Fun ColorPicker in Universal Windows apps development with XAML and Visual C# also enables the ColorPicker from the button control and changes the border background.

The important tools, given below are required to develop UWP.

1. Windows 10 (Recommended).
2. Visual Studio 2015 Community Edition (It is a free software available online).

Now, we can discuss step by step app development.

Step 1

Open Visual Studio 2015 -> Start -> New Project-> select Universal (under Visual C#->Windows)-> Blank app -> give the suitable name for your app (UWPC4FColorPicker)->OK.



After Choosing the Target and minimum platform version for your Windows, Universal Application will support it and the project creates App.xaml and MainPage.xaml.



Step 2

Add the TextBlock control, change the name and text property for the title.



Add the Button control, set the name and Tooltip property.



Add the Border control and change the name property.



Step 3

Open (double click) the file MainPage.xaml in Solution Explorer and add the Coding4Fun.Toolkit.Controls reference in the project.

To add the reference, right click on your project (UWPC4FColorPicker) and select Manage NuGet Packages.



Choose browse and search Coding4Fun.Toolkit.Controls. Select the package and install it.



The reference is added to your project.



Step 4

Add the tab in the Toolbox to add Coding4Fun Tool Kit controls.

Right click on the Coding4Fun Toolkit (Newly added tab) and select choose items.



Select the path given below.

C:\Users\<username>\.nuget\packages\Coding4Fun.Toolkit.Controls\2.1.8\lib\netcore451

Select the file Coding4Fun.Toolkit.dll and filter the Coding4Fun.Toolkit controls.



Step 6

Now, add ColorPicker Control, set the name and Visibility property to hide the ColorPicker control.



Step 7

Add Click Event method in the button control.



Step 8

Add ColorChanged Event method for ColorPicker.



Note

Automatically, the code given below will be generated in XAML code view, while we are finished in the design view.

<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:UWPC4FColorPicker" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:Controls="using:Coding4Fun.Toolkit.Controls" x:Class="UWPC4FColorPicker.MainPage" mc:Ignorable="d">
    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <TextBlock x:Name="tblTitle" HorizontalAlignment="Left" Margin="419,42,0,0" TextWrapping="Wrap" Text="Code4Fun ColorPicker control Demo" VerticalAlignment="Top" Height="37" Width="427" FontSize="24" FontWeight="Bold" />
        <Button x:Name="btnCPopen" Content="Open Color Picker" HorizontalAlignment="Left" Margin="110,113,0,0" VerticalAlignment="Top" RenderTransformOrigin="-5.01,1.529" ToolTipService.ToolTip="Open color Picker for changing Background" Click="btnCPopen_Click" />
        <Border x:Name="BorCP" BorderBrush="Black" BorderThickness="1" HorizontalAlignment="Left" Height="378" Margin="838,113,0,0" VerticalAlignment="Top" Width="354" />
        <Controls:ColorPicker x:Name="CPtest" HorizontalAlignment="Left" Height="358" Margin="284,113,0,0" VerticalAlignment="Top" Width="374" ColorChanged="CPtest_ColorChanged" Visibility="Collapsed" /> </Grid>
</Page>

Step 9

Add the code, given below at click event method to make ColorPicker and ColorChanged event Method visible to change the border background in Mainpage.xaml.cs.

private void btnCPopen_Click(object sender, RoutedEventArgs e) {
    CPtest.Visibility = Visibility;
}
private void CPtest_ColorChanged(object sender, Windows.UI.Color color) {
    BorCP.Background = new SolidColorBrush(color);
}

Step 10

Deploy your app in the local machine and the output of the UWPC4FColorPicker app is given below.



After clicking open, Color Picker button is displayed, as given below.



After Picking the color from ColorPicker


Summary

Now, you have successfully tested Code4Fun ToolKit – ColorPicker in Visual C# - UWP environment and changed the border background color with the button control.