Slider Control Binding in Windows Store Apps

Introduction

Today we explain how to bind a slider control in Windows Store apps. The Slider control is a very useful control that can bind with another control and we can change the value and properties of the control to move the slider from left to right and top to down. Such as changing the TextBox value using the slider, changing the background color using a slider etc.

In this example we are binding a slider control from three types. The Slider control with a TextBox value, Slider control with a background color and a slider control with a 3D effect.

Slider control with TextBox value

Here we are binding the slider control with a TextBox value. You can change the TextBox value by moving the slider from left to right.

<Slider HorizontalAlignment="Left" VerticalAlignment="Top" Width="309" Margin="488,76,0,0" Minimum="0"

 Maximum="100" x:Name="SliderCon" Value="0"/>

<TextBox HorizontalAlignment="Left" TextWrapping="Wrap" Text="{Binding ElementName=SliderCon, Mode=OneWay, Path=Value}" VerticalAlignment="Top"Width="218"/>

Slider control with background color

Here we are using three sliders for three colors (RGB). Move the slider to change the color. In this example we are using the "Windows.UI" namespace for the Color class.

Write this code in the "MainPage.xaml" page.

<Grid Background="NavajoWhite">

        <Grid.ColumnDefinitions>

            <ColumnDefinition Width="120" />

            <ColumnDefinition Width="350" />

        </Grid.ColumnDefinitions>

        <Grid.RowDefinitions>

            <RowDefinition Height="75"/>

            <RowDefinition Height="75"/>

            <RowDefinition Height="75"/>

            <RowDefinition Height="150"/>

        </Grid.RowDefinitions>

        <Rectangle x:Name="Rect" Width="300" Height="120" Grid.Row="3" Grid.Column="1"></Rectangle>

        <TextBlock HorizontalAlignment="Left" Grid.Column="0" Grid.Row="0" FontFamily="Segoe UI Semilight" FontSize="20" FontWeight="Bold" TextWrapping="Wrap" Text="Red" VerticalAlignment="Top"/>

        <Slider HorizontalAlignment="Left"  Grid.Column="1" Grid.Row="0" VerticalAlignment="Top" Width="300" x:Name="RedSlider" Minimum="0" Maximum="255" ValueChanged="RedSlider_ValueChanged"/>

        <TextBlock HorizontalAlignment="Left" Grid.Column="0" Grid.Row="1" FontFamily="Segoe UI Semilight" FontSize="20" FontWeight="Bold" TextWrapping="Wrap" Text="Green" VerticalAlignment="Top"/>

        <Slider HorizontalAlignment="Left"  Grid.Column="1" Grid.Row="1" VerticalAlignment="Top" Width="300" x:Name="GreenSlider" Minimum="0" Maximum="255" ValueChanged="GreenSlider_ValueChanged" />

        <TextBlock HorizontalAlignment="Left" Grid.Column="0" Grid.Row="2" FontFamily="Segoe UI Semilight" FontSize="20" FontWeight="Bold" TextWrapping="Wrap" Text="Blue" VerticalAlignment="Top"/>

        <Slider HorizontalAlignment="Left"  Grid.Column="1" Grid.Row="2" VerticalAlignment="Top" Width="300" x:Name="BlueSlider" Minimum="0" Maximum="255" ValueChanged="BlueSlider_ValueChanged"/>

    </Grid>

Here is the "Main.xaml.cs" pegs code.

using System;

using System.Collections.Generic;

using System.IO;

using System.Linq;

using Windows.Foundation;

using Windows.Foundation.Collections;

using Windows.UI;

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 SliderControl

{

    public sealed partial class MainPage : Page

    {

        public MainPage()

        {

            this.InitializeComponent();

        } 

        protected override void OnNavigatedTo(NavigationEventArgs e)

        {

        } 

        private void RedSlider_ValueChanged(object sender, RangeBaseValueChangedEventArgs e)

        {

            ChangeRectColor();

        }

        private void BlueSlider_ValueChanged(object sender, RangeBaseValueChangedEventArgs e)

        {

            ChangeRectColor();

        }

        private void GreenSlider_ValueChanged(object sender, RangeBaseValueChangedEventArgs e)

        {

            ChangeRectColor();

        } 

        private void ChangeRectColor()

        {

            Color MyColor = Color.FromArgb(255, Convert.ToByte(RedSlider.Value), Convert.ToByte(GreenSlider.Value), Convert.ToByte(BlueSlider.Value));

            Rect.Fill = new SolidColorBrush(MyColor);

        }   

    }

}

 

Slider control with 3D effect

We can also use the slider control to handle the 3D effect. Move the slider to see the 3D effect.

<Grid Background="NavajoWhite">

        <Grid.ColumnDefinitions>

            <ColumnDefinition Width="300" />

            <ColumnDefinition Width="350" />

        </Grid.ColumnDefinitions>      

        <Grid.RowDefinitions>

            <RowDefinition Height="75"/>

            <RowDefinition Height="75"/>

            <RowDefinition Height="75"/>

            <RowDefinition Height="75"/>

            <RowDefinition Height="120"/>

        </Grid.RowDefinitions>     

        <TextBlock HorizontalAlignment="Left" Grid.Column="1" Grid.Row="0" FontFamily="Segoe UI Semilight" FontSize="30" FontWeight="Bold" TextWrapping="Wrap" Text="3D Effect using slider" VerticalAlignment="Top"/>

        <TextBlock HorizontalAlignment="Left" Grid.Column="0" Grid.Row="1" FontFamily="Segoe UI Semilight" FontSize="20" FontWeight="Bold" TextWrapping="Wrap" Text="RotationX" VerticalAlignment="Top"/>

        <Slider HorizontalAlignment="Left" x:Name="RotationX" Value="{Binding Path=RotationX, ElementName=ImgRotation, Mode=TwoWay}" Grid.Column="1" Grid.Row="1" VerticalAlignment="Top" Width="300"/>

        <TextBlock HorizontalAlignment="Left" Grid.Column="0" Grid.Row="2" FontFamily="Segoe UI Semilight" FontSize="20" FontWeight="Bold" TextWrapping="Wrap" Text="RotationY" VerticalAlignment="Top"/>

        <Slider HorizontalAlignment="Left" x:Name="RotationY" Value="{Binding Path=RotationY, ElementName=ImgRotation, Mode=TwoWay}" Grid.Column="1" Grid.Row="2" VerticalAlignment="Top" Width="300"/>

        <TextBlock HorizontalAlignment="Left" Grid.Column="0" Grid.Row="3" FontFamily="Segoe UI Semilight" FontSize="20" FontWeight="Bold" TextWrapping="Wrap" Text="RotationZ" VerticalAlignment="Top"/>

        <Slider HorizontalAlignment="Left" x:Name="RotationZ" Value="{Binding Path=RotationZ, ElementName=ImgRotation, Mode=TwoWay}" Grid.Column="1" Grid.Row="3" VerticalAlignment="Top" Width="300"/>

        <Image Height="150"  Source="mywall.jpg" Grid.Column="1" Grid.Row="4" Width="350" Opacity=".4"/>

        <Image Grid.Column="1" Grid.Row="4" Width="350" Height="150" Source="mywall.jpg">

            <Image.Projection>

                <PlaneProjection x:Name="ImgRotation"/>

            </Image.Projection>

        </Image>

    </Grid>