Today, I will explain you how to create an analog clock apps in Silverlight 6. Of course open new projectin visual studio and select a Silverlight project. In Mainpage.xaml  draw an ellipse which will serve as background for our Analog clock. The code looks as following:

<Grid x:Name="LayoutRoot" Background="White">
        <Ellipse Margin="165,67,145,83" Fill="Goldenrod" Width="330"
         Height="330" Opacity="0.7"/>
    </Grid>
Then, draw another ellipse in the same grid which will serve as Outer Rim for our analog clock. The Complete code looks on the below:
<Ellipse Height="330" Margin="156,58,154,92" Width="330" 
Stroke="Goldenrod">
            <Ellipse.Fill>
<LinearGradientBrush EndPoint="0.84,0.87" Opacity="0.9"  
StartPoint="0.164,0.129">
                    <GradientStop Color="Goldenrod"/>
                    <GradientStop Color="Gold" Offset="0.7"/>
                </LinearGradientBrush>
            </Ellipse.Fill>
        </Ellipse>              

Next, I want to draw another ellipse in the same grid which will serve as Bevel for our analog clock. And this is the code that I used:
        <Ellipse Height="290" Margin="156,58,154,92" Width="290" Stroke="Goldenrod">
            <Ellipse.Fill>
                    <LinearGradientBrush EndPoint="0.84,0.87" Opacity="0.5" StartPoint="0.164,0.129">
                    <GradientStop Color="Goldenrod"/>
                    <GradientStop Color="Goldenrod" Offset="0.987"/>
                </LinearGradientBrush>
            </Ellipse.Fill>
        </Ellipse>     

Now draw another ellipse in the same grid which will serve as a Face for our analog clock. This is the code snippet:
<Ellipse Height="270" Margin="176,78,174,112" Width="270"
         Stroke="Goldenrod" Fill="Yellow" Opacity="0.3"/>

Now we are going to draw the hour,minute and seconds hand. Then draw a rectangle in the same grid which will serve as a Hour hand for our analog clock with the code below:
<Rectangle x:Name="hourHand" Height="59" Margin="315.75,180,314.25,0"
        VerticalAlignment="Top" Fill="Black" Stroke="Black" Width="10" RenderTransformOrigin="0.525,1.428">
            <Rectangle.RenderTransform>
                <RotateTransform x:Name="hourHandAnimation"/>
            </Rectangle.RenderTransform>
        </Rectangle>

Now draw another rectangle in the same grid which will serve as a Minute hand for our analog clock. And this is the code that I used:
<Rectangle x:Name="minuteHand" Height="80" Margin="316.75,160,315.25,0"       
VerticalAlignment="Top" Fill="Black" Stroke="Black" Width="8"
        RenderTransformOrigin="0.5,1.312" >
            <Rectangle.RenderTransform>
                <RotateTransform x:Name="minuteHandAnimation"/>
            </Rectangle.RenderTransform>
        </Rectangle>

Now we are going to draw another rectangle in the same grid which will serve as a Seconds hand for our analog clock. And this is the code that I used:
<Rectangle Height="80" Margin="318.25,160,316.75,0"
        VerticalAlignment="Top" Fill="#FFFF0000" Stroke="#FF000000"
        Width="5" RenderTransformOrigin="0.10,1.312" >
            <Rectangle.RenderTransform>
                <RotateTransform x:Name="secondHandAnimation"/>
            </Rectangle.RenderTransform>
        </Rectangle>

Now, our design part is complete. Now we have to give animations to our hour, minute and second’s hands. For this, let us take a storyboard. We should write the code for storyboard outside the Grid.  The complete code for all the three animations is as follows.
<UserControl.Resources>
        <Storyboard x:Name="silverlightClock">
            <DoubleAnimation x:Name="hourAnimation"                            
                             Storyboard.TargetName="hourHandAnimation"
                             Storyboard.TargetProperty="Angle"
                             Duration="12:0:0" RepeatBehavior="Forever" To="360"/>          
            <DoubleAnimation x:Name="minuteAnimation"
                             Storyboard.TargetName="minuteHandAnimation"
                             Storyboard.TargetProperty="Angle"
                             Duration="1:0:0" RepeatBehavior="Forever"/>                                                                
            <DoubleAnimation x:Name="secondAnimation"                            
                             Storyboard.TargetName="secondHandAnimation"
                             Storyboard.TargetProperty="Angle"
                             Duration="0:1:0" RepeatBehavior="Forever"/>                                   
 </Storyboard>
 </UserControl.Resources>

