1) ItemsSource: it point to collection which has all the objects that will be shown in the list

Transcription

1 How to bind XML file as collection of object in Silverlight using WCF service Introduction: Binding to a single object is straight forward, but practically we are more interested in binding to a collection object say like, all employee in a table. Dependency property supports the single value binding, so binding to collection of object had to be dealt with little more sophistication. Any control which support list of items is derived from items control so to support collection binding, itemscontrol class defines some properties. What are these properties? 1) ItemsSource: it point to collection which has all the objects that will be shown in the list 2) ItemTemplate: it provides the datatemplate that will be used to create the visual appearance of each item. 3) ItemsPanel: It provides a template that will be used create the layout container that holds all the items in the list. 4) DisplayMem berpath: it identifies the property that will be used to create the display text for each item. Ok, so let us create a sample project to demonstrate binding of collection object. Step 1: Create a Silverlight application project let s say CollectionBindingByService Step2: Add an xml file for data storage to CollectionBindingByService.Web project and name is store.xml.

2 Step 3: I have inserted some data into it with data nodes like below ; <Products> <ProductID>355</ProductID> <CategoryID>16</CategoryID> <ModelNumber>RU007</ModelNumber> <ModelName>Rain Racer 2000</ModelName> <ProductImage>image.gif</ProductImage> <UnitCost> </UnitCost> <Description>Looks like an ordinary bumbershoot, but don't be fooled! Simply place Rain Racer's tip on the ground and press the release latch. Within seconds, this ordinary rain umbrella converts into a two-wheeled gaspowered mini-scooter. Goes from 0 to 60 in 7.5 seconds - even in a driving rain! Comes in black, blue, and candy-apple red.</description> <CategoryID1>16</CategoryID1> <CategoryName>Travel</CategoryName> </Products> Step 4: Add a WCF service svc file. Name is StoreDb.svc Step 5: Now add a class say Product.cs where we wil define our property.

3 Below is code of our product class with variables and property declared. note we have inherited our class with INotifyPropertyChanged [DataContract()] public class Product : INotifyPropertyChanged private bool haschanges = false; public bool HasChanges get return haschanges; set haschanges = value; private string modelnumber; [DataMember()] public string ModelNumber get return modelnumber; set modelnumber = value; OnPropertyChanged(new PropertyChangedEventArgs("ModelNumber")); private string modelname; [DataMember()] public string ModelName get return modelname; set modelname = value; OnPropertyChanged(new PropertyChangedEventArgs("ModelName")); private double unitcost; [DataMember()] public double UnitCost get return unitcost; set unitcost = value; OnPropertyChanged(new PropertyChangedEventArgs("UnitCost")); private string description; [DataMember()] public string Description

4 get return description; set description = value; OnPropertyChanged(new PropertyChangedEventArgs("Description")); private string categoryname; [DataMember()] public string CategoryName get return categoryname; set categoryname = value; private string productimagepath; [DataMember()] public string ProductImagePath get return productimagepath; set productimagepath = value; public Product(string modelnumber, string modelname, double unitcost, string description) ModelNumber = modelnumber; ModelName = modelname; UnitCost = unitcost; Description = description; public Product(string modelnumber, string modelname, double unitcost, string description, string productimagepath) : this(modelnumber, modelname, unitcost, description) ProductImagePath = productimagepath; public Product(string modelnumber, string modelname, double unitcost, string description, string categoryname, string productimagepath) : this(modelnumber, modelname, unitcost, description) CategoryName = categoryname; ProductImagePath = productimagepath; public Product() public override string ToString()

