Getting started with DataForm

you can find an updated sample here https://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

dataform11

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

dataform2

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

dataform4

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

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

 

datdaform5

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

Advertisements

8 thoughts on “Getting started with DataForm

  1. TY mucho, developing alot of questions in regard to integrating forms into sharepoint pages and debating between infopath and expression to generate form templates so our clients can customize our templates to suit thier client’s needs

  2. That’s Great, but, how does it work with a DataFormTemplateField???

    I’m trying to add a Combobox field.

  3. I have a dataForm with a DataFormComboBoxField and when I’m trying to add a datasource to itemssource prop I get an unknown error.But if put a simple combobox in the page and I set the itemsource with the same datasource it is working.

    1. I am having same problem with DataFormComboBoxField. I get AG_E_Unknown_Error. I am tryint to bind the ItemsSource to a DomainDataSource like this: ItemsSource=”{Binding Data, ElementName=dds}”

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s