DataBinding in Blend 3 for Designers

After 8 continuous articles on features of Silverlight 3 Beta, I started now looking at each feature of it and soon will give insight on the same,meanwhile I shifted my focus to Blend 3 which I touch upon only once, so I thought should start looking at it also.

I have already covered some of the new features of Blend 3 in my previous article. Now today I am talking about the features rather only Data feature of Blend 3. Designers always need to work hard to create specific look and feel and give it to developer for development. We know Blend and Visual Studio are tightly coupled, so both can work together. But how about Designer doing POC (Proof of Concept) which will actually show/represent data, Offcourse designers may not able to program it,but from Blend 3 they have few good options.

It is not like that Databinding was impossible in previous version, but now in Blend 3 it is much more friendly.So let talk about that.Please make note that, this is only for “Designers” who are not part of coding, so for developers this post may sound very basic and generic or you may ask what so great in this, but for Designers I am sure it is much more useful.

Open a new project in Blend 3 Preview and look for following “Data” tab.

Right now I have added one XML file by opening this solution in Visual Studio (In Blend 3, if you say add new item, there is no XML document option, so need to do that from Visual Studio)

Employee.xml :

<?xml version="1.0" encoding="utf-8" ?>
<Employees>
  <Employee>
    <EmpId>1</EmpId>
    <EName>Vikram</EName>
    <Sex>Male</Sex>
    <Phone>123-456-7890</Phone>
    <Street>Silverlight Street</Street>
    <City>Pune</City>
    <State>MH</State>
    <Zip>411005</Zip>
    <Country>India</Country>
  </Employee>
  <Employee>
    <EmpId>2</EmpId>
    <EName>Prachi</EName>
    <Sex>Female</Sex>
    <Phone>123-456-7890</Phone>
    <Street>Silverlight Street</Street>
    <City>Pune</City>
    <State>MH</State>
    <Zip>411005</Zip>
    <Country>India</Country>
  </Employee>
  <Employee>
    <EmpId>3</EmpId>
    <EName>Swati</EName>
    <Sex>Female</Sex>
    <Phone>123-456-7890</Phone>
    <Street>Silverlight Street</Street>
    <City>Pune</City>
    <State>MH</State>
    <Zip>411005</Zip>
    <Country>India</Country>
  </Employee>
  <Employee>
    <EmpId>4</EmpId>
    <EName>Anuja</EName>
    <Sex>Female</Sex>
    <Phone>123-456-7890</Phone>
    <Street>Silverlight Street</Street>
    <City>Pune</City>
    <State>MH</State>
    <Zip>411005</Zip>
    <Country>India</Country>
  </Employee>
</Employees>

Now with the “Import Sample Data from XML…” option from Data Tab, you can associate this XML file as datasource like this :

It will then analyze your XML file and it will generate metadata [ Refer the Sample Data folder it creates, it creates on xaml and xsd file], It will show you the contents in form of Collection and properties, Also you can go ahead and edit those properties like this :

We already have some data inside xml tags but you can edit that sample data for display purpose by clickin on small cylindrical symbol in front of Collection generated, so it will throw you a window for editing like this :

So, it provide you all the facilities to add and modify properties. Now you just need to simply drag-drop that Collection on Canvas and it will automatically convert that to Grid (Employee.xaml file I was talking before) and then you can simply go ahead and modify that XAML as per look and feel you want, XAML code which is generated and which I edited is like this :

<UserControl.Resources>
        <DataTemplate x:Key="EmployeeTemplate1">
            <StackPanel>
                <TextBlock Text="{Binding Path=City}" Margin="1" HorizontalAlignment="Left" VerticalAlignment="Top" Width="150"/>
                <TextBlock Text="{Binding Path=Country}" Margin="1" HorizontalAlignment="Left" VerticalAlignment="Top" Width="150"/>
                <TextBlock Text="{Binding Path=EmpId}" Margin="1" HorizontalAlignment="Left" VerticalAlignment="Top" Width="150"/>
                <TextBlock Text="{Binding Path=EName}" Margin="1" HorizontalAlignment="Left" VerticalAlignment="Top" Width="150"/>
                <TextBlock Text="{Binding Path=Phone}" Margin="1" HorizontalAlignment="Left" VerticalAlignment="Top" Width="150"/>
                <TextBlock Text="{Binding Path=Sex}" Margin="1" HorizontalAlignment="Left" VerticalAlignment="Top" Width="150"/>
                <TextBlock Text="{Binding Path=State}" Margin="1" HorizontalAlignment="Left" VerticalAlignment="Top" Width="150"/>
                <TextBlock Text="{Binding Path=Street}" Margin="1" HorizontalAlignment="Left" VerticalAlignment="Top" Width="150"/>
                <TextBlock Text="{Binding Path=Zip}" Margin="1" HorizontalAlignment="Left" VerticalAlignment="Top" Width="150"/>
            </StackPanel>
        </DataTemplate>
    </UserControl.Resources>

    <Grid x:Name="LayoutRoot" Background="White" DataContext="{Binding Source={StaticResource Employee}}">
        <data:DataGrid
          AlternatingRowBackground="Azure"
          GridLinesVisibility="None"
          SelectionMode="Single"
          ItemsSource="{Binding Mode=OneWay, Path=EmployeeCollection}" AutoGenerateColumns="False" VerticalAlignment="Top" Height="126" Margin="0,22,0,0" >
            <data:DataGrid.Columns>
                <data:DataGridTextColumn Header="EmpId" Binding="{Binding Path=EmpId}"/>
                <data:DataGridTextColumn Header="Name" Binding="{Binding Path=EName}"/>
                <data:DataGridTextColumn Header="Sex" Binding="{Binding Path=Sex}"/>
                <data:DataGridTextColumn Header="City" Binding="{Binding Path=City}"/>
                <data:DataGridTextColumn Header="Country" Binding="{Binding Path=Country}"/>
                <data:DataGridTextColumn Header="Phone" Binding="{Binding Path=Phone}"/>
                <data:DataGridTextColumn Header="State" Binding="{Binding Path=State}"/>
                <data:DataGridTextColumn Header="Street" Binding="{Binding Path=Street}"/>
                <data:DataGridTextColumn Header="Zip" Binding="{Binding Path=Zip}"/>
            </data:DataGrid.Columns>
        </data:DataGrid>
    </Grid>

This way you can see that how it is getting bind by each field, see this :

ItemsSource="{Binding Mode=OneWay, Path=EmployeeCollection}"

Remember Binding Mode by default is “OneWay” and even if you make it “TwoWay” it won’t be updating your original xml,but you can see it reflect in the design. Also beside this pure XML, you can also bind the XML generated from DataSet (Hope you recollect that DataSet provides one method to export schema to XML as WriteXML(),such XML also can be used to represent data), If you feel that you are restricted due to XML then you can go and explore “ObjectDataSource” facility.After doing this,output will be like this :

This is how you can build full functional POC in Blend 3 by having real data in it, So when Designers will give such inputs to Developers, I am sure sharp developers like you will quickly understand what they need to code.

Let me know your feedback, Soon I will be talking much more better stuff on Blend,Silverlight 3 and offcourse .NET 4.0 and Visual Studio 2010 in coming weeks.

Vikram.