Interesting things to do with Silverlight 2


Introduction

Apart from doing the usual "rich user interface" building tasks, you can also experiment with Silverlight 2 to achieve interesting results and outcomes. For example, you can create a Silverlight 2 application having a button with a filled rectangular content, like the one you see on media players.

Let's see how you can do this.

Procedure:

Create a Silverlight 2 application and add a Button control element in the Page.xaml.

Assume that the resultant code in Page.xaml looks like this:

<UserControl xmlns:basics="clr-namespace:System.Windows.Controls;assembly=
System.Windows.Controls"
 x:Class="SilverlightApplication1.Page"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml
/presentation
"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Width="400" Height="300">
    <Grid x:Name="LayoutRoot" Background="White">
        <Button Height="100" Width="100">
        </Button>
    </Grid>
</
UserControl>

Now add a Button.Content element between the <Button></Button> tags as shown below.

<UserControl xmlns:basics="clr-namespace:System.Windows.Controls;assembly=
System.Windows.Controls"
 x:Class="SilverlightApplication1.Page"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml
/presentation
"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Width="400" Height="300">
    <Grid x:Name="LayoutRoot" Background="White">
        <Button Height="100" Width="100">
            <Button.Content>
           </Button.Content>
        </Button>
    </Grid>
</
UserControl>

Now add a Rectangle element as shown below.

<UserControl xmlns:basics="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls"  x:Class="SilverlightApplication1.Page"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Width="400" Height="300">
    <Grid x:Name="LayoutRoot" Background="White">
        <Button Height="100" Width="100">
            <Button.Content>
                <Rectangle Fill="BlueViolet"  Height="20" Width="20"></Rectangle>
            </Button.Content>
        </Button>
    </Grid>
</
UserControl>

Save, build and execute the application. The output would be as shown in Figure 1.



Figure 1: Button with Rectangle content

Another interesting thing to do is make use of threading support to create a marquee or scrolling text. Let's see how you can do this.

Create a Silverlight 2 application and add the following code to Page.xaml.

UserControl x:Class="ThreadDemo.Page"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Width="400" Height="250">
    <Grid x:Name="LayoutRoot" Background="Lavender">
        <Canvas Name="MyCanvas" Margin="50" Background="PaleGreen" Width="300">
            <Button Click="Button_Click" Content="Start"></Button>
            <TextBlock x:Name="Marquee" Canvas.Top="50" Canvas.Left="1" >This is a scrolling text</TextBlock>
        </Canvas>
    </Grid>
</
UserControl>

The resulting user interface will be as shown in Figure 2.



Figure 2: Creating a Scrolling text application

In the .cs file of Page.xaml, that is, Page.xaml.cs, replace the default existing code with following code:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using System.Threading;

namespace ThreadDemo
{
    public partial class Page : UserControl
    {
        private Thread _thread1;
        private static TextBlock _marquee;
        private static Canvas _canvas;
        private static bool _done = true;    

        public Page()
        {
            InitializeComponent();
            _marquee = Marquee;
            _canvas = MyCanvas;
        }

        public bool Done 
        {    
            get { return _done; } 
            set { _done = value; }  
        }       
        private void StartScroll()
        {
           
            _done = false;     
            _thread1 = new Thread(DoThread1);     
            _thread1.Start();        
        }       
        public static void DoThread1()
        {          
            while (!_done)       
        {
                _marquee.Dispatcher.BeginInvoke(delegate()   
            {
                double x = double.Parse( _marquee.GetValue(Canvas.LeftProperty).ToString()) ;
                x++;
                double canvas = double.Parse(_canvas.Width.ToString()); 
                _marquee.SetValue(Canvas.LeftProperty, x);
                if (x >= 180)
                {
                    _done = true;
                }
            });      
                Thread.Sleep(100);
                if (_done)
                {
                    break;
                }
        }     
        }    

        private void Button_Click(object sender, RoutedEventArgs e)
        {
         
            if (false == _done)          
            _done = true;        
        else           
            StartScroll(); 
        }  
    }
}


Here, you have created a Thread object and used an anonymous method inside the Thread worker method to perform the scrolling action. The variable x indicates the begin point of the scrolling of the text. It is incremented in the loop. The value at which x should stop incrementing has been hard-coded here as 180, if you wish, you can replace that with a programmatically computed value. When you save, build and run the application, and then click Start, you will see the text scrolling.

Conclusion: This article showed you how you can experiment with Silverlight.

Up Next
    Ebook Download
    View all
    Learn
    View all