Now we have to write the code for these 3 animations (hourAnimation, minuteAnimation  and secondAnimation ) in MainPage.xaml.cs. The code looks as follows.
private void startClock(object sender, RoutedEventArgs e)
        {
            System.DateTime currentTime = DateTime.Now;
double hourAngle = ((float)currentTime.Hour) / 12 * 360 +                 
currentTime.Minute/2;          
hourAnimation.From = hourAngle;
            hourAnimation.To = hourAngle + 360;         
           double minuteAngle = ((float)currentTime.Minute) / 60 * 360;
            minuteAnimation.From = minuteAngle;
            minuteAnimation.To=minuteAngle+360;
           double secondAngle = ((float)currentTime.Second) / 60 * 360;
            secondAnimation.From = secondAngle;
            secondAnimation.To = secondAngle + 360;
            silverlightClock.Begin();
        }                          

We need to call the method “startClock” in our grid control and assign it to “Loaded” property of the grid control. The code for this looks as follows.
  <Grid x:Name="LayoutRoot" Background="White" Loaded="startClock"> 
</Grid>

Finally! Our Analog clock is ready. Now you should refresh and see it.

HostForLIFE.eu Silverlight 6 Hosting
HostForLIFE.eu is European Windows Hosting Provider which focuses on Windows Platform only. We deliver on-demand hosting solutions including Shared hosting, Reseller Hosting, Cloud Hosting, Dedicated Servers, and IT as a Service for companies of all sizes. We have customers from around the globe, spread across every continent. We serve the hosting needs of the business and professional, government and nonprofit, entertainment and personal use market segments.

This article will explore how to use the ViewBox control in Silverlight 6. The ViewBox control allows you to place a child control such as Image within it in such a way that it will be scaled appropriately to fit the available without any distortion. It is typically used in 2D graphics.

We will begin with creating a new Silverlight 6 project. Modify the existing XAML code of MainPage.xaml so that a Grid of 1 column and three rows is created. The code for the same is shown below:

<UserControl x:Class="SilverlightDemo.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" xmlns:sdk=http://schemas.microsoft.com/winfx/2006/xaml/presentation/ sdk HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
    <Grid x:Name="LayoutRoot" Background="White" Height="300" Width="300">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="200" />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>
    </Grid>
</UserControl>

Drag and drop the Viewbox control from the Toolbox into the XAML code between the <Grid></Grid> tags. Specify its row and column in the grid to be 0. The resulting code is seen below.

<UserControl x:Class="SilverlightDemo.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" xmlns:sdk=http://schemas.microsoft.com/winfx/2006/xaml/presentation/ sdk HorizontalAlignment="Stretch" VerticalAlignment="Stretch">        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="200" />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>
         <controls:Viewbox Grid.Row="0" Grid.Column="0" Height="120" Width="120">
  </controls:Viewbox> 
    </Grid>
</UserControl>

Drag and drop the Viewbox control from the Toolbox into the XAML code between the <Grid></Grid> tags. Specify its row and column in the grid to be 0. The resulting code is seen below.

<UserControl x:Class="SilverlightDemo.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" xmlns:sdk=http://schemas.microsoft.com/winfx/2006/xaml/presentation/ sdk HorizontalAlignment="Stretch" VerticalAlignment="Stretch">        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="200" />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>
         <controls:Viewbox Grid.Row="0" Grid.Column="0" Height="120" Width="120">
  </controls:Viewbox> 
    </Grid>
</UserControl>

Right click on the project name in the Solution Explorer pane and select Add Existing Item option. Choose the image "Winter.jg" from the My Documents\My Pictures\Sample Pictures folder.

Drag and drop an Image control in between the <controls:ViewBox> and </controls:ViewBox> tag and modify its code as shown below, to specify its source and size.

    <Grid x:Name="LayoutRoot" Background="White" Height="300" Width="300">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="200" />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>
         <controls:Viewbox Grid.Row="0" Grid.Column="0" Height="120" Width="120">
            <Image Source="Winter.jpg" Height="40" Width="40"></Image>
        </controls:Viewbox>
    </Grid>

Drag and drop another ViewBox and then an Image control in between the second <controls:ViewBox> and </controls:ViewBox> tag.

