Changing StackPanel Background Using Coding4fun ColorSlider Control In 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

ColorSlider is a UI component that displays a range of colors in a color sliding space. It is a kind of extended color picker which derives from ColorBaseControl and shows the selected color via its Color property.

Reading this article, you will learn how to use Coding4FunColorSlider in UWP app development, with XAML and Visual C#. Also, we will learn how to change the StackPanel background.

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, let's discuss step by step app development.

Step 1

Open Visual Studio 2015. Go to Start -> New Project-> Select Universal (under Visual C# -> Windows) -> Blank App -> Give suitable name to your app (UWPC4FColorSlider) -> OK.



After selecting the Target and Minimum platform version that your application will support, the Project creates App.xaml and MainPage.xaml.



Step 2

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

For adding Reference, right click your project (UWPC4FColorSlider) and select "Manage NuGet Packages".



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



Reference added to your project



Step 3

Add tab in the Toolbox. For adding Coding4Fun Toolkit controls, right click the Coding4Fun Toolkit (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.dll and filter the Coding4Fun.Toolkit controls.



Step 4

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



Step 5

Add StackPanel control and change the name property.



Step 6

Now, add the ColorSlider Control and set the name and orientation property for Vertical Slider.



Step 7

Add one more ColorSlider Control and set the name and orientation property for Horizontal Slider.



Step 8

Add ColorChanged Event method for both the Colorslider.



Note Automatically, the following code will be generated in XAML code view, when 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:UWPC4FColorSlider" 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="UWPC4FColorSlider.MainPage" mc:Ignorable="d">
    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <TextBlock x:Name="tblTitle" HorizontalAlignment="Left" Margin="455,42,0,0" TextWrapping="Wrap" Text="Coding4Fun Color Slider Demo" VerticalAlignment="Top" Height="35" Width="369" FontWeight="Bold" FontSize="24" />
        <StackPanel x:Name="SPColSli" HorizontalAlignment="Left" Height="564" Margin="76,120,0,0" VerticalAlignment="Top" Width="1167">
            <Controls:ColorSlider x:Name="CSVer" Height="443" Margin="50,0,1044,0" Orientation="Vertical" ColorChanged="CSVer_ColorChanged" />
            <Controls:ColorSlider x:Name="CSHor" Height="61" Margin="201,0,61,0" Orientation="Horizontal" ColorChanged="CSHor_ColorChanged" />
        </StackPanel>
    </Grid>
</Page>

Step 9

Add the code in ColorChanged event method in Mainpage.xaml.cs for changing StackPanel background.

private void CSVer_ColorChanged(object sender, Windows.UI.Color color) {
    SPColSli.Background = new SolidColorBrush(color);
}
private void CSHor_ColorChanged(object sender, Windows.UI.Color color) {
    SPColSli.Background = new SolidColorBrush(color);
}

Step 10

Deploy your app in Local Machine. The output of the UWPC4FColorSlider app is shown below.



Sliding the color from Horizontal ColorSlider



Sliding the color from Vertical ColorSlider.



Summary

Now, you have successfully tested Code4Fun ToolKit – Colorslider in Visual C# - UWP environment and changed the StackPanel background color.