3. Topics Manipulating Silverlight element properties Editing the XAML for Silverlight elements Using the MessageBox class Adding and using assets Assets as Content and Resources
4. Silverlight Elements At the moment we know about three elements TextBlock to display messages and labels TextBox to receive input from the user Button to generate events In this session we are going to improve our understanding of these elements to create more interesting user interfaces 4
5. Elements as objects with properties From a programming perspective we regard a Silverlight display element as an object The object is an instance of the particular element type We can call methods and set properties on the object These can result in a change in the appearance of the object on the display 5
6. TextBlock properties resultTextBlock.Text = result.ToString(); To change the text displayed by a TextBlock we just have to assign a string to the Text property Behind the property will be some code that runs when the property is assigned This will tell Silverlight that the text has changed and will result in the display updating We don’t have to worry about how this works 6
7. Improving Error Handling At the moment our AddingMachine program is not tolerant of user errors If they enter text rather than a number into a TextBlock the Parse method will throw an exception and the program will halt 7
8. Parse and Exceptions float v1 = float.Parse(firstNumberTextBox.Text); The Parse method will throw an exception if we give it invalid inputs Our program must deal with this more gracefully than just stopping 8
9. Using TryParse to detect errors float v1 = 0;if (!int.TryParse(firstNumberTextBox.Text, out v1)) {// Invalid text in textbox} The TryParse method will try to parse the string The clue is in the name If the parse fails it returns false It will not throw an exception 9
10. Using the out parameter float v1 = 0;if (!int.TryParse(firstNumberTextBox.Text, out v1)) {// Invalid text in textbox} TryParse is given a reference to the location where it must place the result This is an out parameter The method is passed a reference it can follow to put the result into v1 10
11. Changing the colour of Text float v1 = 0;if (!float.TryParse(firstNumberTextBox.Text, out v1)){firstNumberTextBox.Foreground = newSolidColorBrush(Colors.Red);return;} This version of the number conversion code turns the colour of the text in the TextBox red if the number is invalid 11
12. Drawing and Brushes float v1 = 0;if (!float.TryParse(firstNumberTextBox.Text, out v1)){firstNumberTextBox.Foreground = newSolidColorBrush(Colors.Red);return;} The text is drawn using a Silverlight brush The simplest form of brush is a solid colour, but you can make bushes from images and gradients 12
14. Brush setup privateSolidColorBrusherrorBrush = newSolidColorBrush(Colors.Red);privateBrushcorrectBrush = null; This solution uses two brushes One is set to the error colour, Red The other is copied from the TextBox so that we can use it to put the colour back if the entry is valid 14
15. Storing the correct brush privatevoidcalculateResult(){boolerrorFound = false; if (correctBrush == null) correctBrush = firstNumberTextBox.Foreground;// Rest of method goes here} The first time the method is called it makes a copy of the brush used in the TextBox 15
16. Proper Error display privatevoidcalculateResult(){// Sort out brushes if (!float.TryParse(firstNumberTextBox.Text, out v1)) {firstNumberTextBox.Foreground = errorBrush;errorFound = true; }else {firstNumberTextBox.Foreground = correctBrush; }} The text is drawn using a Silverlight brush The simplest form is a solid colour, but you can make bushes from images and gradients 16
18. Further Improvement At the moment the text keyboard is displayed when the user starts to enter the numbers to be added This is not what they would like The number keyboard should be displayed first 18
19. Editing the XAML for an element The XAML is the part of the program that “declares” the Silverlight display elements that are used in the user interface on the page We can modify the declaration to tell configure the TextBox to display the digital keyboard This is the best place to perform such settings Although you could also do this using C# code if you wanted to 19
20. TextBlock XAML <TextBox Height="72"HorizontalAlignment="Left" Margin="8,175,0,0" Name="secondNumberTextBox" Text="0"VerticalAlignment="Top" Width="460"TextAlignment="Center" /> This is the XAML used to configure one of the TextBlocksin AddingMachine These settings position the control on the page and set up the text alignment We need to add the numeric keyboard requirement 20
21. XAML and attributes <TextBox Height="72"HorizontalAlignment="Left" Margin="8,175,0,0" Name="secondNumberTextBox" Text="0"VerticalAlignment="Top" Width="460"TextAlignment="Center" /> The information about the TextBox is presently given as a series of attributes You can think of an attribute as a simple name/value pair if you wish These are given as part of a simple TextBox element 21
22. Attributes and InputScope The keyboard required for a TextBox is selected using the “InputScope” information for that TextBox The InputScope is actually a collection of InputScopeName values This makes it hard to express the InputScope as an attribute to the TextBox So we have to change the format of the XAML used to describe the TextBox 22
23. Configuring using attributes <TextBox Height="72"HorizontalAlignment="Left" Margin="8,175,0,0" Name="secondNumberTextBox" Text="0"VerticalAlignment="Top" Width="460"TextAlignment="Center" /> In this format the attributes are given between the <TextBoxand the /> delimiters This is a great way to express simple items of configuration information 23
24. Configuring using properties <TextBox Height="72"HorizontalAlignment="Left" Margin="8,19,0,0" Name="firstNumberTextBox" Text="0"VerticalAlignment="Top" Width="460"TextAlignment="Center"><TextBox.InputScope><InputScope><InputScopeNameNameValue="Digits" /></InputScope></TextBox.InputScope></TextBox> This version of TextBox configuration uses a property list as well as attributes 24
25. Attributes <TextBox Height="72"HorizontalAlignment="Left" Margin="8,19,0,0" Name="firstNumberTextBox" Text="0"VerticalAlignment="Top" Width="460"TextAlignment="Center"><TextBox.InputScope><InputScope><InputScopeNameNameValue="Digits" /></InputScope></TextBox.InputScope></TextBox> The attributes are in the same place as before But the TextBox now contains a list of properties 25
26. Attribute delimiter <TextBox Height="72"HorizontalAlignment="Left" Margin="8,19,0,0" Name="firstNumberTextBox" Text="0"VerticalAlignment="Top" Width="460"TextAlignment="Center"><TextBox.InputScope><InputScope><InputScopeNameNameValue="Digits" /></InputScope></TextBox.InputScope></TextBox> This character marks the end of the attributes for the TextBox If there were no properties it would be /> 26
27. Properties <TextBox Height="72"HorizontalAlignment="Left" Margin="8,19,0,0" Name="firstNumberTextBox" Text="0"VerticalAlignment="Top" Width="460"TextAlignment="Center"><TextBox.InputScope><InputScope><InputScopeNameNameValue="Digits" /></InputScope></TextBox.InputScope></TextBox> These are the properties for the TextBox At the moment we just have the one, which is a list of InputScope items 27
28. Property Delimiter <TextBox Height="72"HorizontalAlignment="Left" Margin="8,19,0,0" Name="firstNumberTextBox" Text="0"VerticalAlignment="Top" Width="460"TextAlignment="Center"><TextBox.InputScope><InputScope><InputScopeNameNameValue="Digits" /></InputScope></TextBox.InputScope></TextBox> This marks the end of the properties for the TextBox We could have lots of other properties 28
29. Attributes in action <Person name="Rob"/> As another example, consider a Person described in XAML This person has a name attribute We can express the attribute in the simple form above This is a name/value pair 29
30. Adding Properties <Person name="Rob"> <AddressaddressType="HomeAddress"> <FirstLinetext="18 Pussycat Mews"/> <Towntext="Seldom"/> <Countytext="Wilts"/> <PostCodetext="NE1 410S"/> </Address></Person> Now the Person has both attributes and properties The Address has attributes and properties too 30
31. Attributes vs Properties If you are holding a something simple and indivisible about an element, for example Height = 72, then an attribute makes very good sense If you are holding something that is compound (i.e. contains sub elements), for example a list of InputScopeNames , then properties make good sense 31
32. Properties <TextBox Height="72"HorizontalAlignment="Left" Margin="8,19,0,0" Name="firstNumberTextBox" Text="0"VerticalAlignment="Top" Width="460"TextAlignment="Center"><TextBox.InputScope><InputScope><InputScopeNameNameValue="Digits" /></InputScope></TextBox.InputScope></TextBox> Since the input scope will contain a list of items it makes sense to use the Property format 32
33. Attributes as Properties <TextBoxHorizontalAlignment="Left" Margin="8,175,0,0" Name="secondNumberTextBox" Text="0"VerticalAlignment="Top" Width="460"TextAlignment="Center"> <TextBox.Height>72 </TextBox.Height></TextBox> We can actually express attributes as properties if we wish The syntax is a bit long winded 33
34. XAML wrap up XAML “declares” the display elements and sets their attributes and properties These are expressed in a customised form of XML Attributes provide a simple way of giving setting information Properties are more structured They are equivalent, as they map onto properties of a .NET class 34
35. Setting Properties in Code // Make a new input scopeInputScopedigitScope = newInputScope();// Make a new input scope nameInputScopeName digits = newInputScopeName();// Set the new name to Digitsdigits.NameValue = InputScopeNameValue.Digits;// Add the name to the new scopedigitScope.Names.Add(digits);// Set the scope of the textbox to the new scopefirstNumberTextBox.InputScope = digitScope; This is the C# to do the same thing… 35
37. Displaying a MessageBox If you want to display a message box to alert the user of a situation, or ask for confirmation you can do this The MessageBox class exposes a Show method that is used to display this There are a number of options you can use to allow the user to confirm actions as well as acknowledge messages 37
38. Simple Message MessageBox.Show("Invalid Input" + System.Environment.NewLine + "Please re-enter"); You can create a multi-line message by breaking it with the Newline value The Show method will not return until the user presses OK 38
39. User Selection if (MessageBox.Show("Do you really want to do this?","Scary Thing", MessageBoxButton.OKCancel) == MessageBoxResult.OK){// do scary thing here}else{ // do something else} You can test the return value and use this to control program behaviour 39
40. Using Assets in Windows Phone We have seen that Visual Studio can use the project mechanism to allow you to combine code and assets such as images and sounds These can then be used in your program to improve the user experience Now we are going to find out how to manipulate these from within a program 40
41. Adding an Asset The plan is to use this image as the background to the AddingMachine program It is a jpeg image that has been cropped from a larger picture 41
42. Image Sizes Remember that the Windows Phone is a slightly constrained device Limited resolution screen (800x480) Limited amount of program memory Make sure when you add images that you don’t add them to a greater resolution than is required for the platform Otherwise you will waste memory 42
43. Adding an Asset If we simply drag a file onto a project that file is added to the project A copy of the file is made in the project directory and the project contains a link to this copy 43
44. Linking to assets You can use the Project>Add Existing Item dialog to add an asset If you do this you can add the asset as a link rather than making a copy of it This can be useful if you want several projects to share a single resource item 44
45. Assets Build Action When you add an asset to a project you specify how it is to be used in the solution This is set as the “Build Action” of the asset The two Build Actions we are going to consider are “Content” and “Resource” 45
46. Assets as Content An asset with the “BuildAction” of “Content” is copied into the folder alongside the program executable The program can then open this file as it would any other 46
47. The Image element <Image Height="611"HorizontalAlignment="Left" Margin="8,0,0,0" Name="gearBackgroundImage" Stretch="Fill"VerticalAlignment="Top" Width="472" Source="AddingGears.jpg" /> Silverlight provides an Image element that will draw images on a page The Image element has a source attribute that can identify a file of content to load the image from 47
48. Silverlight Draw Order Silverlight will draw elements in the order they are given in the XAML If the image is drawn first it will have the other items drawn on top of it 48
50. Assets as Resources An asset added as a Resource is stored as part of the program assembly file The easiest way to add an image as a resource is to use the Visual Studio Toolbox to add an image 50
51. The Source property of an Image We can use the Source item in the Properties pane for an image to create a resource to load If we click the browse button we can open a Choose Image dialog 51
52. Image resources in the applicaiton We are now looking for images held as resources in the application At the moment there are not any We can click Add to add an image as a resource 52
53. Browsing for image resources We can select one or more images to be added into the application as resources We could add other file types as well 53
54. An image resource Once the image is added it has a particular path that can be used to locate it as a resource This path will be added to the xaml for the Image element 54
55. Using a resource in an Image <Image Height="611"HorizontalAlignment="Left" Name="gearBackgrounds" Stretch="Fill"VerticalAlignment="Top" Width="472" Source="/AddingMachine;component/Images/AddingGears.jpg" /> This version of the source path locates the image as a resource in the assembly When the Silverlight component is built it will now load the image from the assembly 55
57. Content vs Resources Content Smaller program Faster load time for program, but slightly slower access to the resource A bit more “untidy” Resource Larger program Slower load time, but faster access to resources Just a single file to deploy 57
58. Review Silverlight elements have many properties that can be manipulated by applications Initialisation properties are best set in the xaml for an element Elements are described by attributes and properties A MessageBox is used to get a user response Assets are added to an application as content (separate file) or resource (in assembly file) 58
60. Topics Responding to events from Silverlight elements Using DataBinding to connect Silverlight elements to application classes Adding classes as resources to a page One way data binding Two way data binding
61. Silverlight element events <Button Content="equals" Height="72"HorizontalAlignment="Left" Margin="158,275,0,0" Name="equalsButton"VerticalAlignment="Top" Width="160" Click="equalsButton_Click" /> privatevoidequalsButton_Click(objectsender, RoutedEventArgs e){calculateResult();} We have seen how Silverlight elements can link to event handlers in the code for a page 61
62. The TextChanged Event A Button can generate Click events when it is clicked A TextBox can generate TextChanged events if the user types in the TextBox We can use this to create an AddingMachine that updates automatically No need to press Calculate each time a new solution is required 62
63. TextBox Events The TextBox can generate lots of different events We can create a binding to an event by double clicking the event in the Properties pane This updates the xaml description of the control and adds an event handler 63
64. Automatically calculating a result privatevoidfirstNumberTextBox_TextChanged(objectsender,TextChangedEventArgse){calculateResult();} Each time the text in the first number TextBox changes the calculation is performed We can also bind an event to changes in the second TextBox too 64
65. Double TextChanged Events stringoldFirstNumber = "";privatevoidfirstNumberTextBox_TextChanged(objectsender, TextChangedEventArgse){if (firstNumberTextBox.Text == oldFirstNumber) return;oldFirstNumber = firstNumberTextBox.Text;calculateResult();} There is a known issue with the TextChanged event. It may get fired twice This code shows how to work round this 65
67. Data Binding This is a very important subject It provides a coupling between the data in a program and the user interface It removes the need to write “glue” logic to link program data to display elements It can work in two ways ‘One-way’ ‘Two-way’ 67
68. One Way Data Binding This creates a connection between a property in a display object and a property in a C# class If the property in the class is changed, the property in the display element is changed too We can use this in our AddingMachine to bind the result of the calculation to the display on the page 68
69. Two Way Data Binding This form of connection works in both directions Changes to the display element fire events in the C# class Changes to properties in the C# class cause the display element to update We can use this in our AddingMachine to read numbers in from the user 69
70. Creating an Adder class The first thing we need to do is create a class that encapsulates the behaviour of the AddingMachine This will expose the properties that we can bind to the display elements Text in the top TextBox Text in the bottom TextBox Text in the result TextBlock 70
71. Creating an object to bind to publicclassAdderClass{privateinttopValue;publicintTopValue {get { returntopValue; }set { topValue = value; }} // repeat for bottomValuepublicintAnswerValue {get { returntopValue + bottomValue;} }} 71
72. The AdderClass The AdderClass is the element in our program that will do all the business logic We could give it to another programmer to fill in and they could put the behaviours behind the properties in the class We could also create test versions to test the display This is another example of separation of the program from the presentation 72
73. Adding Notification Behaviour publicinterfaceINotifyPropertyChanged { // Summary: // Occurs when a property value changes. eventPropertyChangedEventHandlerPropertyChanged; } For a class to be able to bind to display elements it must implement the INotifyPropertyChanged interface This is how elements can register an interest in properties in the class 73
74. Silverlight display elements PropertyChanged(this,newPropertyChangedEventArgs("AnswerValue")); When a Silverlight display element wants to be notified of a change to a property it will bind to the PropertyChanged event The data object can then use the event to deliver a message that a property has changed Above we are telling Silverlight the AnswerValue has changed 74
75. Reading back the property publicintAnswerValue{get {returntopValue + bottomValue; }} When the Silverlight element reads the property it causes the result to be calculated and returned This value will end up on the display 75
77. Binding a class to the xaml xmlns:local="clr-namespace:AddingMachine" The C# business class must be bound to the xaml in a page so that the page can use it We start by adding the namespace containing the class to the resources available to this page A xaml file contains a list of the namespaces it is using 77
78. Mapping a class to a resource <phone:PhoneApplicationPage.Resources><local:AdderClass x:Key="AdderClass" /></phone:PhoneApplicationPage.Resources> The next step is to make a mapping between the AdderClass and the name we are using in the xaml page In this case we are using the same name for both You might want to use different classes or test classes in the xaml page This lets you configure this in the xaml 78
79. Adding the resource to an element <Grid x:Name="LayoutRoot" Background="Transparent"DataContext="{StaticResourceAdderClass}"> The Grid control is the one that holds all the elements on our page Adding a DataContext to a control makes it available to all the controls it contains This means that our TextBlock and TextBox items can now all use that control 79
80. Business Objects and Silverlight We have now connected our AdderClass business object to Grid element and all the components in it We only have to do this once for a class, no matter how many properties it contains The next thing we need to do is bind the Silverlight element properties to the properties exposed by the AdderClass object 80
81. Binding the top line to AdderClass We are going to connect the Text in the first number textbox (the one in the top line) to the TopValue property in AdderClass We do this from the Properties pane in Visual Studio 81
82. Applying Data Binding If we select “ApplyDataBinding” we are given a list of data sources and properties they expose We select the one we want to use Note that we have selected TwoWay binding 82
83. One Way binding for the answer When we bind the result text box this is only bound “OneWay” There is no set method for this property in AdderClass The program will only ever want to display results The binding can only be OneWay 83
84. Review Silverlight elements can generate events that C# code can bind to This includes changing text in a TextBox Silverlight elements properties can also be bound to properties in C# business objects The object implements an interface that exposes an event source that Silverlight can bind to This can provide two way (input/output) or one way (output only) data binding 84
86. Topics Creating multi-page applications Navigating between pages Using the Back button Passing data between pages Page navigation events Sharing data in an application
87. Multi-page applications You often can’t fit all the required elements of an application on a single page Alternatively you might want to have separate “options” or “settings” pages in your application Silverlight on Windows Phone lets you add additional pages to an application and allow the user to navigate between them Before you write the code you should “storyboard” the application and forms 87
88. Adding another page You add another page as you would any other item to a project This creates the xaml and the C# code file 88
89. Pages and projects Pages that are added are stored in the same project as the main page They will be compiled and transferred into the target device automatically 89
90. Page Navigation privatevoid page2Button_Click(object sender,RoutedEventArgs e){NavigationService.Navigate(newUri("/PageTwo.xaml",UriKind.RelativeOrAbsolute));} The NavigationService object performs navigation for an application Each Silverlight page has a Uri The Navigate method takes the user to the specified page 90
91. The UriKind privatevoid page2Button_Click(object sender,RoutedEventArgs e){NavigationService.Navigate(newUri("/PageTwo.xaml",UriKind.RelativeOrAbsolute));} The address of a resource can be expressed absolutely, or relative to the location the program is running from RelativeOrAbsolute will work, but the navigation in this case is actually Relative 91
92. Missing page exceptions The uri to the destination page is a string of text It is not a binding to a particular software object If you spell the uri incorrectly the Silverlight will compile correctly and start running The program will throw an exception if an incorrect uri is used to locate a page 92
93. Using the Back button The Back button is used on the Windows Phone to move backwards through the UI This behaviour is built into Silverlight page navigation on the device If the user presses Back they are automatically taken to the previous Silverlight page If they press Back at the top level of the pages the program is ended 93
94. Overriding the Back button You often want to get control when a user tries to move off a page You might want to confirm a save at that point You can bind an event to the Back key pressed event which can do this 94
95. Disabling the Back Button privatevoidPhoneApplicationPage_BackKeyPress(object sender,System.ComponentModel.CancelEventArgse){e.Cancel = true;} The event handler for the back button can cancel the back event Binding the above method to the back button stops it from allowing navigation away from a page 95
96. Using a MessageBox privatevoidPhoneApplicationPage_BackKeyPress(object sender,System.ComponentModel.CancelEventArgse){if (MessageBox.Show("Do you really want to exit?","Page Exit", MessageBoxButton.OKCancel) != MessageBoxResult.OK) {e.Cancel = true; }} This code adds a confirmation message 96
98. Passing data between pages Each Silverlight page is a separate entity The code behind the page can hold data members but these are local to that page You often want to pass data from one page into another If the data is very simple you can just add it to the uri that is used to locate the page 98
99. Assembling a data uri privatevoid page3Button_Click(object sender,RoutedEventArgs e){NavigationService.Navigate(newUri("/PageThree.xaml?info=" + InfoTextBox.Text, UriKind.Relative));} This event handler adds a data item onto the uri that is passed into the destination page It reads text out of a textbox and appends that to the uri The data is labelled as info 99
100. Page navigated events If the destination page is to use the data in the uri there must be a way of running some code when a page is navigated to Silverlight provides methods to override in a page that give control when the page is navigated to and from We are going to use the OnNavigatedTo event 100
101. Loading data from the uri protectedoverridevoid OnNavigatedTo (System.Windows.Navigation.NavigationEventArgs e){ string info = "";if (NavigationContext.QueryString.TryGetValue("info",out info) ) infoTextBlockFromQuery.Text= info;} The NavigationContext object has a QueryStringproperty TryGetValue will search for a value in the uri and return true if it has found the value 101
103. Sharing objects between pages Each page in a program is a separate entity It has its own member data, but is not able to refer to any other When the program navigates to a page it does not provide a reference to the source page To share data amongst pages we have to use the App.xaml object 103
104. The App.xaml page This is the ‘container’ for the whole application It does not describe a page to be drawn, but it does hold methods that start the application running It also contains some event handlers 104
105. The App class publicpartialclassApp : Application{// To be used from all pages in the applicationpublicstringLoginName;} The App class for an application is an extension of the Application class provided by Silverlight We can add our own members to this new class Here I have added a string data member 105
106. Getting a reference to the App AppthisApp = App.CurrentasApp;LoginTextBox.Text = thisApp.LoginName; The Current property of the Application class provides a reference to the currently active application It is provided as a reference to an Application instance We need to convert this into a reference to the App class that contains the data 106
108. Review You can create multiple Silverlight pages and add them to your project Navigation to pages is performed on the basis of uri (Uniform Resource Indicator) values The back button normally navigates back to the source page, but this can be overridden The uri can contain simple text messages Pages can share larger objects in the App.xaml page 108
Open the project in Demo 01 Broken Data validation using Visual StudioSelect Debug>Run to run the program.Enter in the value2 in the top window and 3 in the lower one.Press the equals button to perform the calculation.Note that the value 5 is displayed.Enter the value fred in the top window.Press the equals button to perform the calculation.Note that the text fred turns red.Ask the class if the program is now perfect.Answer: It isn’t. The text in the top TextBox will stay red for ever.Show this by changing the text fred to 99Press the equals button to perform the calculation.The result should be displayed, but the text will remain red.Ask the class how to fix this.Answer: Need to add an else behaviour to set the colour back to normal when the parse works.Close the project and return to the presentation.
Open the project in Demo 02 Working Data validation using Visual StudioSelect Debug>Run to run the program.Enter in the valuetwo in the top window and two in the lower one.Press the equals button to perform the calculation.Note that the error is displayed and both boxes turn red.Change the top value to 2Press the equals button to perform the calculation.Note that the error is still displayed, but the top box is now back to the normal colour.Change the bottom value to 2Press the equals button to perform the calculation.Note that the error goes away, and the correct answer is displayed.Close Visual Studio and return to the presentation
Open the project in Demo 03 Number Keyboard input using Visual StudioSelect Debug>Run to run the program.Click in the top TextBox and note that the keyboard has numbers on it.Click in the bottom TextBox and note that the numbers remain on the keyboard.Open the file MainPage.xaml and look at the XAML for TextBox2. Note that it has the InputScope defined.Make the point that TextBox1 doesn’t have this. Ask the class how this can still work?Answer: The InputScope property for TextBox1 is set in the constructor in MainPage.xaml.csOpen MainPage.xaml.cs and show the property being set.Close Visual Studio and return to the presentation
Open the project in Demo 04 Background asset as content using Visual StudioSelect Debug>Run to run the program.Show that the background is displayed.Use Windows to navigate to the folder Demo 04 Background asset as content\\AddingMachine\\Bin\\DebugShow that the folder contains a file called AddingGears.jpgMake the point that this is the image. Show that the assembly AddingMachine.dll is only around 14KLeave this folder openStop the programClose Visual StudioReturn to the presentation
Open the project in Demo 05 Background asset as resource using Visual StudioSelect Debug>Run to run the program.Show that the background is displayed.Use Windows to navigate to the folder Demo 05 Background asset as resource\\AddingMachine\\Bin\\DebugShow that the folder does not contain a file called AddingGears.jpgShow that the assembly AddingMachine.dll is now over 300K, since it now contains the image.Compare this folder with the one for Demo 04Stop the programClose Visual StudioReturn to the presentation
Open the project in Demo 01 AddingMachine with no button using Visual StudioSelect Debug>Run to run the program.Enter in the value2 in the top window and 3 in the lower one.Note that the value is displayed as the numbers are entered, and that there is no need to press the Equals buttonClose the project and return to the presentation.
Open the project in Demo 02 AddingMachine with data binding using Visual StudioEnsure the target device is set to Windows Phone EmulatorSelectDebug>Start Debugging to start the program running.Use Solution Explorer to open the file Adder.csPut a breakpoint on the statement in the set behaviour for TopValue:topValue = value;In the Windows Phone Emulator click in the top number TextBox and type the number 45 into itClick the background on the emulator to navigate away from the TextBox.The program will now hit the breakpoint that is in the AddingMachine class.Explain that this is because we have a Two Way binding with the control and this property. When the value changes the set method for our property is called.Rest the cursor over the value in the method to show that 45 is being supplied to the property.Press F10 or the Step Over button to step to the line:if (PropertyChanged != null)Ask the class if this condition is true or false?Answer: It will be true, as a Silverlight component has registered an interest in this class.Press F10 or the Step Over button to step into the conditional code.The execution should now be at the statement:PropertyChanged(this, new PropertyChangedEventArgs("AnswerValue"));Add another breakpoint to the statement in the getbehaviour for AnswerValue:return topValue + bottomValue;Press F10 or the Step Over button to step over the PropertyChanged code.This should cause the breakpoint in the get behaviour to fire.Ask why.Answer: The Silverlight elements that are bound to the PropertyChanged event have been told that the AnswerValue has changed.They are therefore going and getting a new version of the answer.Press F5 to allow the program to run on. Return to the emulator and show that the display has been updated.Clear the breakpoints (for next time)Close the project and return to the presentation.
Open the project in Demo 01 MultipageDemousingVisual StudioSelect Debug>Run to run the program.Press the Page 2 button and navigate to page 2.Press the Back button on the phone to return to the main page.Press the Page 3 button and navigate to page 3.Press the Back button and note how the confirmation message box appears.Stop the program.Close the project and return to the presentation.
Open the project in Demo 02 Data passing using Visual StudioSelect Debug>Run to run the program.Enter some text into the textboxPress the Page 3 button and navigate to page 3.Note that the text on the page is the same as that entered into the textbox.Stop the program.Close the project and return to the presentation.
Open the project in Demo 03 Shared Data using Visual StudioSelect Debug>Run to run the program.Enter some text into the textboxPress the Sub Page button and navigate to the second page.Show that the text has been copied over.Open the file MainPage.xaml.cs. Show that the class uses the OnNavigatedFrom event to copy the information into the application.Open the file SubPage.xaml.cs.Show the OnNavigatedToevent which loads the data.Stop the program.Close the project and return to the presentation.