Lecture # 6...Windows Phone Applying Data Binding 20 Windows Phone One Way binding for the answer 21...

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

Transcript of Lecture # 6...Windows Phone Applying Data Binding 20 Windows Phone One Way binding for the answer 21...

Page 1: Lecture # 6...Windows Phone Applying Data Binding 20 Windows Phone One Way binding for the answer 21 Windows Phone Databindingand the DataContext 22

Engr. Ali Javed 11th March, 2014

Lecture # 6

Page 2: Lecture # 6...Windows Phone Applying Data Binding 20 Windows Phone One Way binding for the answer 21 Windows Phone Databindingand the DataContext 22

Windows Phone

Instructor’s Information Instructor: Engr. Ali Javed

Assistant Professor

Department of Software Engineering

U.E.T Taxila

Email: [email protected]

Contact No: +92-51-9047747

Office hours: Monday, 09:00 -11:00, Office # 7 S.E.D

Engr. Ali Javed

Page 3: Lecture # 6...Windows Phone Applying Data Binding 20 Windows Phone One Way binding for the answer 21 Windows Phone Databindingand the DataContext 22

Windows Phone

Course Information

Course Name: Mobile Application Development

Course Code: SE-5020

Course Link: http://web.uettaxila.edu.pk/CMS/SP2014/seMADms/

Engr. Ali Javed

Page 4: Lecture # 6...Windows Phone Applying Data Binding 20 Windows Phone One Way binding for the answer 21 Windows Phone Databindingand the DataContext 22
Page 5: Lecture # 6...Windows Phone Applying Data Binding 20 Windows Phone One Way binding for the answer 21 Windows Phone Databindingand the DataContext 22

Windows Phone

Data Binding

5

Page 6: Lecture # 6...Windows Phone Applying Data Binding 20 Windows Phone One Way binding for the answer 21 Windows Phone Databindingand the DataContext 22

Windows Phone

One Way Data Binding

6

Page 7: Lecture # 6...Windows Phone Applying Data Binding 20 Windows Phone One Way binding for the answer 21 Windows Phone Databindingand the DataContext 22

Windows Phone

Two Way Data Binding

7

Page 8: Lecture # 6...Windows Phone Applying Data Binding 20 Windows Phone One Way binding for the answer 21 Windows Phone Databindingand the DataContext 22

Windows Phone

Creating an Adder class

8

Page 9: Lecture # 6...Windows Phone Applying Data Binding 20 Windows Phone One Way binding for the answer 21 Windows Phone Databindingand the DataContext 22

Windows Phone

Creating an object to bind to

9

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

}

Page 10: Lecture # 6...Windows Phone Applying Data Binding 20 Windows Phone One Way binding for the answer 21 Windows Phone Databindingand the DataContext 22

Windows Phone

The AdderClass

10

Page 11: Lecture # 6...Windows Phone Applying Data Binding 20 Windows Phone One Way binding for the answer 21 Windows Phone Databindingand the DataContext 22

Windows Phone

Adding Notification Behaviour

11

public interface INotifyPropertyChanged{

// Summary:// Occurs when a property value changes.event PropertyChangedEventHandler PropertyChanged;

}

Page 12: Lecture # 6...Windows Phone Applying Data Binding 20 Windows Phone One Way binding for the answer 21 Windows Phone Databindingand the DataContext 22

Windows Phone

Silverlight display elements

12

PropertyChanged(this,new PropertyChangedEventArgs("AnswerValue"));

Page 13: Lecture # 6...Windows Phone Applying Data Binding 20 Windows Phone One Way binding for the answer 21 Windows Phone Databindingand the DataContext 22

Windows Phone

Reading back the property

13

public int AnswerValue{

get{

return topValue + bottomValue;}

}

Page 14: Lecture # 6...Windows Phone Applying Data Binding 20 Windows Phone One Way binding for the answer 21 Windows Phone Databindingand the DataContext 22

Windows Phone

Demo

14

Page 15: Lecture # 6...Windows Phone Applying Data Binding 20 Windows Phone One Way binding for the answer 21 Windows Phone Databindingand the DataContext 22

