One of the powerful new features around templating in the Silverlight 5 beta is the ability to produce a DataTemplate that will be implicitly associated with a particular data type.

For example, if I have these 2 simple types Person and Vehicle;

public class Person  
{  
  public string FirstName { get; set; }  
  public string LastName { get; set; }  
  public int Age { get; set; }  
}  
public class Vehicle  
{  
  public string Type { get; set; }  
  public int Wheels { get; set; }  
}  

then I can define implicit templates for them by writing templates such as these;

<UserControl.Resources> 
    <DataTemplate 
      DataType="local:Person"> 
      <StackPanel> 
        <TextBlock 
          Text="{Binding FirstName}" /> 
        <TextBlock 
          Text="{Binding LastName}" /> 
        <TextBlock 
          Text="{Binding Age}" /> 
      </StackPanel> 
    </DataTemplate> 
    <DataTemplate 
      DataType="local:Vehicle"> 
      <StackPanel> 
        <TextBlock 
          Text="{Binding Type}" /> 
        <TextBlock 
          Text="{Binding Wheels}" /> 
      </StackPanel> 
    </DataTemplate> 
  </UserControl.Resources>  

where I have not specified a Key for these resources but have, instead, specified a DataType and that’s enough for Silverlight to figure it out.

If I have a scenario like this one where I have a ListBox bound to a set of Items;

<Grid>  
  <Grid.RowDefinitions>  
    <RowDefinition />  
    <RowDefinition  
      Height="Auto" />  
    <RowDefinition  
      Height="Auto" />  
  </Grid.RowDefinitions>  
  <ListBox  
    ItemsSource="{Binding Items}">  
  </ListBox>  
  <Button  
    Command="{Binding AddPerson}" 
    Content="Add Person" 
    Grid.Row="1" />  
  <Button  
    Command="{Binding AddVehicle}" 
    Content="Add Vehicle" 
    Grid.Row="2" />  
</Grid> 

with a DataContext providing a view model like this one;

public class ViewModel  
{  
  public ViewModel()  
  {  
    this.Items = new ObservableCollection<object>();  
    this.AddPerson = new SimpleCommand(() =>  
      {  
        this.Items.Add(  
          new Person()  
          {  
            FirstName = "TestFirst",  
            LastName = "TestLast",  
            Age = 22  
          });  
      });  
    this.AddVehicle = new SimpleCommand(() =>  
      {  
        this.Items.Add(  
          new Vehicle()  
          {  
            Type = "Car",  
            Wheels = 4  
          });  
      });  
  }  
  public ObservableCollection<object> Items { get; set; }  
  public ICommand AddPerson { get; set; }  
  public ICommand AddVehicle { get; set; }  
} 

then whenever I add a Person to the ListBox the runtime will find the right implicit template to display the Person and if I add a Vehicle to the ListBox then the runtime will do the right thing there too;



and, if for example I was to make my ViewModel implement property change notification and then bind up a new property called SelectedItem to my ListBox then I can bring in a ContentPresenter and it will also make use of the implicit template as in;

<UserControl.Resources>  
  <DataTemplate  
    DataType="local:Person">  
    <StackPanel>  
      <TextBlock  
        Text="{Binding FirstName}" />  
      <TextBlock  
        Text="{Binding LastName}" />  
      <TextBlock  
        Text="{Binding Age}" />  
    </StackPanel>  
  </DataTemplate>  
  <DataTemplate  
    DataType="local:Vehicle">  
    <StackPanel>  
      <TextBlock  
        Text="{Binding Type}" />  
      <TextBlock  
        Text="{Binding Wheels}" />  
    </StackPanel>  
  </DataTemplate>  
</UserControl.Resources>  
<UserControl.DataContext>  
  <local:ViewModel />  
