In this article, you will learn how to use Coding4Fun ColorSlider in UWP development, with XAML and Visual C#.
Before reading this article, please go through the following article.
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.
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.
Universal Windows Platform - Complete Solution