Windows Phone

Binding a class to the xaml

15

xmlns:local="clr-namespace:AddingMachine"

Page 16: Lecture # 6...Windows Phone Applying Data Binding 20 Windows Phone One Way binding for the answer 21 Windows Phone Databindingand the DataContext 22

Windows Phone

Mapping a class to a resource

16

<phone:PhoneApplicationPage.Resources><local:AdderClass x:Key="AdderClass" />

</phone:PhoneApplicationPage.Resources>

Page 17: Lecture # 6...Windows Phone Applying Data Binding 20 Windows Phone One Way binding for the answer 21 Windows Phone Databindingand the DataContext 22

Windows Phone

Adding the resource to an element

17

<Grid x:Name="LayoutRoot" Background="Transparent"DataContext="{StaticResource AdderClass}">

Page 18: Lecture # 6...Windows Phone Applying Data Binding 20 Windows Phone One Way binding for the answer 21 Windows Phone Databindingand the DataContext 22

Windows Phone

Business Objects and Silverlight

18

Page 19: Lecture # 6...Windows Phone Applying Data Binding 20 Windows Phone One Way binding for the answer 21 Windows Phone Databindingand the DataContext 22

Windows Phone

Binding the top line to AdderClass

19

Page 20: Lecture # 6...Windows Phone Applying Data Binding 20 Windows Phone One Way binding for the answer 21 Windows Phone Databindingand the DataContext 22

Windows Phone

Applying Data Binding

20

Page 21: Lecture # 6...Windows Phone Applying Data Binding 20 Windows Phone One Way binding for the answer 21 Windows Phone Databindingand the DataContext 22

Windows Phone

One Way binding for the answer

21

Page 22: Lecture # 6...Windows Phone Applying Data Binding 20 Windows Phone One Way binding for the answer 21 Windows Phone Databindingand the DataContext 22

Windows Phone

Databinding and the DataContext

22

<TextBox Height="72" HorizontalAlignment="Left"Margin="8,19,0,0" Name="firstNumberTextBox" Text="{BindingTopValue, Mode=TwoWay}" VerticalAlignment="Top"Width="460" TextAlignment="Center" >

Page 23: Lecture # 6...Windows Phone Applying Data Binding 20 Windows Phone One Way binding for the answer 21 Windows Phone Databindingand the DataContext 22

Windows Phone

Databinding and the DataContext

23

// Constructorpublic MainPage(){

InitializeComponent();

AdderClass adder = new AdderClass();ContentGrid.DataContext = adder;

}

Page 24: Lecture # 6...Windows Phone Applying Data Binding 20 Windows Phone One Way binding for the answer 21 Windows Phone Databindingand the DataContext 22

Windows Phone

Demo

24

Page 25: Lecture # 6...Windows Phone Applying Data Binding 20 Windows Phone One Way binding for the answer 21 Windows Phone Databindingand the DataContext 22

Session 4.4

Page 26: Lecture # 6...Windows Phone Applying Data Binding 20 Windows Phone One Way binding for the answer 21 Windows Phone Databindingand the DataContext 22

Windows Phone

Topics

Page 27: Lecture # 6...Windows Phone Applying Data Binding 20 Windows Phone One Way binding for the answer 21 Windows Phone Databindingand the DataContext 22

Windows Phone

Customer Manager

27

Page 28: Lecture # 6...Windows Phone Applying Data Binding 20 Windows Phone One Way binding for the answer 21 Windows Phone Databindingand the DataContext 22

Windows Phone

Application Data

28

Page 29: Lecture # 6...Windows Phone Applying Data Binding 20 Windows Phone One Way binding for the answer 21 Windows Phone Databindingand the DataContext 22

Windows Phone

The Customer class

29

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;

}}

Page 30: Lecture # 6...Windows Phone Applying Data Binding 20 Windows Phone One Way binding for the answer 21 Windows Phone Databindingand the DataContext 22

Windows Phone

The Customers class

30