</UserControl.DataContext>  
<Grid>  
  <Grid.ColumnDefinitions>  
    <ColumnDefinition />  
    <ColumnDefinition />  
  </Grid.ColumnDefinitions>  
  <Grid.RowDefinitions>  
    <RowDefinition />  
    <RowDefinition  
      Height="Auto" />  
    <RowDefinition  
      Height="Auto" />  
  </Grid.RowDefinitions>  
  <ListBox  
    ItemsSource="{Binding Items}" 
    SelectedValue="{Binding SelectedItem,Mode=TwoWay}" />  
  <Button  
    Command="{Binding AddPerson}" 
    Content="Add Person" 
    Grid.Row="1" />  
  <Button  
    Command="{Binding AddVehicle}" 
    Content="Add Vehicle" 
    Grid.Row="2" />  
  <ContentPresenter  
    Grid.Column="1" 
    Content="{Binding SelectedItem}" />  
</Grid> 

and so then both the ListBox on the left and the ContentPresenter on the right are using implicit templates to display content;



(as an aside, I also tried this with a ContentPresenter inside a Tooltip and it didn’t work for me so far in the beta).

Naturally, you can override these implicit templates so if I want a different template for my ContentPresenter I can simply add an implicit template that is nearer to the ContentPresenter in the hierarchy of resource resolution as in;

<UserControl.Resources> 
  <DataTemplate 
    DataType="local:Person"> 
    <StackPanel> 
      <TextBlock 
        Text="{Binding FirstName}" /> 
      <TextBlock 
        Text="{Binding LastName}" /> 
      <TextBlock 
        Text="{Binding Age}" /> 
    </StackPanel> 
  </DataTemplate> 
  <DataTemplate 
    DataType="local:Vehicle"> 
    <StackPanel> 
      <TextBlock 
        Text="{Binding Type}" /> 
      <TextBlock 
        Text="{Binding Wheels}" /> 
    </StackPanel> 
  </DataTemplate> 
</UserControl.Resources> 
<UserControl.DataContext> 
  <local:ViewModel /> 
</UserControl.DataContext> 
<Grid> 
  <Grid.ColumnDefinitions> 
    <ColumnDefinition /> 
    <ColumnDefinition /> 
  </Grid.ColumnDefinitions> 
  <Grid.RowDefinitions> 
    <RowDefinition /> 
    <RowDefinition 
      Height="Auto" /> 
    <RowDefinition 
      Height="Auto" /> 
  </Grid.RowDefinitions> 
  <ListBox 
    ItemsSource="{Binding Items}" 
    SelectedValue="{Binding SelectedItem,Mode=TwoWay}" /> 
  <Button 
    Command="{Binding AddPerson}" 
    Content="Add Person" 
    Grid.Row="1" /> 
  <Button 
    Command="{Binding AddVehicle}" 
    Content="Add Vehicle" 
    Grid.Row="2" /> 
  <Grid 
    Grid.Column="1"> 
    <Grid.Resources> 
      <DataTemplate 
        DataType="local:Vehicle"> 
        <StackPanel 
          Orientation="Horizontal"> 
          <TextBlock 
            Text="{Binding Type}" /> 
          <TextBlock 
            Text="{Binding Wheels}" /> 
        </StackPanel> 
      </DataTemplate> 
    </Grid.Resources> 
    <ContentPresenter 
        Grid.Column="1" 
        Content="{Binding SelectedItem}"/> 
  </Grid> 
</Grid> 

and, naturally, you can also mix/match this implicit approach with the explicit approach that you’d use in Silverlight 4 today.

I think this is a pretty powerful addition to the Silverlight 5 binding/templating abilities and it’ll be interesting to see what other folks and frameworks do with it.

This article will give step by step walkthrough

1. How to create a basic WCF 4.0 Service?

2. How to host WCF Service in IIS 7.5?

3. Hot to test service in a client.

Create WCF Service

Create WCF service. Open visual studio select new project and then from WCF tab select WCF Service application to create a new WCF service.



Delete the default code created by WCF from IService1 and Service1.svc.cs

a. So delete the data contract