Modify the XAML as shown below:

    <Grid x:Name="LayoutRoot" Background="White" Height="300" Width="300">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="200" />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>
         <controls:Viewbox Grid.Row="0" Grid.Column="0" Height="120" Width="120">
            <Image Source="Winter.jpg" Height="40" Width="40"></Image>
        </controls:Viewbox>
<controls:Viewbox Grid.Row="1" Grid.Column="0" Height="70" Width="90">
    <Image Source="Winter.jpg" Height="40" Width="40"></Image></controls:Viewbox> 
    </Grid>

Save the solution, build and execute it. When you see the output, you will observe that the two images show no distortion whatsoever though their height and width are not the same. This has happened because of the ViewBox.

HostForLIFE.eu Silverlight 6 Hosting
HostForLIFE.eu is European Windows Hosting Provider which focuses on Windows Platform only. We deliver on-demand hosting solutions including Shared hosting, Reseller Hosting, Cloud Hosting, Dedicated Servers, and IT as a Service for companies of all sizes. We have customers from around the globe, spread across every continent. We serve the hosting needs of the business and professional, government and nonprofit, entertainment and personal use market segments.

This article demonstrates how to create and use an image brush in Silverlight using XAML and C#.

z

Image Brush
An image brush paints an area with an image. The ImageSource property represents the image to be used during the painting by an image brush. The ImageBrush object represents an image brush.

Creating an Image Brush
The ImageBrush element in XAML creates an image brush. The ImageSource property of the ImageBrush represents the image used in the painting process.

The following code snippet creates an image brush and sets the ImageSource property to an image.
<ImageBrush ImageSource="dock.jpg" />

We can fill a shape with an image brush by setting a shape's Fill property to the image brush. The code snippet in Listing 1 creates a rectangle shape sets the Fill property to an ImageBrush.
<Rectangle
    Width="200"
    Height="100"
    Stroke="Black"
    StrokeThickness="4">
    <Rectangle.Fill>
        <ImageBrush ImageSource="dock.jpg" />
    </Rectangle.Fill>
</Rectangle>

Listing 1
The CreateAnImageBrush method listed in Listing 2 draws same rectangle with an image brush in Figure 1 dynamically.
/// <summary>
/// Fills a rectangle with an ImageBrush
/// </summary>
public void CreateAnImageBrush()
{
    // Create a Rectangle

    Rectangle blueRectangle = new Rectangle();
    blueRectangle.Height = 100;
    blueRectangle.Width = 200;

     // Create an ImageBrush
    ImageBrush imgBrush = new ImageBrush();
     imgBrush.ImageSource =
        new BitmapImage(new Uri(@"Dock.jpg", UriKind.Relative));
     // Fill rectangle with an ImageBrush

    blueRectangle.Fill = imgBrush;
    // Add Rectangle to the Grid.
    LayoutRoot.Children.Add(blueRectangle);
}

HostForLIFE.eu Silverlight 6 Hosting
HostForLIFE.eu is European Windows Hosting Provider which focuses on Windows Platform only. We deliver on-demand hosting solutions including Shared hosting, Reseller Hosting, Cloud Hosting, Dedicated Servers, and IT as a Service for companies of all sizes. We have customers from around the globe, spread across every continent. We serve the hosting needs of the business and professional, government and nonprofit, entertainment and personal use market segments.

Today, I am going to show you how to fixed Silverlight 6 Control Content always null from Javascript Access. I got an Error when  I try to access the Silverlight object from the client side. Here’s the following snippet code from client site.

function search() {
            try {
                var silverLightControl = document.getElementById("silverlightControl");
                silverLightControl.Content.Page.SetUser(document.getElementById("txtUser").value);
            } catch (e) {
                alert(e.description);
            }
        }

The page with silverlight object embedded
    <div id="silverlightControl">
        <object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%">
          <param name="source" value="ClientBin/SLAspxCommunication.xap"/>
          <param name="onError" value="onSilverlightError" />
          <param name="background" value="white" />
          <param name="minRuntimeVersion" value="5.0.61118.0" />
          <param name="autoUpgrade" value="true" />
          <a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=5.0.61118.0" style="text-decoration:none">
               <img src="http://go.microsoft.com/fwlink/?LinkId=161376" alt="Get Microsoft Silverlight" style="border-style:none"/>
          </a>
        </object><iframe id="_sl_historyFrame" style="visibility:hidden;height:0px;width:0px;border:0px"></iframe></div>

