Available for consulting

I am looking for work in Dallas,TX area. If you are in need of a WPF/Silverlight resource let me know. I will send my resume for your consideration

Advertisements

Working with DataForm

Dataform has changed a lot in the RTM version from the beta and my previous post on DataForm is no longer valid now.
Here is something I did earlier.

I created EF model using Northwind database and added DomainService. To start with simple form. I started with Categories(Add/Edit)

so I created a Dataform with ReadOnlyTemplate and EditTemplate

Only the NavigationButtons are enabled. so we can navigate to an item, click ‘edit’ where we can edit the item and save/cancel.
We can also add a Category by clicking the Add button

<dataFormToolkit:DataForm Width=”400″ Height=”400″ AutoEdit=”False”  x:Name=”dataform1″  CommandButtonsVisibility=”Navigation”>
            <dataFormToolkit:DataForm.ReadOnlyTemplate>
                <DataTemplate>
                    <StackPanel>
                        <StackPanel Width=”Auto” Orientation=”Horizontal”>
                            <Button Content=”Add New” Click=”AddButton_Click”/>
                        </StackPanel>
                        <dataFormToolkit:DataField Label=”Category Name:”>
                            <TextBlock Text=”{Binding CategoryName}”/>
                        </dataFormToolkit:DataField>
                        <dataFormToolkit:DataField Label=”Description:”>
                            <TextBlock Text=”{Binding Description}”/>
                        </dataFormToolkit:DataField>
                        <StackPanel Width=”Auto” Orientation=”Horizontal”>
                            <Button Width=”100″ Height=”28″ Content=”Edit” Click=”EditButton_Click”/>
                        </StackPanel>
                    </StackPanel>
                </DataTemplate>
            </dataFormToolkit:DataForm.ReadOnlyTemplate>
            <dataFormToolkit:DataForm.EditTemplate>
                <DataTemplate>
                    <StackPanel>
                        <dataFormToolkit:DataField Label=”Category Name:”>
                            <TextBox Text=”{Binding CategoryName, Mode=TwoWay}”/>
                        </dataFormToolkit:DataField>
                        <dataFormToolkit:DataField Label=”Description:”>
                            <TextBox Text=”{Binding Description, Mode=TwoWay}”/>
                        </dataFormToolkit:DataField>
                        <StackPanel Width=”Auto” Orientation=”Horizontal”>
                            <Button Width=”100″ Height=”28″ Content=”Save” Click=”SaveButton_Click”/>
                            <Button Width=”100″ Height=”28″ Content=”Cancel” Click=”CancelButton_Click”/>
                        </StackPanel>
                    </StackPanel>
                </DataTemplate>
            </dataFormToolkit:DataForm.EditTemplate>
        </dataFormToolkit:DataForm>

 That was pretty simple. what if the dataform is bit more complex with a combobox, AutocompleteBox etc.
 products table has got a couple of columns that have look ups and is close to real scenario

 <dataFormToolkit:DataForm x:Name=”dataform1″ AutoEdit=”True” AutoGenerateFields=”False”>
            <dataFormToolkit:DataForm.EditTemplate>
                <DataTemplate>
                    <StackPanel>                       
                        <dataFormToolkit:DataField Label=”ProductName:”>
                            <TextBox Text=”{Binding ProductName, Mode=TwoWay}”/>
                        </dataFormToolkit:DataField>
                        <dataFormToolkit:DataField Label=”Category:”>
                            <ComboBox x:Name=”cbCategory” DisplayMemberPath=”CategoryName”
                                      SelectedItem=”{Binding Category, Mode=TwoWay}” />
                        </dataFormToolkit:DataField>
                        <dataFormToolkit:DataField >
                            <CheckBox Content=”Discontinued” IsChecked=”{Binding Discontinued, Mode=TwoWay}”/>
                        </dataFormToolkit:DataField>
                        <dataFormToolkit:DataField Label=”QuantityPerUnit:”>
                            <TextBox Text=”{Binding QuantityPerUnit, Mode=TwoWay}”/>
                        </dataFormToolkit:DataField>
                        <dataFormToolkit:DataField Label=”Supplier:”>
                            <input:AutoCompleteBox x:Name=”acb1″ SelectedItem=”{Binding Suppliers, Mode=TwoWay}”
                                                   ItemTemplate=”{StaticResource dt}” FilterMode=”StartsWith”   
                                                   MinimumPrefixLength=”1″  ></input:AutoCompleteBox>
                           
                        </dataFormToolkit:DataField>
                        <dataFormToolkit:DataField Label=”UnitPrice:”>
                            <TextBox Text=”{Binding UnitPrice, Mode=TwoWay}”/>
                        </dataFormToolkit:DataField>
                        <dataFormToolkit:DataField Label=”UnitsInStock:”>
                            <TextBox Text=”{Binding UnitsInStock, Mode=TwoWay}”/>
                        </dataFormToolkit:DataField>
                        <dataFormToolkit:DataField Label=”UnitsOnOrder:”>
                            <TextBox Text=”{Binding UnitsOnOrder, Mode=TwoWay}”/>
                        </dataFormToolkit:DataField>
                        <StackPanel Width=”Auto” Orientation=”Horizontal”>
                            <Button Width=”100″ Height=”28″ Content=”Save” Click=”SaveButton_Click”/>                           
                        </StackPanel>
                    </StackPanel>
                </DataTemplate>
            </dataFormToolkit:DataForm.EditTemplate>
        </dataFormToolkit:DataForm>

 <DataTemplate x:Key=”dt”>
            <TextBlock Text=”{Binding CompanyName}”/>
        </DataTemplate>

I defined a Dataform to Add/edit a product with a combobox for Categories and AutoCompleteBox for picking a supplier.
the main change was to set the ItemSource properties of the ComboBox and AutoCompleteBox in the ContentLoaded handler

 void dataform1_ContentLoaded(object sender, DataFormContentLoadEventArgs e)
        {
            ComboBox cb = dataform1.FindNameInContent(“cbCategory”) as ComboBox;
            cb.ItemsSource = ctx.Categories;
            acb = (dataform1.FindNameInContent(“acb1″) as AutoCompleteBox);
            acb.ItemsSource = ctx.Suppliers;
            acb.ItemFilter = (searchText, item) => {
                if ((item as Suppliers).CompanyName.ToLower().StartsWith(searchText.ToLower()))
                {                   
                    return true;
                }
                else
                    return false;
                };
        }

I was not able to set the Text that is displayed when you select a supplier in the AutoCompleteBox.
So I created a Suppliers.shared.cs class in the WebProject which basically overrides ToString implementation. so when the supplier is picked, we get the value we want rather than ‘Suppliers :6’ or something like that

 public partial class Suppliers
    {
        public override string ToString()
        {
            return this.CompanyName + ” (” + this.City + “)”;
        }
    }

you can download the code  here

Change the connectionstring in Web.config as  applicable.

By default the startpage is MainPage.xaml.  To view/edit products, make sure you modify App.xaml.cs  to use “products.xaml” for the RootVisual”

Silverlight and Prism sample

After playing around with prism, I wanted to do the flexstore application using silverlight and prism and submit for the Component Art competition, but it looks like I am not going to much more than what I have till now after all, but it was a good learning exercise. Here are some screenshots of the app. you can try the demo here.
Note: All the functionality is in the products section. Drag and drop is not functional. we have to click on the buttons that popup when we mouse over the items

you need to login before you can submit an order. Data comes form an xml file. Users, and their orders are stored in the IsolatedStorage

home

products

products1
The code is not optimized nor is completely organized, but if you want to take a look at it, here is the link