b. Modify the service contract as below. Just make one operation contract to return a string .

IService1.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Runtime.Serialization;
using System.ServiceModel;
using System.ServiceModel.Web;
using System.Text;
namespace WcfService5
{
    [ServiceContract]
    public interface IService1
    {
        [OperationContract]
        string GetMessage();

    }  
}

Service1.svc.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Runtime.Serialization;
using System.ServiceModel;
using System.ServiceModel.Web;
using System.Text;

namespace WcfService5
{
    public class Service1 : IService1
    {
        public string GetMessage()
        {
            return "Hello From WCF Service ";
        }
    }
}

Leave the default configuration created by WCF.

Web.Config

<?xml version="1.0"?>
<configuration>
  <system.web>
    <compilation debug="true" targetFramework="4.0" />
  </system.web>
  <system.serviceModel>
    <behaviors>
      <serviceBehaviors>
        <behavior>        
          <serviceMetadata httpGetEnabled="true"/>        
          <serviceDebug includeExceptionDetailInFaults="false"/>
        </behavior>
      </serviceBehaviors>
    </behaviors>
    <serviceHostingEnvironment multipleSiteBindingsEnabled="true" />
  </system.serviceModel>
<system.webServer>
    <modules runAllManagedModulesForAllRequests="true"/>
  </system.webServer> 
</configuration>

Host WCF Service in IIS 4.0

Open IIS

a. Open the command prompt in administrator mode. To do click on Start button then type RUN in search and then in Run window type inetmgr to open IIS .



Now you will have IIS open like below



b. Right click on Sites and then click Add Web Site



c. Now a window will open



Give any name of your choice as the site name. I am giving name here HostedWcfService



Now click on select and choose ASP.Net v4.0 from the drop down.



Now in the physical path section, we need to give physical path of the service. So to get the physical path of the service, right click on the WCF Service project in visual studio and click open project in windows explorer. Open the project in windows explorer and from address bar copy the path and paste that below. Or you can browse also. Just click on browse button and navigate to project folder of the WCF Service.



Now at the Binding section select HTTP. Give any port number. I am selecting the port as 4567



Do not give any name as host name. Leave it blank



Check the check box Start Web Site Immediately.



And now click OK on the window.

d. Now open visual studio command prompt in administrator mode. Right click and select as administrator





Type the below command

aspnet_regiis.exe /iru



You will get the message Finished Installing ASP.Net 4.0

e. Now go to inetmgr, you would able to see the site you just created in previous step.



Publishing the WCF Service

Go back to WCF Service. Right click and select Publish



On clicking of publish a window will come.



Give a Service URL. You are free to give any Service URL here. Just make sure host name is geeting resolved. In stead of localhost you can give IP address or your machine name also.



Give the name of the site HostedWcfService. We created this site in previous step.



Leave the credential inactive.



Now click on Publish.



You will get the message in bottom publish succeeded

Browsing the service hosted in IIS

Open Inetmgr and right click on site HostedWcfService. Then from Manage Web Site select Browse option.



When you click on browse site will get open in browser



You will get the above error. Just in address bar append Service1.svc with the address to open the service in browser.

http://localhost:4567/Service1.svc

And in browser you will get the service up and running



So now you successfully created and hosted the WCF 4.0 service in IIS 7.5

Testing the Service at client

a. Create console application project



b. Right click and add the service reference.



c. Give in address the address of service hosted in IIS and click GO.



d. Call the service as below ,

Program.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using ConsoleApplication1.ServiceReference1;

namespace ConsoleApplication1
{
    class Program
    {
        static void Main(string[] args)
        {
            Service1Client proxy = new Service1Client();
            Console.WriteLine(proxy.GetMessage());
            Console.Read();
        }
    }
}

Output

This article will explore how to use the ViewBox control in Silverlight 5.

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 5 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>

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.



Conclusion : Thus, you learnt how to add and use a ViewBox control in a Silverlight application