At the silverlight object class,  we have registered the page as javascriptable object with following line

HtmlPage.RegisterScriptableObject("Page", this);
public MainPage()
        {
            InitializeComponent();
            _users = GenerateList();
            HtmlPage.RegisterScriptableObject("Page", this);
        }

The function looks simple that I just want to call the Silverlight function to search the user, unfortunately. This error message below always popped up.

When I debug the process, it indicate that the control did not contain a Content element.  This Error
var silverLightControl = document.getElementById("silverlightControl");

It will load the Div Control instead of the object container that host the silverlight object.  After I set the id to be silverlightControl for the object tag. then  search function funtion well and access the SetUser function in the silverlight object.
   <div>
        <object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%" id="silverlightControl">
          <param name="source" value="ClientBin/SLAspxCommunication.xap"/>
          <param name="onError" value="onSilverlightError" />
          <param name="background" value="white" />
          <param name="minRuntimeVersion" value="5.0.61118.0" />
          <param name="autoUpgrade" value="true" />
          <a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=5.0.61118.0" style="text-decoration:none">
               <img src="http://go.microsoft.com/fwlink/?LinkId=161376" alt="Get Microsoft Silverlight" style="border-style:none"/>
          </a>
        </object><iframe id="_sl_historyFrame" style="visibility:hidden;height:0px;width:0px;border:0px"></iframe></div>

HostForLIFE.eu Silverlight 6 Hosting
HostForLIFE.eu is European Windows Hosting Provider which focuses on Windows Platform only. We deliver on-demand hosting solutions including Shared hosting, Reseller Hosting, Cloud Hosting, Dedicated Servers, and IT as a Service for companies of all sizes. We have customers from around the globe, spread across every continent. We serve the hosting needs of the business and professional, government and nonprofit, entertainment and personal use market segments.

In this tutorial, you will learn how to show a non-annoying popup layer within a Silverlight web page.

Let's follow these steps:

Step 1

Add a button to your xaml page as shown below:

<Grid x:Name="LayoutRoot" Background="White" >
<Button Width="100" Height="50" x:Name="showPopup"
Click="showPopup_Click" Content="Show Popup" />
</Grid>

Step 2

Then, add the following code to your code behind file (page.xaml.cs):

Popup p = new Popup();
private void showPopup_Click(object sender, RoutedEventArgs e)
{

1. Create a panel control to host other controls
    StackPanel panel1 = new StackPanel();
    panel1.Background = new SolidColorBrush(Colors.Gray);

2. Create a button
    Button button1 = new Button();
    button1.Content = "Close";
    button1.Margin = new Thickness(5.0);
    button1.Click += new RoutedEventHandler(button1_Click);

3. Create a text label
    TextBlock textblock1 = new TextBlock();
    Textblock1.Text = "The popup control";
    Textblock1.Margin = new Thickness(5.0);

4. Add text label and button to the panel
    panel1.Children.Add(textblock1);
    panel1.Children.Add(button1);

Step 3

Now, make the panel a child of the popup so that the panel will be shown within the Popup when displayed:

   p.Child = panel1;

And you can set a position:

 p.VerticalOffset = 25;
   p.HorizontalOffset = 25;

Use this code to show the popup:

p.IsOpen = true;
}
void button1_Click(object sender, RoutedEventArgs e)
{

Then, to close the popup, follow this code:

// Close the popup.
   p.IsOpen = false;
}

Step 4

Now run the application. You can see the page with a button. When you click on the button, a popup layer will appear with a text label and a button in it. When you click on the button in the popup, it will close the popup.

HostForLIFE.eu Silverlight 6 Hosting
HostForLIFE.eu is European Windows Hosting Provider which focuses on Windows Platform only. We deliver on-demand hosting solutions including Shared hosting, Reseller Hosting, Cloud Hosting, Dedicated Servers, and IT as a Service for companies of all sizes. We have customers from around the globe, spread across every continent. We serve the hosting needs of the business and professional, government and nonprofit, entertainment and personal use market segments.

Silverlight Hyperlink Button Control
This article demonstrates how to create and use a HyperlinkButton control in Silverlight using XAML and C#.

Creating a HyperlinkButton
The HyperlinkButton element represents a Silverlight HyperlinkButton control in XAML.
<HyperlinkButton/>

