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">
<Grid x:Name="LayoutRoot" Background="Cyan">
<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.