public class Customers{

public string Name { get; set; }

public Customers(string inName) {

Name = inName;CustomerList = new List<Customer>();

}

public List<Customer> CustomerList;

}

Page 31: Lecture # 6...Windows Phone Applying Data Binding 20 Windows Phone One Way binding for the answer 21 Windows Phone Databindingand the DataContext 22

Windows Phone

Sample Data

31

Page 32: Lecture # 6...Windows Phone Applying Data Binding 20 Windows Phone One Way binding for the answer 21 Windows Phone Databindingand the DataContext 22

Windows Phone

Sample Data

32

string [] firstNames = new string [] { "Rob", "Jim","Joe", "Nigel", "Sally", "Tim"} ;

string[] lastsNames = new string[] { "Smith", "Jones","Bloggs", "Miles", "Wilkinson", "Brown" };

Page 33: Lecture # 6...Windows Phone Applying Data Binding 20 Windows Phone One Way binding for the answer 21 Windows Phone Databindingand the DataContext 22

Windows Phone

Sample Data Generator

33

public static Customers MakeTestCustomers(){

int id = 0;

foreach (string lastName in lastsNames) {foreach (string firstname in firstNames) {

//Construct a customer namestring name = firstname + " " + lastName;//Add the new customer to the listresult.CustomerList.Add(new Customer(name,

name + "'s House", id));// Increase the ID for the next customerid++;

}}return result;

}

Page 34: Lecture # 6...Windows Phone Applying Data Binding 20 Windows Phone One Way binding for the answer 21 Windows Phone Databindingand the DataContext 22

Windows Phone

Displaying a List using a StackPanel

34

Page 35: Lecture # 6...Windows Phone Applying Data Binding 20 Windows Phone One Way binding for the answer 21 Windows Phone Databindingand the DataContext 22

Windows Phone

Sample Data

35

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

Page 36: Lecture # 6...Windows Phone Applying Data Binding 20 Windows Phone One Way binding for the answer 21 Windows Phone Databindingand the DataContext 22

Windows Phone

Sample Data

36

foreach (Customer c in customers.CustomerList){

TextBlock customerBlock = new TextBlock();customerBlock.Text = c.Name;customersStackPanel.Children.Add(customerBlock);

}

Page 37: Lecture # 6...Windows Phone Applying Data Binding 20 Windows Phone One Way binding for the answer 21 Windows Phone Databindingand the DataContext 22

Windows Phone

StackPanel Children

37

Page 38: Lecture # 6...Windows Phone Applying Data Binding 20 Windows Phone One Way binding for the answer 21 Windows Phone Databindingand the DataContext 22

Windows Phone

Stackpanel Display

38

Page 39: Lecture # 6...Windows Phone Applying Data Binding 20 Windows Phone One Way binding for the answer 21 Windows Phone Databindingand the DataContext 22

Windows Phone

Adding a ScrollViewer

39

<ScrollViewer><StackPanel HorizontalAlignment="Left“

Margin="0,0,0,0" Name="customersStackPanel“VerticalAlignment="Top" />

</ScrollViewer>

Page 40: Lecture # 6...Windows Phone Applying Data Binding 20 Windows Phone One Way binding for the answer 21 Windows Phone Databindingand the DataContext 22

Windows Phone

Demo

40

Page 41: Lecture # 6...Windows Phone Applying Data Binding 20 Windows Phone One Way binding for the answer 21 Windows Phone Databindingand the DataContext 22

Windows Phone

The Silverlight ListBox element

41

Page 42: Lecture # 6...Windows Phone Applying Data Binding 20 Windows Phone One Way binding for the answer 21 Windows Phone Databindingand the DataContext 22

Windows Phone

The ListBox and Data Binding

42

Page 43: Lecture # 6...Windows Phone Applying Data Binding 20 Windows Phone One Way binding for the answer 21 Windows Phone Databindingand the DataContext 22

Windows Phone

Binding a Single Item

43

<TextBlock Height="46" HorizontalAlignment="Left"Margin="158,208,0,0" Name="resultTextBlock"Text="{Binding Path=AnswerValue}"VerticalAlignment="Top" FontSize="30" Width="160"TextAlignment="Center" />