The Width and Height attributes of the HyperlinkButton element represent the width and the height of a HyperlinkButton. The Content attribute represents the text of a HyperlinkButton.  The x:Name attribute represents the name of the control, which is a unique identifier of a control.

The code snippet in Listing 1 creates a HyperlinkButton control and sets the name, height, width, and content of a HyperlinkButton control.
<HyperlinkButton Width="200" Height="30"
     Content="C# Corner Link"
     Background="Black" Foreground="Orange"
     FontWeight="Bold">          
</HyperlinkButton>

Listing 1
The output looks like Figure 1.

The NavigateUri property of the HyperlinkButton represents the URI to navigate when the HyperlinkButton is clicked. The TargetName property represents the target window or frame to navigate within the page specified by the NavigateUri.

The code in Listing 2 sets the NavigateUri and TargetName properties of the HyperlinkButton control.
<HyperlinkButton Width="200" Height="30"
     Content="C# Corner Link"
     Background="Black" Foreground="Orange"
     FontWeight="Bold"
     x:Name="CCSLink"
     NavigateUri="http://www.hostforlife.eu"
     TargetName="_blank">          
</HyperlinkButton>

Listing 2
Formatting a HyperlinkButton
The Background and Foreground properties of the HyperlinkButton set the background and foreground colors of a HyperlinkButton. You may use any brush to fill the border. The following code snippet uses linear gradient brushes to draw the background and foreground of a HyperlinkButton.
<HyperlinkButton.Background>
    <LinearGradientBrush StartPoint="0,0" EndPoint="1,1" >
        <GradientStop Color="Blue" Offset="0.1" />
        <GradientStop Color="Orange" Offset="0.25" />                  
        <GradientStop Color="Green" Offset="0.75" />
        <GradientStop Color="Red" Offset="1.0" />
    </LinearGradientBrush>
</HyperlinkButton.Background>

<HyperlinkButton.Foreground>
    <LinearGradientBrush StartPoint="0,0" EndPoint="1,1" >                  
        <GradientStop Color="Orange" Offset="0.25" />
        <GradientStop Color="Green" Offset="1.0" />                  
    </LinearGradientBrush>
</HyperlinkButton.Foreground>

The new HyperlinkButton looks like Figure 2.

Setting Image as Background of a HyperlinkButton
To set an image as background of a HyperlinkButton, we can set an image as the Background of the HyperlinkButton. The following code snippet sets the background of a HyperlinkButton to an image.
<HyperlinkButton.Background>
    <ImageBrush ImageSource="dock.jpg" />
</HyperlinkButton.Background>

The new output looks like Figure 3.

Accessing and Setting HyperlinkButton Properties Dynamically
There are two ways to access a HyperlinkButton control dynamically from code. First, you can set a name of the control and use it like any other control.  The following code snippet creates a Hyperlink button and sets its name to HomeLink.
<HyperlinkButton Width="50.5" Height="18" x:Name="HomeLink"
      Content="HOME" Foreground="#FF383836"
      FontWeight="Bold" HorizontalAlignment="Left" Margin="125.5,102,0,0"
      VerticalAlignment="Top" GotFocus="HyperlinkButton_GotFocus"
                 MouseEnter="HyperlinkButton_MouseEnter"
                 MouseLeave="HyperlinkButton_MouseLeave"/>

Second way to access a control by using the event handler.

Let's set foreground property of a Hyperlink button dynamically on mouse over and mouse leave. I am going to change the foreground property to green on mouse over and back to gray again when mouse is not over.

The following code snippet shows how to set the foreground color in both ways.
private void HyperlinkButton_MouseEnter(object sender, MouseEventArgs e)
{
    HomeLink.Foreground = new System.Windows.Media.SolidColorBrush(Colors.Green);
    //HyperlinkButton btn = (HyperlinkButton)sender;
    //btn.Foreground = new System.Windows.Media.SolidColorBrush(Colors.Green);
}

private void HyperlinkButton_MouseLeave(object sender, MouseEventArgs e)
{
    HomeLink.Foreground = new System.Windows.Media.SolidColorBrush(Colors.Gray);
    //HyperlinkButton btn = (HyperlinkButton)sender;
    //btn.Foreground = new System.Windows.Media.SolidColorBrush(Colors.Gray);
}

Summary
In this article, I discussed how we can create a HyperlinkButton control in Silverlight and C#.  We also saw how we can format a HyperlinkButton by setting its background, and foreground properties. After that, we saw you to set an image as the background of a HyperlinkButton.

