Color Slider in Windows Store App

Introduction

In this article we will use a slider control in a Metro Style Application. We are going to implement a color slider, which will be applied on an ellipse control of a XAML control. In this application we will take a ellipse control and three slider control for color sliding red, blue and green. Also, to specify the slider colors we used three text blocks. The event of the slider control, the slidervaluechanged event, will be used to make the action of slider control and associated code put on this event on code behind file.

In the following we are providing the whole code of the XAML file and the code behind file to create this mini-application.

Step 1 : First, you will create a new Metro Style Application. Let us see the description with images of how you will create it.

Open Visual Studio 2012
File -> New -> Project
Choose Template -> Visual C# -> Metro Style Application
Rename the application

Step 2 : In the Solution Explorer there are two files that we will primarily work with; the MainPage.xaml and MainPage.xaml.cs files.

Step 3 : The MainPage.xaml file is as in the following code:

Code :

<Page

x:Class="App3.MainPage"

IsTabStop="false"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

xmlns:local="using:App3"

xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

mc:Ignorable="d">

<Slider Height="44" Name="redSlider" Width="365" Maximum="255"

ValueChanged="slider_ValueChanged" SmallChange="1"

Margin="145,143,0,0" HorizontalAlignment="Left"

VerticalAlignment="Top" />

<Slider Height="44" HorizontalAlignment="Left" Margin="145,176,0,0"

Name="greenSlider" VerticalAlignment="Top" Width="360" Maximum="255"

ValueChanged="slider_ValueChanged" SmallChange="1" />

<Slider Height="44" HorizontalAlignment="Left" Margin="145,214,0,0"

Name="blueSlider" VerticalAlignment="Top" Width="365" Maximum="255"

ValueChanged="slider_ValueChanged" SmallChange="1" />

<Ellipse Height="100" Width="100" x:Name="rectangle" Margin="157,33,0,0"

Fill="Gray"

HorizontalAlignment="Left" VerticalAlignment="Top" />

<TextBlock Height="21" HorizontalAlignment="Left" Margin="80,143,0,0"

Name="redLabel" Text="Red" VerticalAlignment="Top" Width="59"

TextAlignment="Right" FontSize="20" FontWeight="Bold" Foreground="Red" />

<TextBlock Height="21" HorizontalAlignment="Left" Margin="80,214,0,0"

Name="blueLabel" Text="Blue" VerticalAlignment="Top" Width="60"

TextAlignment="Right" FontSize="20" FontWeight="Bold" Foreground="Blue" />

<TextBlock Height="21" HorizontalAlignment="Left" Margin="80,176,0,0"

Name="greenLabel" Text="Green" VerticalAlignment="Top" Width="59"

TextAlignment="Right" FontSize="20" FontWeight="Bold" Foreground="Green" />

</Grid>

</Page>

Step 4 : The MainPage.xaml.cs file is as in the following code:

Code :

using System;

using System.Collections.Generic;

using System.IO;

using System.Linq;

using Windows.Foundation;

using Windows.Foundation.Collections;

using Windows.UI.Xaml;

using Windows.UI.Xaml.Controls;

using Windows.UI.Xaml.Controls.Primitives;

using Windows.UI.Xaml.Data;

using Windows.UI.Xaml.Input;

using Windows.UI.Xaml.Media;

using Windows.UI.Xaml.Navigation;

namespace App3

{

public sealed partial class MainPage : Page

{

public MainPage()

{

this.InitializeComponent();

}

protected override void OnNavigatedTo(NavigationEventArgs e)

{

}

private void slider_ValueChanged(object sender, RangeBaseValueChangedEventArgs e)

{

Windows.UI.Color textColor = new Windows.UI.Color();

textColor.A = 255;

textColor.R = (byte)redSlider.Value;

textColor.G = (byte)greenSlider.Value;

textColor.B = (byte)blueSlider.Value;

SolidColorBrush textBrush = new SolidColorBrush(textColor);

rectangle.Fill = textBrush;

}

Step 5 : After running this code the output looks like this:

Using sliders you will see the changes in colors of the ellipse control.