Lecture # 6 Engr. Ali Javed 11th March, 2014

Size: px

Start display at page:

Download "Lecture # 6 Engr. Ali Javed 11th March, 2014"

Stuart Ward
6 years ago
Views:

1 Lecture # 6 Engr. Ali Javed 11 th March, 2014

2 Instructor s Information Instructor: Engr. Ali Javed Assistant Professor Department of Software Engineering U.E.T Taxila ali.javed@uettaxila.edu.pk Contact No: Office hours: Monday, 09:00-11:00, Office # 7 S.E.D Engr. Ali Javed

3 Course Information Course Name: Mobile Application Development Course Code: SE-5020 Course Link: Engr. Ali Javed

5 Data Binding 5

6 One Way Data Binding 6

7 Two Way Data Binding 7

8 Creating an Adder class 8

9 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

10 The AdderClass 10

11 Adding Notification Behaviour public interface INotifyPropertyChanged { // Summary: // Occurs when a property value changes. event PropertyChangedEventHandler PropertyChanged; } 11

12 Silverlight display elements PropertyChanged(this, new PropertyChangedEventArgs("AnswerValue")); 12

13 Reading back the property public int AnswerValue { get { return topvalue + bottomvalue; } } 13

14 Demo 14

15 Binding a class to the xaml xmlns:local="clr-namespace:addingmachine" 15

16 Mapping a class to a resource <phone:phoneapplicationpage.resources> <local:adderclass x:key="adderclass" /> </phone:phoneapplicationpage.resources> 16

17 Adding the resource to an element <Grid x:name="layoutroot" Background="Transparent" DataContext="{StaticResource AdderClass}"> 17

18 Business Objects and Silverlight 18

19 Binding the top line to AdderClass 19

20 Applying Data Binding 20

21 One Way binding for the answer 21

22 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

23 Databinding and the DataContext // Constructor public MainPage() { InitializeComponent(); } AdderClass adder = new AdderClass(); ContentGrid.DataContext = adder; 23

24 Demo 24

25 Session 4.4

26 Topics

27 Customer Manager 27

28 Application Data 28

29 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

30 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

31 Sample Data 31

32 Sample Data string [] firstnames = new string [] { "Rob", "Jim", "Joe", "Nigel", "Sally", "Tim"} ; string[] lastsnames = new string[] { "Smith", "Jones", "Bloggs", "Miles", "Wilkinson", "Brown" }; 32

33 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;

34 Displaying a List using a StackPanel 34

35 Sample Data <StackPanel HorizontalAlignment="Left" Margin="0,0,0,0" Name="customersStackPanel" VerticalAlignment="Top"/> 35

36 Sample Data foreach (Customer c in customers.customerlist) { TextBlock customerblock = new TextBlock(); customerblock.text = c.name; customersstackpanel.children.add(customerblock); } 36

37 StackPanel Children 37

38 Stackpanel Display 38

39 Adding a ScrollViewer <ScrollViewer> <StackPanel HorizontalAlignment="Left Margin="0,0,0,0" Name="customersStackPanel VerticalAlignment="Top" /> </ScrollViewer> 39

40 Demo 40

41 The Silverlight ListBox element 41

42 The ListBox and Data Binding 42

43 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

44 Binding Complicated Data 44

45 Creating a DataTemplate <DataTemplate> <StackPanel> <TextBlock Text="{Binding Name}"/> <TextBlock Text="{Binding Address}"/> </StackPanel> </DataTemplate> 45

46 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

47 Setting the ItemSource customers = Customers.MakeTestCustomers(); customerlist.itemssource = customers.customerlist; 47

48 Displaying the ListBox 48

49 An Improved DataTemplate <DataTemplate> <StackPanel> <TextBlock Text="{Binding Name}" Style="{StaticResource PhoneTextExtraLargeStyle}"/> <TextBlock Text="{Binding Address}" Style="{StaticResource PhoneTextSubtleStyle}"/> </StackPanel> </DataTemplate> 49

50 Selecting Items in a ListBox 50

51 Selection Changed Events <ListBox Name="customerList" SelectionChanged="customerList_SelectionChanged"> 51

52 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

53 Demo 53

54 Reference Engr. Ali Javed 54

55 For any query Feel Free to ask Engr. Ali Javed 55

Introduction to Data Templates and Value Converters in Silverlight

Introduction to Data Templates and Value Converters in Silverlight An overview of Data Templates and Value Converters by JeremyBytes.com Overview Business applications are all about data, and laying out