Coding4fun ColorHexagonPicker Control Using UWP With XAML And C#

Before reading this article, please go through the following article.

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

Basically ColorHexagonPicker is a UI component that displays a range of colors in a color hexagonal space. As its name says it is a kind of extended picker that shows the selected color via its Color property.

Reading this article, you can learn how to use Coding4Fun ColorHexagonPicker in Universal Windows Apps development with XAML and Visual C# also binds the ColorHexagonPicker selected Color to a Rectangle Filled property using ElementBinding.

The following important tools are required for developing 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 (UWPC4FColorHexagenPicker)->OK.



After Choosing the Target and minimum platform version your Windows Universal Application will support the Project creates App.xaml and MainPage.xaml.



Step 2

Add TextBlock control and change the Name and text property for title,



Step 3

Add StackPanel control and change the name property





Choose Browse and Search Coding4Fun.Toolkit.Controls select the package and install it.



Reference added your project



Step 4

Add tab in the Toolbox, for adding Coding4Fun Tool Kit controls

Right click the Coding4Fun Kit (Newly added tab) and Select choose items



Select the path,

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



Filter the Coding4Fun.Toolkit.Controls .



Step 5

Now, add the ColorHexagonPicker Control and set the name property


Step 6

Add the Rectangle control for displaying the Color picker selected color using Fill property

<Rectangle x:Name="RectHCP" Height="100" Stroke="Black" Margin="814,0,10,20" Fill="{Binding SolidColorBrush, ElementName=CHPtest}"/>

Note

Automatically the following code will be generated in XAML code view, while we are done 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:UWPC4FColorHexagenPicker" 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="UWPC4FColorHexagenPicker.MainPage" mc:Ignorable="d">
    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <TextBlock x:Name="tblTitle" HorizontalAlignment="Left" Margin="432,42,0,0" TextWrapping="Wrap" Text="Coding4Fun Hexagon Color Picker control Test" VerticalAlignment="Top" FontSize="20" FontWeight="Bold" />
        <StackPanel x:Name="SPColorPick" HorizontalAlignment="Left" Height="517" Margin="162,152,0,0" VerticalAlignment="Top" Width="941">
            <Controls:ColorHexagonPicker x:Name="CHPtest" Height="392" Margin="10,0,237,0" />
            <Rectangle x:Name="RectHCP" Height="100" Stroke="Black" Margin="814,0,10,20" Fill="{Binding SolidColorBrush, ElementName=CHPtest}" /> </StackPanel>
    </Grid>
</Page>

Step 7

Deploy your App in Local Machine, and the output of the UWPC4FColorHexagenPicker App is,



After Picking the color


Summary

Now you have successfully tested Code4Fun ToolKit – ColorHexagonPicker in Visual C# - UWP environment.