Silverlight DataBinding with Visual Studio 2010 IDE

I discussed Silverlight Databinding in the blog Silverlight 3 / WPF Databinding. There I tweaked the raw XAML for enabling DataBinding.

The Binding class is used to define a connection between a CLR Object and an User Interface Component. The three elements of binding are Source, Binding Mode and the Target. Source is the CLR Object and Target is the Dependency Property.

Visual Studio 2010 have support for Silverlight DataBinding in the IDE.

As in the previous example here too I am placing a Slider Control with Maximum 100 and a TextBox.

In the properties window there is an Advanced Option icon next the Text in the Text Property.


















Clicking the icon another list will appear. Select Apply Data Binding.


















First you can select the ElementName ie. slider1.











Then select the Path. In our case it is the Value.













This action will automtically generate the Binding Syntax.

Related Blogs

Silverlight 3, WPF Positioning with ZIndex

Silverlight 3/Wpf : Adding Controls Dynamicallys

Silverlight 3/WPF Templates

 

Silverlight 3 / WPF Databinding

Silverlight Out of Browser Application

Starting with Silverlight 3 it is possible to run a Silverlight Application as Out of Browser Application.
Means you can work with yours silverlight Application as if working with a Windows Application.

For enabling this feature Select the Project Properties page by going to Project menu and Select <projectname> Properties.

Check the "Enable running application out of browser" option.

























Now by right clicking the Silverlight application in the Browser you will receive an additional option called "Install HelloSilverlight Application on this computer..".

Clicking the option enables you select the location(s) for the shortcuts.

Silverlight Dynamically Creating Controls and Attaching Event Handlers

Dynamically creating controls in Silverlight is a breeze.
I am using Visual Studio 2010 Release Candidate.
I am starting a Silverlight Application Project.














I am selecting Asp .Net Web Project as new Web Project Typer.
















As mentioned in the previous blog VS 2010 comes with excellent tool support for Silverlight.

I am adding a Stack Panel (stp1)to hold the dynamically created controls and a TextBlock to display the message based on the control selected.















Going to the load event of Main Page I am dynamically creating Buttons.


List<string> lstr = new List<string> { "Shalvin", "Praseed Pai" };

private void UserControl_Loaded(object sender, RoutedEventArgs e)
{
Button btn;
foreach (string str in lstr)
{
btn = new Button();
btn.Content = str;
btn.Tag = str;
btn.Click += new RoutedEventHandler(btn_Click);
stp1.Children.Add(btn);
}
}

Notice I have only one event Handler for the whole set of controls.
I am going to have different functionlity for different buttons by identifying the tag property of Button.

private void btn_Click(object sender, RoutedEventArgs e)
{
Button btn = sender as Button;
string txtTag = btn.Tag.ToString();
tblMessage.Text = txtTag;
}

Silverlight 3/Wpf : Adding Controls Dynamicallys

Lets see how to dynamically add controls and attaching event handler to the added control.

Here I am creating an object of button class and adding it into the Grid using the Add method of Grid's Children property.

private void btnAddControl_Click(object sender, RoutedEventArgs e)
{
Button btn = new Button();
btn.Click += new RoutedEventHandler(btn_Click);
btn.Content = "Shalvin";
btn.Width = 75;
btn.Height = 25;
Grid1.Children.Add(btn);
}

private void btn_Click(object sender, RoutedEventArgs e)
{
//MessageBox works only with WPF , Silverlight 3 and not with Silverlight 2
MessageBox.Show("ShalvinPD.blogspot.com");
}

Result

WPF Routed Event

A routed event is a type of event that can invoke handlers on multiple listeners in an element tree, rather than just on the object that raised the event.

For example if you want a single event handler for the buttons inside a Grid you can define a Routed event as Button.Click = "Grid_Click" inside the Grid as shown in the diagram.









private void Grid_Click(object sender, RoutedEventArgs e)
{
//MessageBox works only with WPF and not Silverlight 2
MessageBox.Show("ShalvinPD.blogspot.com");
}

WPF Templates

WPF introduces the concept of lookless controls.

Using Templates it is possible to change the appearance of a control. For examples it is possible for a ListBox to contain the Photos of employees instead of the usual List Items.

I am going to demonstrate creating a simple Template whereby a button will appear as a blue rectangle.














Silverlight Tags

<UserControl x:Class="ButtonTemplate.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">
        <Button Height="50" Width="75">
            <Button.Template>
                <ControlTemplate>
                    <Rectangle Fill="LightBlue"/>
                </ControlTemplate>
            </Button.Template>
        </Button>
    </Grid>
</UserControl>

Result



















As shown in the output the button can respond to click event as expected.

Now lets create an ellipse button.










Result

WPF Styles

Styles are equivalent to CSS in html. Lets see how to create Styles in WPF.Inside the Window Xaml tag add a Window.Resource section.In the Style tag's TagetType you can specify to what type of control you want the style to apply. Using Setters you can specity the Property and and its corresponding value.























Here is the result





















In this example I am setting the Background, Width and Opacity properties for Button. All the buttons in the form will inherit these properties thereby rendering a consistant look and feel.

WPF Layout with Grid

WPF layout system helps in having fine grained control over the placing of controls.

Since I am more into the web domain I am most comfortable with the Grid which is the most versatile of the built in layout panels available in WPF.
Grid mimics the familiar html Table tags.
Here I am creating a Grid with 3 rows.


















I am add two columns using ColumnDefinitions.

Now if a add a button to the Grid it will appear in the first row and column (zero based index). If I again add one more button to the grid the second button the take the precedence and hides the first button. It is possible to specify in which column the control should appear using Grid.Column and specifying the column number as sholwn in the figure below.














We can also specify the column number using Grid.Column.

 <Window x:Class="WPFLayout.MainWindow"  
     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"  
     xmlns:local="clr-namespace:WPFLayout"  
     mc:Ignorable="d"  
     Title="Shalvin" Height="450" Width="800">  
   <Grid ShowGridLines="True">  
     <Grid.RowDefinitions>  
       <RowDefinition Height="50"/>  
       <RowDefinition Height="50"/>  
       <RowDefinition Height="50"/>  
     </Grid.RowDefinitions>  
      <Grid.ColumnDefinitions>  
        <ColumnDefinition Width="150"/>  
        <ColumnDefinition Width="150"/>  
        <ColumnDefinition Width="150"/>  
      </Grid.ColumnDefinitions>  
     <Button>Shalvin.com</Button>  
     <Button Grid.Column="1">shalvinpd.blogspot.com</Button>  
   </Grid>  
 </Window>  

Silverlight.live.com : Excellent video quality

With silverlight.live.com one can upload videos and embed them in blog.
The video quality is excellent.

For this video to work you should have Silverlight installed in your machine. The movie will prompt you to download Silverlight. Silverlight is of 1.36 MB in size.

Here is my silverlight.live.com embedded video




Here is my embedded video from another site having the similar service. Feel the difference



shalvin.com