5 return ModelName + " (" + ModelNumber + ")"; public event PropertyChangedEventHandler PropertyChanged; public void OnPropertyChanged(PropertyChangedEventArgs e) if (PropertyChanged!= null) PropertyChanged(this, e); Step 6: Open StoreDb.svc.cs and write code to read XML data store and here now we will define our service contract. [ServiceContract] [AspNetCompatibilityRequirements(RequirementsMode=AspNetCompatibilityRequirem entsmode.allowed)] public class StoreDb We have created our servcie contract with AspNet compability requirement mode to Allowed. Now we need to create operation contract i.e. methods. Before that in svc page contructor, we will load XML file into our dataset,like below; DataSet ds = new DataSet(); public StoreDb() ds.readxml(httpcontext.current.server.mappath("store.xml"); Now we will create a method which will return product detail when any product id is provided by cleint. [OperationContract] public Product GetProduct(int ID) DataRow productrow = ds.tables["products"].select("productid = " + ID.ToString())[0]; Product product = new Product((string)productRow["ModelNumber"], (string)productrow["modelname"], Convert.ToDouble(productRow["UnitCost"]), (string)productrow["description"], (string)productrow["categoryname"], (string)productrow["productimage"]); return product;

6 Now we will create a method which will return product detail for all products. [OperationContract()] public List<Product> GetProducts() List<Product> products = new List<Product>(); foreach (DataRow productrow in ds.tables["products"].rows) products.add(new Product((string)productRow["ModelNumber"], (string)productrow["modelname"], Convert.ToDouble(productRow["UnitCost"]), (string)productrow["description"], (string)productrow["categoryname"], (string)productrow["productimage"])); return products; Step 7: build CollectionBindingByService.Web and open web.config file, you will see visual studio has wcf hadautomatically configured it. <system.servicemodel> <behaviors> <servicebehaviors> <behavior name="storedbbehavior"> <servicemetadata httpgetenabled="true"/> <servicedebug includeexceptiondetailinfaults="false"/> </behavior> </servicebehaviors> </behaviors> <servicehostingenvironment aspnetcompatibilityenabled="true"/> <services> <service behaviorconfiguration="storedbbehavior" name="storedb"> <endpoint address="" binding="basichttpbinding" contract="storedb"/> <endpoint address="mex" binding="mexhttpbinding" contract="imetadataexchange"/> </service> </services> </system.servicemodel> Step 8: Now Set CollectionBindingByService.Web as start up project and press F5. Come to CollectionBindingByService project and click to add service reference.

7 Step 9: Come back to CollectionBindingByService project and add a user control,name is ProductFromService.xaml Now here we wil create a XAML interface to display data by accessing wcf service.

8 When you look into XAML for this, notice the code for listbox <ListBox x:name="lstproduct" Margin="5" DisplayMemberPath="ModelName" SelectionChanged="lstProduct_SelectionChanged"></ListBox> Here I have used DisplayMemberPath,which create the display text for each item.

9 You can see in this interface we have a listbox for displaying all product names. Three buttons for getting product details, adding and deleting them as well. We have option to fetch product detail by providing product id. Step 10: Lets write code for GetProduct, which wil fetch all product name in listbox. Now Open ProductFromService.xmal.cs and add this namespace using CollectionBindingByService.ProductService; At first we need to create a observable collection object. private ObservableCollection<Product> products = new ObservableCollection<Product>(); private void btngetproduct_click(object sender, RoutedEventArgs e) EndpointAddress address = new EndpointAddress(" + HtmlPage.Document.DocumentUri.Port + "/CollectionBindingByService.Web/StoreDb.svc"); StoreDbClient client = new StoreDbClient(new BasicHttpBinding(), address); client.getproductscompleted += new EventHandler<GetProductsCompletedEventArgs>(client_GetProductsCompleted); client.getproductsasync(); void client_getproductscompleted(object sender, GetProductsCompletedEventArgs e) try products.clear(); foreach (Product product in e.result) products.add(product); lstproduct.itemssource = products; catch lblerror.text = "Failed to contact service.";

10 When the user clicks the Get Products button, the event-handling code calls the GetProducts () method asynchronously: When the product list is received from the web service, the code stores the collection as a member variable in the page class for easier access elsewhere in your code. The code then sets that collection as the ItemsSource for the list: Step 11: Set CollectionBindingByService.Web as start up project and Press F5, and click on get product, you will see below like result. Step 12: Click on any product item, you will notice that textboxes get populated respectively. Here we are using datacontext of higest layout control, i.e. grid here, to bind the data. For textboxes we have just used binding expression like below; Text="Binding Description, Mode=TwoWay">

11 private void lstproduct_selectionchanged(object sender, SelectionChangedEventArgs e) gridproductdetails.datacontext = lstproduct.selecteditem; Step 13: Now let us test for Product ID, say 365. Here we are calling GetProductID operation contract.

12 Step 14: Now let us try to add any item. It is quite simple, we need to create an object of class product and then add it into listbox. See the code below; private void btnadd_click(object sender, RoutedEventArgs e) Product p = new Product(); p.modelname = "New Product"; products.add(p); lstproduct.selecteditem = p; lstproduct.updatelayout(); lstproduct.scrollintoview(p);

13 Step 15: Now let us try to delete any item. private void btndelete_click(object sender, RoutedEventArgs e) products.remove((product)lstproduct.selecteditem); Here we are removing that selected product from product observable object. Cool, isn t. So we saw how to display, add and delete collection items. Hope you enjoyed reading. Cheers