Getting started with DataForm

you can find an updated sample here http://leeontech.wordpress.com/2009/07/27/working-with-dataform/

DataForm is one of the new controls in Silverlight 3.  

I started with some xml data,  got customer information and bunch of orders

<data>
<Customers CustomerID=”ALFKI” CompanyName=”Alfreds Futterkiste” ContactName=”Maria Anders” ContactTitle=”Sales Representative” Address=”Obere Str. 57″ City=”Berlin” PostalCode=”12209″ Country=”Germany” Phone=”030-0074321″ Fax=”030-0076545″>
  <Orders OrderID=”10643″ CustomerID=”ALFKI” EmployeeID=”6″ OrderDate=”1997-08-25″ RequiredDate=”1997-09-22″ ShippedDate=”1997-09-02″ ShipVia=”1″ Freight=”29.4600″ ShipName=”Alfreds Futterkiste” ShipAddress=”Obere Str. 57″ ShipCity=”Berlin” ShipPostalCode=”12209″ ShipCountry=”Germany” />
  <Orders OrderID=”10692″ CustomerID=”ALFKI” EmployeeID=”4″ OrderDate=”1997-10-03″ RequiredDate=”1997-10-31″ ShippedDate=”1997-10-13″ ShipVia=”2″ Freight=”61.0200″ ShipName=”Alfred’s Futterkiste” ShipAddress=”Obere Str. 57″ ShipCity=”Berlin” ShipPostalCode=”12209″ ShipCountry=”Germany” />
  <Orders OrderID=”10702″ CustomerID=”ALFKI” EmployeeID=”4″ OrderDate=”1997-10-13″ RequiredDate=”1997-11-24″ ShippedDate=”1997-10-21″ ShipVia=”1″ Freight=”23.9400″ ShipName=”Alfred’s Futterkiste” ShipAddress=”Obere Str. 57″ ShipCity=”Berlin” ShipPostalCode=”12209″ ShipCountry=”Germany” />
  <Orders OrderID=”10835″ CustomerID=”ALFKI” EmployeeID=”1″ OrderDate=”1998-01-15″ RequiredDate=”1998-02-12″ ShippedDate=”1998-01-21″ ShipVia=”3″ Freight=”69.5300″ ShipName=”Alfred’s Futterkiste” ShipAddress=”Obere Str. 57″ ShipCity=”Berlin” ShipPostalCode=”12209″ ShipCountry=”Germany” />
  <Orders OrderID=”10952″ CustomerID=”ALFKI” EmployeeID=”1″ OrderDate=”1998-03-16″ RequiredDate=”1998-04-27″ ShippedDate=”1998-03-24″ ShipVia=”1″ Freight=”40.4200″ ShipName=”Alfred’s Futterkiste” ShipAddress=”Obere Str. 57″ ShipCity=”Berlin” ShipPostalCode=”12209″ ShipCountry=”Germany” />
  <Orders OrderID=”11011″ CustomerID=”ALFKI” EmployeeID=”3″ OrderDate=”1998-04-09″ RequiredDate=”1998-05-07″ ShippedDate=”1998-04-13″ ShipVia=”1″ Freight=”1.2100″ ShipName=”Alfred’s Futterkiste” ShipAddress=”Obere Str. 57″ ShipCity=”Berlin” ShipPostalCode=”12209″ ShipCountry=”Germany” />
  <Orders OrderID=”11078″ CustomerID=”ALFKI” OrderDate=”2008-12-31T02:06:47.913″ RequiredDate=”1998-05-07″  ShipName=”Name” ShipAddress=”Address” ShipCity=”City” ShipRegion=”Region” ShipPostalCode=”ZipCode” ShipCountry=”Country” />
</Customers>
…
</data>

Drag and drop a DataForm from the toolbox will give us  the following after giving a name

 <dataControls:DataForm Header=”Customer Details”  Width=”500″ Height=”350″ x:Name=”form1″  />

once I set the ItemsSource  to a list of objects that are created from the above data, I got

I dont want the Orders displayed like above so I changed the XAML to look like this

<StackPanel>
     <dataControls:DataForm Header=”Customer Details”  Width=”500″ Height=”350″ x:Name=”form1″  >
     </dataControls:DataForm>
     <TextBlock Text=”List of Orders” Width=”500″></TextBlock>
     <data:DataGrid Width=”500″ ItemsSource=”{Binding ElementName=form1, Path=CurrentItem.Orders}”></data:DataGrid>
</StackPanel>

Here is what I got

I dont want to have the Orders property show up in the DataForm as are displaying in a  list in a DataGrid.  so changed the XAML to add fields to be displayed

<StackPanel>
            <dataControls:DataForm WrapAfter=”4″ Header=”Customer Details” AutoGenerateFields=”False”  Width=”500″ Height=”200″ x:Name=”form1″  >
                <dataControls:DataForm.Fields>
                    <dataControls:DataFormTextField  FieldLabelContent=”Customer ID” Binding=”{Binding CustomerID}”></dataControls:DataFormTextField>
                    <dataControls:DataFormTextField  FieldLabelContent=”Contact Title” Binding=”{Binding ContactTitle}”></dataControls:DataFormTextField>
                    <dataControls:DataFormTextField  FieldLabelContent=”Contact Name” Binding=”{Binding ContactName}”></dataControls:DataFormTextField>                   
                    <dataControls:DataFormTextField  FieldLabelContent=”City” Binding=”{Binding City}”></dataControls:DataFormTextField>
                    <dataControls:DataFormTextField  FieldLabelContent=”Country” Binding=”{Binding Country}”></dataControls:DataFormTextField>
                    <dataControls:DataFormTextField  FieldLabelContent=”Phone” Binding=”{Binding Phone}”></dataControls:DataFormTextField>
                </dataControls:DataForm.Fields>
            </dataControls:DataForm>
            <TextBlock Text=”List of Orders” Width=”500″></TextBlock>
            <data:DataGrid Width=”500″ ItemsSource=”{Binding ElementName=form1, Path=CurrentItem.Orders}”></data:DataGrid>
        </StackPanel>

got something more professional

we can add some effects by adding this to the above XAML

 <StackPanel.Projection>
                <PlaneProjection RotationX=”-25″ RotationY=”-15″ RotationZ=”15″  />
            </StackPanel.Projection>

 

That is as far as I got with the little time I spent.