Page 44: Lecture # 6...Windows Phone Applying Data Binding 20 Windows Phone One Way binding for the answer 21 Windows Phone Databindingand the DataContext 22

Windows Phone

Binding Complicated Data

44

Page 45: Lecture # 6...Windows Phone Applying Data Binding 20 Windows Phone One Way binding for the answer 21 Windows Phone Databindingand the DataContext 22

Windows Phone

Creating a DataTemplate

45

<DataTemplate><StackPanel>

<TextBlock Text="{Binding Name}"/><TextBlock Text="{Binding Address}"/>

</StackPanel></DataTemplate>

Page 46: Lecture # 6...Windows Phone Applying Data Binding 20 Windows Phone One Way binding for the answer 21 Windows Phone Databindingand the DataContext 22

Windows Phone

Using a DataTemplate in a ListBox

46

<ListBox Name="customerList"><ListBox.ItemTemplate>

<DataTemplate><StackPanel>

<TextBlock Text="{Binding Name}"/><TextBlock Text="{Binding Address}"/>

</StackPanel></DataTemplate>

</ListBox.ItemTemplate></ListBox>

Page 47: Lecture # 6...Windows Phone Applying Data Binding 20 Windows Phone One Way binding for the answer 21 Windows Phone Databindingand the DataContext 22

Windows Phone

Setting the ItemSource

47

customers = Customers.MakeTestCustomers();customerList.ItemsSource = customers.CustomerList;

Page 48: Lecture # 6...Windows Phone Applying Data Binding 20 Windows Phone One Way binding for the answer 21 Windows Phone Databindingand the DataContext 22

Windows Phone

Displaying the ListBox

48

Page 49: Lecture # 6...Windows Phone Applying Data Binding 20 Windows Phone One Way binding for the answer 21 Windows Phone Databindingand the DataContext 22

Windows Phone

An Improved DataTemplate

49

<DataTemplate><StackPanel>

<TextBlock Text="{Binding Name}"Style="{StaticResource PhoneTextExtraLargeStyle}"/><TextBlock Text="{Binding Address}"Style="{StaticResource PhoneTextSubtleStyle}"/>

</StackPanel></DataTemplate>

Page 50: Lecture # 6...Windows Phone Applying Data Binding 20 Windows Phone One Way binding for the answer 21 Windows Phone Databindingand the DataContext 22

Windows Phone

Selecting Items in a ListBox

50

Page 51: Lecture # 6...Windows Phone Applying Data Binding 20 Windows Phone One Way binding for the answer 21 Windows Phone Databindingand the DataContext 22

Windows Phone

Selection Changed Events

51

<ListBox Name="customerList"SelectionChanged="customerList_SelectionChanged">

Page 52: Lecture # 6...Windows Phone Applying Data Binding 20 Windows Phone One Way binding for the answer 21 Windows Phone Databindingand the DataContext 22

Windows Phone

Selection Changed Events

52

private void customerList_SelectionChanged(object sender,SelectionChangedEventArgs e)

{// when we get here the user has selected a customerCustomer selectedCustomer =

customerList.SelectedItem as Customer;

MessageBox.Show(selectedCustomer.Name + " is selected");

}

Page 53: Lecture # 6...Windows Phone Applying Data Binding 20 Windows Phone One Way binding for the answer 21 Windows Phone Databindingand the DataContext 22

Windows Phone

Demo

53

Page 54: Lecture # 6...Windows Phone Applying Data Binding 20 Windows Phone One Way binding for the answer 21 Windows Phone Databindingand the DataContext 22

Windows Phone

Referencehttp://www.techopedia.com/definition/24291/isolated-storage-net

http://msdn.microsoft.com/en-us/library/3ak841sy(v=vs.110).aspx

54Engr. Ali Javed

Page 55: Lecture # 6...Windows Phone Applying Data Binding 20 Windows Phone One Way binding for the answer 21 Windows Phone Databindingand the DataContext 22

Windows Phone

55Engr. Ali Javed

For any query Feel Free to ask