This article demonstrates how to create a scale on a canvas. We can create a scale on a canvas control in Silverlight. For that we have created a custom control named Ruler Control in Silverlight.

Use this control on a canvas in our Silverlight application.

Step 1: Create a Ruler Control in Silverlight.
In RulerControl.Xaml file we have a canvas named LayoutRoot.
<Canvas x:Name="LayoutRoot" Background="White" />

Draw a line with the help of function in Silverlight. So we can add those lines on the canvas.

In RulerControl.Xaml.cs, we have a method which draws the lines on the canvas.
     public RulerControl()
        {
            InitializeComponent();
            this.Loaded += new RoutedEventHandler(MyrulerControl_Loaded);
        }

        void MyrulerControl_Loaded(object sender, RoutedEventArgs e)
        {
            AddLine();
        }

        public void AddLine()
        {
            int count = 0;
            for (int i = 0; i <= 500; i++)
            {
                if (i == 0 || i % 50 == 0)
                {
                    Line l = new Line
                    {
                        Stroke = new SolidColorBrush(Colors.Black),
                        X1 = i,
                        Y1 = this.Height - 2,
                        X2 = i,
                        Y2 = this.Height - 2 - this.Height / 2
                    };
// Add lines in Canvas
                    LayoutRoot.Children.Add(l);

                    TextBlock tb = new TextBlock();
                    tb.Text = count.ToString();
                    tb.FontSize = 9;
                    tb.SetValue(Canvas.LeftProperty, (double)(i - 3));
                    tb.SetValue(Canvas.TopProperty, 15.5);
                    LayoutRoot.Children.Add(tb);
                    count++;

                }

                else if (i % 10 == 0)
                {
                    Line l = new Line
                    {
                        Stroke = new SolidColorBrush(Colors.Black),
                        X1 = i,
                        Y1 = this.Height - 2,
                        X2 = i,
                        Y2 = this.Height - 2 - this.Height / 4
                    };
                    LayoutRoot.Children.Add(l);
                }
 
            }
        }

Step 2: Use a RulerControl on another Silverlight page
Let's say we have MainPage.Xaml.
<x:Class="SilverlightApplication.MainPage">
<xmlns:rulerctrl="clr-namespace:SilverlightApplication.Controls">

<Canvas Height="27"  Name="canvas1"  Width="522" Background="White" Canvas.Left="27" >
 <rulerctrl:RulerControl Height="18" VerticalAlignment="Top"x:Name="firstruler"/>
</Canvas>

It looks like as below.
canvas control in silverlight

Step 3: Move button on canvas scale.
We can move the button on the canvas. Take one Button in the Canvas as follows.
<Grid x:Name="LayoutRoot" Background="White">
        <Canvas Height="27"  Name="canvas1"  Width="522" Background="White" VerticalAlignment="Top" MouseMove="canvas1_MouseMove">
            <rulerctrl:RulerControl Height="18" VerticalAlignment="Top" x:Name="firstruler"></rulerctrl:RulerControl>
            <Button Height="18" Width="20" Canvas.Left="61" Canvas.Top="34" x:Name="btnFirst" Content="F" Style="{StaticResource btnstyle }">
                <Button.RenderTransform>
                    <RotateTransform Angle="180"></RotateTransform>
                </Button.RenderTransform>
            </Button>
        </Canvas>
    </Grid>

Here we have MouseMove event of canvas. Using this we can move the button on canvas.
Like,
private void canvas1_MouseMove(object sender, MouseEventArgs e)
 {
     btnFirst.SetValue(Canvas.LeftProperty, e.GetPosition(canvas1).X);
 }

Output looks like as followingThis article demonstrates how to create a scale on a canvas. We can create a scale on a canvas control in Silverlight. For that we have created a custom control named Ruler Control in Silverlight. Use this control on a canvas in our Silverlight application.

Step 1: Create a Ruler Control in Silverlight.
In RulerControl.Xaml file we have a canvas named LayoutRoot.
<Canvas x:Name="LayoutRoot" Background="White" />

Draw a line with the help of function in Silverlight. So we can add those lines on the canvas.

In RulerControl.Xaml.cs, we have a method which draws the lines on the canvas.
     public RulerControl()
        {
            InitializeComponent();
            this.Loaded += new RoutedEventHandler(MyrulerControl_Loaded);
        }

        void MyrulerControl_Loaded(object sender, RoutedEventArgs e)
        {
            AddLine();
        }

        public void AddLine()
        {
            int count = 0;
            for (int i = 0; i <= 500; i++)
            {
                if (i == 0 || i % 50 == 0)
                {
                    Line l = new Line
                    {
                        Stroke = new SolidColorBrush(Colors.Black),
                        X1 = i,
                        Y1 = this.Height - 2,
                        X2 = i,
                        Y2 = this.Height - 2 - this.Height / 2
                    };
// Add lines in Canvas
                    LayoutRoot.Children.Add(l);

                    TextBlock tb = new TextBlock();
                    tb.Text = count.ToString();
                    tb.FontSize = 9;
                    tb.SetValue(Canvas.LeftProperty, (double)(i - 3));
                    tb.SetValue(Canvas.TopProperty, 15.5);
                    LayoutRoot.Children.Add(tb);
                    count++;

                }

                else if (i % 10 == 0)
                {
                    Line l = new Line
                    {
                        Stroke = new SolidColorBrush(Colors.Black),
                        X1 = i,
                        Y1 = this.Height - 2,
                        X2 = i,
                        Y2 = this.Height - 2 - this.Height / 4
                    };
                    LayoutRoot.Children.Add(l);
                }
 
            }
        }

Step 2: Use a RulerControl on another Silverlight page
Let's say we have MainPage.Xaml.
<x:Class="SilverlightApplication.MainPage">
<xmlns:rulerctrl="clr-namespace:SilverlightApplication.Controls">