Data binding is one of the coolest gimmicks that have ever existed in Silverlight. Binding a UI Element's property with a property in the code behind, has the ability to do any sort of trap. It's wizardry, basically. Once the properties are bound, we have to continue telling the UI if the property's estimation has been adjusted in the code. INotifyPropertyChanged is helpful for this.

You see, since it is an interface, we have to first actualize it. The procedure is not exceptionally extreme however. In the new Silverlight project, here is the code of my main page:
publicpartialclassMainPage : UserControl
{
    privatestring _names; 
    publicstring Names
    {
        get
        {
           return _names;
        }
        set
        {
            _names = value;
        }
   } 
    public MainPage()
    {
        InitializeComponent();
    } 
    privatevoid MainPage_OnLoaded(object sender, RoutedEventArgs e)
    {
        Names = "This is the Text";
    }
}

The property "Name" I have here is bound with the textblock in XAML. Now write the following code:
<UserControlx:Class="PropertyChangedDescribed.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"
 Loaded="MainPage_OnLoaded"
 x:Name="TestingPropertyChanged"
 d:DesignHeight="300"d:DesignWidth="400">
 <Gridx:Name="LayoutRoot"Background="White">
  <TextBlockText="{Binding Names, ElementName=TestingPropertyChanged}"/>
  </Grid>
</UserControl>

As should be obvious, the textblock has its "text" property bound with our code behind's property "Name". At this moment, regardless of what you set the estimation of "Name", it will never be reflected onto the UI. Thus, what we need is, each time we change the estimation of our property "Name," the content piece has its esteem changed as well. To do this, we have to actualize the interface INotifyPropertyChanged. Here is the changed primary page's code to do as such:
publicpartialclassMainPage : UserControl, INotifyPropertyChanged
{
    privatestring _names;
     publicstring Names
    {
        get
        {
            return _names;
        }
        set
        {
            _names = value;
            OnPropertyChanged("Names");
        }
    } 
    public MainPage()
    {
        InitializeComponent();
    } 
    privatevoid MainPage_OnLoaded(object sender, RoutedEventArgs e)
    {
        Names = "This is the Text";
    } 
    publicevent PropertyChangedEventHandler PropertyChanged;
     privatevoid OnPropertyChanged(string propertyName)
    {
        if (this.PropertyChanged != null)
        {
            PropertyChanged(this,new PropertyChangedEventArgs(propertyName));
        }
    }
}

HostForLIFE.eu Silverlight 6 Hosting
HostForLIFE.eu is European Windows Hosting Provider which focuses on Windows Platform only. We deliver on-demand hosting solutions including Shared hosting, Reseller Hosting, Cloud Hosting, Dedicated Servers, and IT as a Service for companies of all sizes. We have customers from around the globe, spread across every continent. We serve the hosting needs of the business and professional, government and nonprofit, entertainment and personal use market segments.

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>

In this article we will be seeing how to create Silverlight ImageBrush using Visual studio 2010.

ImageBrush is used to paint an area with the imagesource. The object contents can be made as an image using ImageBrush.

Namespace: System.Windows.Media
Assembly: System.Windows

Steps Involved:
Creating a Silverlight Application:

• Open Visual Studio 2010.
• Go to File => New => Project.
• Select Silverlight from the Installed templates and choose the Silverlight Application template.
• Enter the Name and choose the location.
• Click OK.
• In the New Silverlight Application wizard check the "Host the Silverlight Application in a new Web site".
• Click OK.

Adding an image in the solution:

Right click on the solution, select Add => New Folder.
Name the folder as Images and click OK.
Right click on the Images folder, select Add =>Existing Item.
Choose the image and click Ok.

Creating the UI:
Open MainPage.xaml file and replace the code with the following.
<UserControl x:Class="SilverlightImageBrush.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">
<Canvas Height="200" Width="200" Background="White">
    <Rectangle Canvas.Left="50" Canvas.Top="50" Height="100" Width="100" >
        <Rectangle.Fill>
            <ImageBrush ImageSource="/SilverlightApplication6;component/Images/img7.png"/>
        </Rectangle.Fill>
    </Rectangle>     
</Canvas>
</UserControl>

Testing the solution:
Build the solution.
Hit ctrl+F5.
Rectangle control content  is filled with an image.