Skip to main content

C# Silverlight - Using Sliders [Beginner]


Being the month of Silverlight, I decided to get off my PHP and JS butt, and learn something new. I am incredibly new to the whole silvery-light thing, but luckily with Visual Studio on your side, it is pretty easy to get things going. I am also using VS2010, which makes the whole experience a grand opening of new stuff for me.

So to begin my foray into Silverlight, I did something easy, but slightly useful at the same time. What I have made is a set of three sliders that represent a RGB value, which in turn changes the color of some text. It is some pretty short code, but it does showcase how to change the color of TextBlock text, which took me a few minutes to find.

[silverlight width="400" height="300" src="SilverlightApplication.xap" border="true"]
To begin with, lets get the XAML out of the way:
<UserControl x:Class="SilverLightColorSliders.Page"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    d:DesignHeight="300" 
    d:DesignWidth="400" 
    xmlns:basics="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls">

  <Grid x:Name="LayoutRoot" Background="White">
    <Slider Height="22" Name="redSlider" Width="100" Maximum="255" 
      ValueChanged="slider_ValueChanged" SmallChange="1" 
      Margin="145,118,0,0" HorizontalAlignment="Left" 
      VerticalAlignment="Top" />
    <Slider Height="22" HorizontalAlignment="Left" Margin="145,146,0,0" 
      Name="greenSlider" VerticalAlignment="Top" Width="100" Maximum="255" 
      ValueChanged="slider_ValueChanged" SmallChange="1" />
    <Slider Height="22" HorizontalAlignment="Left" Margin="145,174,0,0" 
      Name="blueSlider" VerticalAlignment="Top" Width="100" Maximum="255" 
      ValueChanged="slider_ValueChanged" SmallChange="1" />
    <TextBlock Height="30" Margin="96,79,96,191" Name="textBlock1" 
      Text="Switch on the Code" Width="207" FontSize="20" 
      HorizontalAlignment="Left" VerticalAlignment="Top" />
    <TextBlock Height="21" HorizontalAlignment="Left" Margin="266,118,0,0" 
      Name="redValue" Text="0" VerticalAlignment="Top" Width="44" />
    <TextBlock Height="21" HorizontalAlignment="Left" Margin="266,145,0,0" 
      Name="greenValue" Text="0" VerticalAlignment="Top" Width="44" />
    <TextBlock Height="21" HorizontalAlignment="Left" Margin="266,172,0,0" 
      Name="blueValue" Text="0" VerticalAlignment="Top" Width="44" />
    <TextBlock Height="21" HorizontalAlignment="Left" Margin="80,119,0,0" 
      Name="redLabel" Text="Red" VerticalAlignment="Top" Width="59" 
      TextAlignment="Right" />
    <TextBlock Height="21" HorizontalAlignment="Left" Margin="80,173,0,0" 
      Name="blueLabel" Text="Blue" VerticalAlignment="Top" Width="60" 
      TextAlignment="Right" />
    <TextBlock Height="21" HorizontalAlignment="Left" Margin="80,146,0,0" 
      Name="greenLabel" Text="Green" VerticalAlignment="Top" Width="59" 
      TextAlignment="Right" />
  </Grid>
</UserControl>
 
The important things we have here are the sliders and the main "SOTC" label. Of course we have other labels that help us know what we are changing, but essentially all we need are the sliders and the text to recolor. The sliders are set to a max of 255, which is the maximum value for any RGB value.

The key to changing the color of the text inside the TextBlock is an abstract object called a Brush. Since it is abstract, we can't just use it willy-nilly. Thankfully, C# has objects we can use for exactly what we need to do, in our case a SolidColorBrush object.

To use this brush, all we need to do is give it a color object with the RGB values we want. The C# Code will end up looking something like so:
    private void slider_ValueChanged(object sender, 
      RoutedPropertyChangedEventArgs<double> e)
    {
      Color textColor = new Color();
      textColor.A = 255;
      textColor.R = (byte)redSlider.Value;
      redValue.Text = Math.Round(redSlider.Value).ToString();
      textColor.G = (byte)greenSlider.Value;
      greenValue.Text = Math.Round(greenSlider.Value).ToString();
      textColor.B = (byte)blueSlider.Value;
      blueValue.Text = Math.Round(blueSlider.Value).ToString();

      SolidColorBrush textBrush = new SolidColorBrush(textColor);
      textBlock1.Foreground = textBrush;
    }
 
What we want to do is change the color when any of the sliders change their value. So this event is tied to all of the sliders, which makes for great code reuse. What the event is actually doing is quite simple. We create a new C# color object, giving it a full value for alpha. This way there will be no transparency. Next, for each of the three RGB values, we pass it to the color object then display the value in the corresponding TextBlock. Finally we create a SolidColorBrush with the Color object and set the Foreground property of the TextBlock object. The Foreground property is actually a Brush that controls the color of the text inside the TextBlock, so all we have to do is set that property to our Brush object. The end result is text that changes color when we change the color's value.

Well, that is pretty much all there is to this tutorial. I hope this was informative, and there are sure to be more Silverlight tutorials to come.
Labels:

Comments

Post a Comment

Popular posts from this blog

C# Snippet - Shuffling a Dictionary [Beginner]

Randomizing something can be a daunting task, especially with all the algorithms out there. However, sometimes you just need to shuffle things up, in a simple, yet effective manner. Today we are going to take a quick look at an easy and simple way to randomize a dictionary, which is most likely something that you may be using in a complex application. The tricky thing about ordering dictionaries is that...well they are not ordered to begin with. Typically they are a chaotic collection of key/value pairs. There is no first element or last element, just elements. This is why it is a little tricky to randomize them. Before we get started, we need to build a quick dictionary. For this tutorial, we will be doing an extremely simple string/int dictionary, but rest assured the steps we take can be used for any kind of dictionary you can come up with, no matter what object types you use. Dictionary < String , int > origin = new Dictionary < string , int >();
1 comment
Read more

C# Snippet - The Many Uses Of The Using Keyword [Beginner]

What is the first thing that pops into your mind when you think of the using keyword for C#? Probably those lines that always appear at the top of C# code files - the lines that import types from other namespaces into your code. But while that is the most common use of the using keyword, it is not the only one. Today we are going to take a look at the different uses of the using keyword and what they are useful for. The Using Directive There are two main categories of use for the using keyword - as a "Using Directive" and as a "Using Statement". The lines at the top of a C# file are directives, but that is not the only place they can go. They can also go inside of a namespace block, but they have to be before any other elements declared in the namespace (i.e., you can't add a using statement after a class declaration). Namespace Importing This is by far the most common use of the keyword - it is rare that you see a C# file that does not h
Post a Comment
Read more

C# WPF Printing Part 2 - Pagination [Intermediate]

About two weeks ago, we had a tutorial here at SOTC on the basics of printing in WPF . It covered the standard stuff, like popping the print dialog, and what you needed to do to print visuals (both created in XAML and on the fly). But really, that's barely scratching the surface - any decent printing system in pretty much any application needs to be able to do a lot more than that. So today, we are going to take one more baby step forward into the world of printing - we are going to take a look at pagination. The main class that we will need to do pagination is the DocumentPaginator . I mentioned this class very briefly in the previous tutorial, but only in the context of the printing methods on PrintDialog , PrintVisual (which we focused on last time) and PrintDocument (which we will be focusing on today). This PrintDocument function takes a DocumentPaginator to print - and this is why we need to create one. Unfortunately, making a DocumentPaginator is not as easy as
Post a Comment
Read more