<Canvas Height="27"  Name="canvas1"  Width="522" Background="White" Canvas.Left="27" >
 <rulerctrl:RulerControl Height="18" VerticalAlignment="Top"x:Name="firstruler"/>
</Canvas>
It looks like as below.

canvas control in silverlight

Step 3: Move button on canvas scale.
We can move the button on the canvas. Take one Button in the Canvas as follows.
<Grid x:Name="LayoutRoot" Background="White">
        <Canvas Height="27"  Name="canvas1"  Width="522" Background="White" VerticalAlignment="Top" MouseMove="canvas1_MouseMove">
            <rulerctrl:RulerControl Height="18" VerticalAlignment="Top" x:Name="firstruler"></rulerctrl:RulerControl>
            <Button Height="18" Width="20" Canvas.Left="61" Canvas.Top="34" x:Name="btnFirst" Content="F" Style="{StaticResource btnstyle }">
                <Button.RenderTransform>
                    <RotateTransform Angle="180"></RotateTransform>
                </Button.RenderTransform>
            </Button>
        </Canvas>
    </Grid>

Here we have MouseMove event of canvas. Using this we can move the button on canvas.
Like,
private void canvas1_MouseMove(object sender, MouseEventArgs e)
 {
     btnFirst.SetValue(Canvas.LeftProperty, e.GetPosition(canvas1).X);
 }

Output looks like as following

Introduction

Silverlight is evolving with a lot of new features in each and every version release. The AutoComplete text feature is one such example. In this article I will demonstrate the implementation of the AutoComplete text feature in a Silverlight application. I will also create a sample Silverlight application to help explain the code. I have used Silverlight 4.0 and Visual Studio 2010 for developing the sample application.

AutoComplete Functionality

AutoComplete text functionality is not only a fancy effect but it's also a pretty useful feature from a user prospective and this feature is available in most of the latest applications. As the user enters text in a text box, a list of values gets populated and are listed in a similar fashion to that of a drop down based on the entered text. So the user is able to see the possible suggestions and can select a value from them or they also have the freedom to enter their own text as the base control is a textbox.

Some popular websites implementing the auto complete functionality are www.google.com,www.youtube.com, etc.,

Silverlight AutoCompleteBox Control

Implementing the autocomplete functionality in a Silverlight application is pretty straight forward because of the availability of the AutoCompleteBox control. This control is available in Silverlight 3.0 and higher versions. The developer only needs to set the ItemSource property of the AutoCompleteBox control with the value collection that is to be listed. The rest will be taken care by the control itself. 

Below are some of the useful settings that can be leveraged from the AutoCompleteBox control.

1. FilterMode – Specifies the filter mode to display the data (StartsWith, Contains, Equals, etc.,)
2. MinimumPrefixLength – Minimum prefix length for the auto complete feature to be triggered
3. MaxDropDownHeight – Maximum height of the dropdown
4. IsTextCompletionEnabled – If set to true then the first match found during the filtering process will be populated in the TextBox

Silverlight AutoCompleteBox Implementation

In this section we will create a sample Silverlight window implementing the autocomplete text feature. In the MainWindow.xaml add an AutoCompleteBox control and set the basic properties. Below is the code:

<UserControl xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk"  
    x:Class="AutoCompleteBoxSample.MainPage"
    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">

    <Grid x:Name="LayoutRoot" Background="White">
        <Canvas>
            <sdk:Label Content="Enter the city: " Margin="46,76,264,198" />
            <sdk:AutoCompleteBox Height="28" HorizontalAlignment="Left" Margin="142,77,0,0" FilterMode="StartsWith"
MinimumPrefixLength="1" MaxDropDownHeight="80" Name="autoCompleteBox1" VerticalAlignment="Top" Width="120"
Canvas.Left="-6" Canvas.Top="-5" />
        </Canvas>
    </Grid>
</UserControl>

namespace AutoCompleteBoxSample
{
    public partial class MainPage : UserControl
    {
        List<string> _cities;

        public MainPage()
        {
            InitializeComponent();
            autoCompleteBox1.ItemsSource = PopulateCities();
        }

        private IEnumerable PopulateCities()
        {
            _cities = new List<string>();
            _cities.Add("Boston");
            _cities.Add("Bangalore");
            _cities.Add("Birmingham");
            _cities.Add("Auckland");
            _cities.Add("Amsterdam");
            _cities.Add("Aspen");
            return _cities;
        }
    }
}

Run the application and you will see the figure below:

Using a DomainDataSource

In the above case we had the data directly in the application and it was hence hard-coded. In case if the data lies in the database, then the WCF RIA service and the DomainDataSource comes into play. Create a WCF RIA service and hook up the service to expose the data in the table through a generated data context method. Use a DomainDataSource to act as an ItemSource for the AutoCompleteBox control.

Below is the XAML code:

<Canvas>
     <riaControls:DomainDataSource AutoLoad="True"
                                      QueryName="GetCities"
                                      x:Name="CityDataSource">
          <riaControls:DomainDataSource.DomainContext>
                    <web:MyDatabaseContext />
          </riaControls:DomainDataSource.DomainContext>
     </riaControls:DomainDataSource>
     <sdk:Label Content="Enter the city: " Margin="46,76,264,198" />
<sdk:AutoCompleteBox Height="28" ItemsSource="{Binding Data, ElementName=CityDataSource}"
HorizontalAlignment="Left" Margin="142,77,0,0" FilterMode="StartsWith" MinimumPrefixLength="1" MaxDropDownHeight="80"
Name="autoCompleteBox1" VerticalAlignment="Top" Width="120" Canvas.Left="-6" Canvas.Top="-5" />
</Canvas>