Lecture # 6 Engr. Ali Javed 11 th March, 2014
Instructor s Information Instructor: Engr. Ali Javed Assistant Professor Department of Software Engineering U.E.T Taxila Email: ali.javed@uettaxila.edu.pk Contact No: +92-51-9047747 Office hours: Monday, 09:00-11:00, Office # 7 S.E.D Engr. Ali Javed
Course Information Course Name: Mobile Application Development Course Code: SE-5020 Course Link: http://web.uettaxila.edu.pk/cms/sp2014/semadms/ Engr. Ali Javed
Data Binding 5
One Way Data Binding 6
Two Way Data Binding 7
Creating an Adder class 8
Creating an object to bind to public class AdderClass { private int topvalue; public int TopValue { get { return topvalue; } set { topvalue = value; } } // repeat for bottomvalue } public int AnswerValue { get { return topvalue + bottomvalue;} } 9
The AdderClass 10
Adding Notification Behaviour public interface INotifyPropertyChanged { // Summary: // Occurs when a property value changes. event PropertyChangedEventHandler PropertyChanged; } 11
Silverlight display elements PropertyChanged(this, new PropertyChangedEventArgs("AnswerValue")); 12
Reading back the property public int AnswerValue { get { return topvalue + bottomvalue; } } 13
Demo 14
Binding a class to the xaml xmlns:local="clr-namespace:addingmachine" 15
Mapping a class to a resource <phone:phoneapplicationpage.resources> <local:adderclass x:key="adderclass" /> </phone:phoneapplicationpage.resources> 16
Adding the resource to an element <Grid x:name="layoutroot" Background="Transparent" DataContext="{StaticResource AdderClass}"> 17
Business Objects and Silverlight 18
Binding the top line to AdderClass 19
Applying Data Binding 20
One Way binding for the answer 21
Databinding and the DataContext <TextBox Height="72" HorizontalAlignment="Left" Margin="8,19,0,0" Name="firstNumberTextBox" Text="{Binding TopValue, Mode=TwoWay}" VerticalAlignment="Top" Width="460" TextAlignment="Center" > 22
Databinding and the DataContext // Constructor public MainPage() { InitializeComponent(); } AdderClass adder = new AdderClass(); ContentGrid.DataContext = adder; 23
Demo 24
Session 4.4
Topics
Customer Manager 27
Application Data 28
The Customer class public class Customer { public string Name { get; set; } public string Address { get; set; } public int ID { get; set; } } public Customer(string inname, string inaddress, int inid) { Name = inname; Address = inaddress; ID = inid; } 29
The Customers class public class Customers { public string Name { get; set; } } public Customers(string inname) { Name = inname; CustomerList = new List<Customer>(); } public List<Customer> CustomerList; 30
Sample Data 31
Sample Data string [] firstnames = new string [] { "Rob", "Jim", "Joe", "Nigel", "Sally", "Tim"} ; string[] lastsnames = new string[] { "Smith", "Jones", "Bloggs", "Miles", "Wilkinson", "Brown" }; 32
Sample Data Generator public static Customers MakeTestCustomers() { int id = 0; } 33 foreach (string lastname in lastsnames) { foreach (string firstname in firstnames) { //Construct a customer name string name = firstname + " " + lastname; //Add the new customer to the list result.customerlist.add(new Customer(name, name + "'s House", id)); // Increase the ID for the next customer id++; } } return result;
Displaying a List using a StackPanel 34
Sample Data <StackPanel HorizontalAlignment="Left" Margin="0,0,0,0" Name="customersStackPanel" VerticalAlignment="Top"/> 35
Sample Data foreach (Customer c in customers.customerlist) { TextBlock customerblock = new TextBlock(); customerblock.text = c.name; customersstackpanel.children.add(customerblock); } 36
StackPanel Children 37
Stackpanel Display 38
Adding a ScrollViewer <ScrollViewer> <StackPanel HorizontalAlignment="Left Margin="0,0,0,0" Name="customersStackPanel VerticalAlignment="Top" /> </ScrollViewer> 39
Demo 40
The Silverlight ListBox element 41
The ListBox and Data Binding 42
Binding a Single Item <TextBlock Height="46" HorizontalAlignment="Left" Margin="158,208,0,0" Name="resultTextBlock" Text="{Binding Path=AnswerValue}" VerticalAlignment="Top" FontSize="30" Width="160" TextAlignment="Center" /> 43
Binding Complicated Data 44
Creating a DataTemplate <DataTemplate> <StackPanel> <TextBlock Text="{Binding Name}"/> <TextBlock Text="{Binding Address}"/> </StackPanel> </DataTemplate> 45
Using a DataTemplate in a ListBox <ListBox Name="customerList"> <ListBox.ItemTemplate> <DataTemplate> <StackPanel> <TextBlock Text="{Binding Name}"/> <TextBlock Text="{Binding Address}"/> </StackPanel> </DataTemplate> </ListBox.ItemTemplate> </ListBox> 46
Setting the ItemSource customers = Customers.MakeTestCustomers(); customerlist.itemssource = customers.customerlist; 47
Displaying the ListBox 48
An Improved DataTemplate <DataTemplate> <StackPanel> <TextBlock Text="{Binding Name}" Style="{StaticResource PhoneTextExtraLargeStyle}"/> <TextBlock Text="{Binding Address}" Style="{StaticResource PhoneTextSubtleStyle}"/> </StackPanel> </DataTemplate> 49
Selecting Items in a ListBox 50
Selection Changed Events <ListBox Name="customerList" SelectionChanged="customerList_SelectionChanged"> 51
Selection Changed Events private void customerlist_selectionchanged(object sender, SelectionChangedEventArgs e) { // when we get here the user has selected a customer Customer selectedcustomer = customerlist.selecteditem as Customer; } MessageBox.Show(selectedCustomer.Name + " is selected"); 52
Demo 53
Reference http://www.techopedia.com/definition/24291/isolated-storage-net http://msdn.microsoft.com/en-us/library/3ak841sy(v=vs.110).aspx Engr. Ali Javed 54
For any query Feel Free to ask Engr. Ali Javed 55