WP7 HUB_Diseño del interfaz con Silverlight

User Interface Design with Silverlight

Topics Manipulating Silverlight element properties Editing the XAML for Silverlight elements Using the MessageBox class Adding and using assets Assets as Content and Resources

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

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

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

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

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

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

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

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

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

Demo 1: Faulty Number Validation Demo 13

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

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

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

Demo 2: Working Number Validation Demo 17

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Demo 3: Setting InputScope Demo 36

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

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

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

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

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

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

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

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

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

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

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

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

Demo 4: A background as Content Demo 49

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

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

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

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

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

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

Demo 5: A background as a Resource Demo 56

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

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

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

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

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

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

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

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

Demo 1: Auto update AddingMachine Demo 66

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

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

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

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

Creating an object to bind to publicclassAdderClass{privateinttopValue;publicintTopValue {get { returntopValue; }set { topValue = value; }} // repeat for bottomValuepublicintAnswerValue {get { returntopValue + bottomValue;} }} 71

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

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

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

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

Demo 2: AddingMachine with data binding Demo 76

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

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

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

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

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

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

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

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

Topics Creating multi-page applications Navigating between pages Using the Back button Passing data between pages Page navigation events Sharing data in an application

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

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

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

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

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

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

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

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

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

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

Demo 1: Multi-page navigation Demo 97

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

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

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

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

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

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

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

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

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

Exercise 1: Adding error handling

Exercise 2: Improvingtheuser interface

WP7 HUB_Diseño del interfaz con Silverlight

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (7)

Similar to WP7 HUB_Diseño del interfaz con Silverlight

Similar to WP7 HUB_Diseño del interfaz con Silverlight (20)

More from MICTT Palma

More from MICTT Palma (20)

Recently uploaded

Recently uploaded (20)

WP7 HUB_Diseño del interfaz con Silverlight

Editor's Notes