Introduction to Silverlight<br />
Programdesignwith Silverlight<br />
Silverlight 4<br />Business Applications<br />Media<br />Beyond the Browser<br />Silverlight 1<br />Silverlight 2<br />Sil...
Programming and Design<br />Software and Design<br />It is a sad fact that most programmers are not very good at graphic d...
Programming and Design<br />Separation of tasks<br />One way to get good looking programs is to separate the graphical des...
Programming and Design<br />Tools for the job : Graphical Design<br />A Silverlight designer can use the “Expression Blend...
Programming and Design<br />Tools for the job : Code Creation<br />A Developer can take the user interface design and use ...
Programming and Design<br />The Metro design style<br />The Windows Phone team have taken a lot of trouble over the look a...
Programming and Design<br />Design Style and programming<br />As programmers we probably start of just worrying about maki...
Programming and Design<br />Silverlight and Metro<br />To make life easier for us the Metro style is “baked in” to the Win...
Programming and Design<br />Silverlight and Us<br />We are going to use the Silverlight designer in Visual Studio <br />Th...
Programming and Design<br />Software Objects<br />In this study of C# we will see that we can create software objects to r...
Programming and Design<br />Software Objects<br />public classAccount{private decimal balance ;private string name ;public...
Programming and Design<br />Data members<br />public classAccount{private decimal balance ;private string name ;public str...
Programming and Design<br />Data members<br />public classAccount{private decimal balance ;private string name ;public str...
Programming and Design<br />UsingtheAccountclass<br />The bank program can create instances of the account class and use t...
Programming and Design<br />ObjectsOrientedDesign<br />Object Oriented Design is a great way to manage complex projects<br...
Programming and Design<br />The Silverlight Adding Machine<br />This is a very simple calculator<br />All it can do is add...
Programming and Design<br />Silverlight and Objects<br />Silverlight is implemented using objects to represent the element...
Silverlight displayelements<br />Application title<br />Page title<br />First number<br />Plus text<br />Second number<br ...
Displayelement data<br />Each of the elements contains data elements that define how it appears on the screen<br />Positio...
Typespfelement<br />The adding machine actually contains three different types of Silverlight display element<br />TextBox...
ClassHierarchies and Silverlight<br />The elements will have some properties in common<br />All will have a position on th...
Silverlight elementclasshierarchy<br />The Silverlight class hierarchy is quite complex<br />Everything is based on the Fr...
ClassHierarchies<br />Using a class hierarchy for Silverlight elements has many advantages<br />A particular set of elemen...
Silverlight and Code<br />This means that to update the items on a display our program will be calling methods or updating...
Silverlight and Design<br />When we design a user interface we set values to give the elements position and size<br />We d...
The Toolbox and Designer<br />Visual Studio provides a menu of Silverlight elements that can be placed on the display page...
Demo<br />Demo 1: Adding display elements<br />
Silverlight elementnames<br />When you drag an element onto the page Visual Studio creates a new variable in your program<...
Settingthename of anelement<br />The default name of an element is not useful<br />TextBox1, Button1 etc<br />We want to h...
Settinganelement<br />The name of an element is right at the top of the properties pane in Visual Studio<br />To display t...
Editingthename of anelement<br />You can simply type in the new name for your element here<br />Make sure that it is a val...
Demo<br />Demo 2: Display element names<br />
Silverlight element properties<br />We have seen that Visual Studio lets us manipulate the properties of the display eleme...
Properties in C#<br />A program is made up of classes<br />A class can contain data and behaviours<br />The data is held i...
Private and Public<br />Data in a class is usually made private<br />Methods are usually public<br />You call methods to m...
Managing Class Data<br />We might decide to create a class called Accountto store information in a bank<br />The Accountcl...
Bank accounts and data<br />Perhaps our bank needs to store the age of the account holder<br />Perhaps they are concerned ...
NameProperty<br />public class Account{    private int age;    /// rest of account here}<br />The age value  is a privatem...
Using Get and Set methods<br />publicclassAccount{privateint age;publicintGetAge()    {returnthis.age;   }publicvoidSetAge...
Managing the Age<br />CurrentAccounta = newAccount();<br />a.SetAge(21);<br />When we want to control the age property we ...
Get and Set Methods<br />Creating Get and Set methods is a standard programming pattern<br />Frequently they will perform ...
Using Properties<br />The C# language provides properties to make getting and setting data easier<br />They do not make th...
Age Property<br />publicclassAccount{privateintageValue;publicint Age    {set      {if ( (value > 8) && (value < 100) ) ag...
Property Keywords<br />The block of code after the get keyword is obeyed when the property is read by a program<br />It mu...
Using the Age Property<br />Account s = newAccount ();s.Age = 21;Console.WriteLine ( "Age is : " + s.Age );<br />When a pr...
Property validation<br />Account s = newAccount ();intnewAge = 150;s.Age = newAge;if (s.Age != newAge ) Console.WriteLine ...
Multiple properties for one value<br />publicintAgeInMonths{get   {returnthis.ageValue*12;   }}<br />This property only ha...
Properties and Silverlight<br />The items that we see in the properties Pane for an element are all C# properties<br />Whe...
Properties and Notification<br />The set method in a Silverlight property has to do a lot more than just update the stored...
Page Design with Silverlight<br />We can design all our pages by dragging items onto the page, giving them a name and then...
Review<br />Visual Studio provides a complete design tool for creating and managing user interfaces<br />A Silverlight dis...
Understanding XAML<br />
XAML and Silverlight<br />A Silverlight application is made up of pages that contain elements<br />These have properties t...
Expressing Silverlight Elements<br />The description of the elements in a Silverlight application is actually held in a te...
Why do we need XAML?<br />XAML allows us to separate the role of graphic designer and programmer<br />The designer should ...
XAML file content<br /><TextBox Height="72"HorizontalAlignment="Left" Margin="8,19,0,0" Name="firstNumberTextBox" Text="0"...
XAML in Visual Studio<br />The XAML file holds the information which is updated by both views<br />59<br />
The XAML language<br />XAML is a “declarative” language<br />It just tells us about things, it does not tell us what they ...
Using XAML<br />You can actually edit the XAML text in your project to create new display elements and modify existing one...
Demo 1: Editing XAML<br />Demo<br />62<br />
The XAML file at run time<br />When a Silverlight program runs the XAML file is compiled into a set of low level display i...
XAML and XML<br />XAML looks a bit like XML<br />XML means “Extensible Markup Language”<br />This means that XML is really...
Inventing our own XML <br /><?xml version="1.0" encoding="us-ascii" ?><br /><HighScoreRecordscount="2"><br /><HighScore ga...
HighScore element<br /><HighScore game="Breakout"><br /><playername>username</playername><br /><score>1500</score><br /></...
HighScoreRecords element<br /><?xml version="1.0" encoding="us-ascii" ?><br /><HighScoreRecordscount="2"><br /><HighScore ...
XML and data structures<br />We can invent our own language format whenever we have some structured data that we want to s...
The XAML data revisited<br /><TextBox Height="72"HorizontalAlignment="Left" Margin="8,19,0,0" Name="firstNumberTextBox" Te...
What is a Markup Language?<br />The “ML” in XML stands for “Markup Language”<br />A markup language was originally a set o...
XML and HTML<br />The idea of creating your own markup language was such a good  one that people wanted a standard form fo...
XML Schema<br />An XML schema describes a particular XML document format:<br />“A HighScore element must contain a PlayerN...
XML and software<br />XML allows programs to share data irrespective of what kind of system was used to create the  data<b...
XAML and Silverlight Pages<br />A Silverlight application is made up of a number of pages<br />Each page is expressed as a...
Review<br />The design of a Silverlight page is expressed as a XAML document stored as text file <br />The separation of t...
Creatinganapplicationwithsilverlight<br />
Silverlight and C#<br />Up until now all we have done is create XAML designs for our application<br />We have used the edi...
The Visual Studio Solution Explorer<br />The Solution Explorer is another pane in Visual Studio<br />It shows all the elem...
The MainPage.xaml file<br />The MainPage.xaml file contains the XAML that describes how the main page looks<br />If you ad...
The code behind a xaml page<br />Each xaml page has a file of C# behind it<br />We can find this by opening up the xaml fi...
XAML file content<br />namespaceAddingMachine{publicpartialclassMainPage : PhoneApplicationPage    {// ConstructorpublicMa...
MainPage class<br />namespaceAddingMachine{publicpartialclassMainPage : PhoneApplicationPage    {// ConstructorpublicMainP...
MainPage constructor<br />namespaceAddingMachine{publicpartialclassMainPage : PhoneApplicationPage    {// Constructorpubli...
Initialise Components<br />namespaceAddingMachine{publicpartialclassMainPage : PhoneApplicationPage    {// Constructorpubl...
Demo 1: Code Behind<br />Demo<br />85<br />
Health Warning<br />We have just had a quick look in the “engine room” of Silverlight<br />This is somewhere you should ne...
Running our application<br />We can run our application if we like<br />We can type in values and press the equals button<...
calculateResult method<br />privatevoidcalculateResult()<br />{<br />float v1 = float.Parse(firstNumberTextBox.Text);<br /...
Obtaining values<br />privatevoidcalculateResult()<br />{<br />float v1 = float.Parse(firstNumberTextBox.Text);<br />float...
Calculating a result<br />privatevoidcalculateResult()<br />{<br />float v1 = float.Parse(firstNumberTextBox.Text);<br />f...
Displaying the result<br />privatevoidcalculateResult()<br />{<br />float v1 = float.Parse(firstNumberTextBox.Text);<br />...
Silverlight elements and properties<br />The method works because the Silverlight elements expose properties that the prog...
Getting the result<br />Now all we need is to run the calculateResult method when the Equals button is pressed<br />To do ...
Programs and events<br />For events to work a program must have a way of managing an event as a data object<br />We need t...
Events in Visual Studio<br />We can ask Visual Studio to create an event delegate for us by double clicking on the element...
The Event Handler Method<br />When we have double clicked the button we find that there is now a new method in the MainPag...
Displaying the result<br />privatevoidequalsButton_Click(objectsender, RoutedEventArgs e){calculateResult();}<br />Visual ...
Demo 2: A Complete Solution<br />Demo<br />98<br />
Managing Events<br />The properties of a Silverlight element include information about the events and what methods they ar...
Events and XAML<br /><Button Content="equals" Height="72"HorizontalAlignment="Left" Margin="158,275,0,0" Name="equalsButto...
Review<br />Behind each XAML file is a C# source file that contains the behaviour for that page<br />You add your own beha...
Exercise 1: Time Trackeruser interface design<br />
Exercise 2: time record xmlDesign<br />
Upcoming SlideShare
Loading in...5
×

WP7 HUB_Introducción a Silverlight

619

Published on

Fase 2.2

Published in: Education, Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
619
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
9
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • Start Visual StudioOpen the AddingMachine project we created earlier.Open MainPage.XAML from the Solution Explorer if it is not already visible.Click on the top TextBox in the editing surface. This should cause the firstNumberTextBox to be selected in the MainPage.XAML file and the Properties pane to change to the details for firstNumberTextBox.Click in the MainPage.XAML file and move the cursor to the Height=&quot;72&quot; property for this textbox. Change the value to 100. Tell the class to watch what happens in the designer. The textbox will change in height. Move to the Property pane and open the Layout item. This should now have the value 100. Type 72 into the layout information and show how the TextBox returns to its original height and the text in the XAML file returns to 72.Leave Visual Studio running and return to the presentation.
  • Start Visual StudioOpen the AddingMachine project we created earlier.Find MainPage.xaml in the Solution Explorer.Click to open it up and see the file MainPage.xaml.csDouble click this file to open it.Show the constructor method.Right click the name InitializeComponent in the method.Select “Go to definition” from the context menu.Show the code that creates the new instance of the objects on the screen.Make the point that the code we are seeing now was created by Visual Studio from the XAML.Run the program and note that all the buttons appear.Ask the class what would happen if you commented out the call of InitializeComponent.Comment out the method and run it again.The screen should be displayed as blank. Remove the comment and run the program again to show that we can get our components back.
  • Return to the AddingMachine projectShow that the MainPage.xaml.cs file just contains one method at the moment.Double click the button and note that we now have an event handler.Add the calculateResult method:private void calculateResult(){ float v1 = float.Parse(firstNumberTextBox.Text); float v2 = float.Parse(secondNumberTextBox.Text); float result = v1 + v2;resultTextBlock.Text = result.ToString();}Put a call of calculateResult in the event handler.Run the program and note that we can now do sums.Ask the class what would happen if we typed “Twenty five” into one of the text boxes.Run the program and note that an exception is thrown by the Parse method.Ask the class how they would fix this:Need an exception handler to capture the Parse exception. Or could use the TryParse method instead and test the result.When an error occurs we can tell the user Suggest a message box but I prefer turning the offending box red as this indicates there is an error without the user having to acknowledge the error by pressing any more buttons.
  • WP7 HUB_Introducción a Silverlight

    1. 1. Introduction to Silverlight<br />
    2. 2. Programdesignwith Silverlight<br />
    3. 3. Silverlight 4<br />Business Applications<br />Media<br />Beyond the Browser<br />Silverlight 1<br />Silverlight 2<br />Silverlight 3<br />Silverlight 4<br />September 2007<br />October 2008<br />July 2009<br />April 2010<br />
    4. 4. Programming and Design<br />Software and Design<br />It is a sad fact that most programmers are not very good at graphic design<br />Although some are (lucky people)<br />Also, most designers do not program much<br />
    5. 5. Programming and Design<br />Separation of tasks<br />One way to get good looking programs is to separate the graphical design aspects from the programming<br />The designer can work on the look and feel of the application<br />The programmer can implement the required behaviours<br />Silverlight supports this way of working<br />
    6. 6. Programming and Design<br />Tools for the job : Graphical Design<br />A Silverlight designer can use the “Expression Blend” to specify the appearance of the user interface<br />A version of Blend for the phone is supplied as part of the phone SDK<br />
    7. 7. Programming and Design<br />Tools for the job : Code Creation<br />A Developer can take the user interface design and use Visual Studio build the program to make it work<br />Windows Phone developers use Visual Studio<br />
    8. 8. Programming and Design<br />The Metro design style<br />The Windows Phone team have taken a lot of trouble over the look and feel of the phone<br />They have created a design style, “Metro” to express this<br />Programs on the phone should reflect this style <br />
    9. 9. Programming and Design<br />Design Style and programming<br />As programmers we probably start of just worrying about making the program work<br />This is a very good place to start<br />But in modern systems the “look and feel” of the user interface is very important<br />No matter how good the code is, if the program is hard to use it will not be popular<br />You should pay careful attention to user interface issues when making your programs<br />
    10. 10. Programming and Design<br />Silverlight and Metro<br />To make life easier for us the Metro style is “baked in” to the Windows developer tools<br />The default appearance, behaviour and fonts of the user elements all match the style<br />If you want to find out more about Metro you can read the style guidelines for it<br />
    11. 11. Programming and Design<br />Silverlight and Us<br />We are going to use the Silverlight designer in Visual Studio <br />This can be used to create a good quality user interface that adheres to the Metro principles<br />If you know any Graphic Designers it is worth getting them on your development team when you make a Marketplace application<br />They can make your programs much more impressive<br />
    12. 12. Programming and Design<br />Software Objects<br />In this study of C# we will see that we can create software objects to represent things <br />We talk to our customer to establish their requirements and then identify elements that our software will manipulate<br />We then create software classes which contain the data and behaviours<br />For example, if we were creating a bank application..<br />
    13. 13. Programming and Design<br />Software Objects<br />public classAccount{private decimal balance ;private string name ;public stringGetName () {return name; }public boolSetName (stringnewName){ {// Final version will validate the namename = newName; return true; }// Other get and set methods here}<br />
    14. 14. Programming and Design<br />Data members<br />public classAccount{private decimal balance ;private string name ;public stringGetName () {return name; }public boolSetName (stringnewName){ {// Final version will validate the namename = newName; return true; }// Other get and set methods here}<br />This is the data our bank account will hold:<br />The name of the holder and the balance<br />
    15. 15. Programming and Design<br />Data members<br />public classAccount{private decimal balance ;private string name ;public stringGetName () {return name; }public boolSetName (stringnewName){ {// Final version will validate the namename = newName; return true; }// Other get and set methods here}<br />These are the behaviours the account provides<br />
    16. 16. Programming and Design<br />UsingtheAccountclass<br />The bank program can create instances of the account class and use them to hold customer information<br />Each instance of an account represents a particular customer<br />The bank software calls methods in the Account class to work with the data in it<br />Account rob = new Account();rob.SetName("Rob");<br />
    17. 17. Programming and Design<br />ObjectsOrientedDesign<br />Object Oriented Design is a great way to manage complex projects<br />It lets you break the solution down into manageable chunks<br />It allows you to put off detailed implementation of the elements until you know what they need to do<br />It allows you to test objects separately before they are incorporated into the product <br />
    18. 18. Programming and Design<br />The Silverlight Adding Machine<br />This is a very simple calculator<br />All it can do is add two numbers<br />The user types the numbers into the text boxes and presses the equals button<br />The answer is displayed at the bottom of the screen<br />
    19. 19. Programming and Design<br />Silverlight and Objects<br />Silverlight is implemented using objects to represent the elements on a User Interface<br />Each of the items on the screen of the application shown is graphical rendering of a software object <br />
    20. 20. Silverlight displayelements<br />Application title<br />Page title<br />First number<br />Plus text<br />Second number<br />Equals button<br />Result text<br />
    21. 21. Displayelement data<br />Each of the elements contains data elements that define how it appears on the screen<br />Position on the screen<br />Height and width<br />Font colour and size etc..<br />These values are used by Silverlight when the display is drawn<br />If these value are changed by the program the appearance of the element will change<br />
    22. 22. Typespfelement<br />The adding machine actually contains three different types of Silverlight display element<br />TextBox<br />Used to receive user input from the keyboard<br />TextBlock<br />Used to display messages to the user<br />Button<br />Used to cause events in the application <br />
    23. 23. ClassHierarchies and Silverlight<br />The elements will have some properties in common<br />All will have a position on the screen and a height and width<br />But there will be some properties that are specific to that element<br />Only a TextBox needs to track the cursor position for user input<br />A class hierarchy is a great way to implement this<br />
    24. 24. Silverlight elementclasshierarchy<br />The Silverlight class hierarchy is quite complex<br />Everything is based on the FrameworkElement class which contains the fundamental properties of all elements<br />There are many other classes<br />
    25. 25. ClassHierarchies<br />Using a class hierarchy for Silverlight elements has many advantages<br />A particular set of element data only needs to be stored once, at the appropriate position in the hierarchy <br />The display drawing system can treat them all display elements in exactly the same way<br />We can add new Silverlight elements that extend the behaviour of existing ones<br />
    26. 26. Silverlight and Code<br />This means that to update the items on a display our program will be calling methods or updating properties on the appropriate software object<br />The next time that object is drawn the Silverlight rendering system will use the new data values and the appearance of the object will change to match<br />
    27. 27. Silverlight and Design<br />When we design a user interface we set values to give the elements position and size<br />We do not do this from a program that we write (although we could) <br />Instead we are going to use the design tools in Visual Studio to set up the elements<br />We are going to start by using the element toolbox and the design surface<br />
    28. 28. The Toolbox and Designer<br />Visual Studio provides a menu of Silverlight elements that can be placed on the display page<br />You can do this by simply dragging the elements from the toolbox onto the page<br />
    29. 29. Demo<br />Demo 1: Adding display elements<br />
    30. 30. Silverlight elementnames<br />When you drag an element onto the page Visual Studio creates a new variable in your program<br />These are declared in a special area of the project that Visual Studio looks after for you<br />And you should not fiddle with this or bad things will happen<br />However, you should always make sure that your variables have sensible names<br />
    31. 31. Settingthename of anelement<br />The default name of an element is not useful<br />TextBox1, Button1 etc<br />We want to have more meaningful names<br />firstsNumberTextbox, EqualsButtonetc<br />We can use the Properties window in Visual Studio to update the name of an element in our program<br />
    32. 32. Settinganelement<br />The name of an element is right at the top of the properties pane in Visual Studio<br />To display the properties pane for an object, click on the object in the design surface<br />The pane will usually be located at the bottom right of the Visual Studio display<br />
    33. 33. Editingthename of anelement<br />You can simply type in the new name for your element here<br />Make sure that it is a valid C# variable name, or Visual Studio will complain <br />When you navigate away from this textbox the name will change<br />
    34. 34. Demo<br />Demo 2: Display element names<br />
    35. 35. Silverlight element properties<br />We have seen that Visual Studio lets us manipulate the properties of the display elements<br />We can drag them around the display page<br />We can set values using the property pane<br />Now we are going to consider how the properties actually from the perspective of C#<br />To do this we have to revisit what properties are in C# classes<br />35<br />
    36. 36. Properties in C#<br />A program is made up of classes<br />A class can contain data and behaviours<br />The data is held in member variables<br />The behaviours are provided by member methods<br />When you design an application you decide what classes are required and the data and behaviours they have<br />
    37. 37. Private and Public<br />Data in a class is usually made private<br />Methods are usually public<br />You call methods to make changes to the data inside the class<br />This means that all changes to data in the class is controlled<br />Programmers love having control........<br />
    38. 38. Managing Class Data<br />We might decide to create a class called Accountto store information in a bank<br />The Accountclass will have lots of data items that are stored about each customer<br />Each of these items will map onto a data member of the class<br />The programmer must then provide methods to get and set the values of the items<br />
    39. 39. Bank accounts and data<br />Perhaps our bank needs to store the age of the account holder<br />Perhaps they are concerned about allowing very young people to draw out too much cash<br />This information must be stored in the account<br />It will be a data member within it<br />
    40. 40. NameProperty<br />public class Account{ private int age; /// rest of account here}<br />The age value is a privatemember of the Accountclass<br />To work with the age value we have to provide methods that are public<br />
    41. 41. Using Get and Set methods<br />publicclassAccount{privateint age;publicintGetAge() {returnthis.age; }publicvoidSetAge( intinAge ) {if ( (inAge > 0) && (inAge < 120) ) {this.age = inAge; } }}<br />
    42. 42. Managing the Age<br />CurrentAccounta = newAccount();<br />a.SetAge(21);<br />When we want to control the age property we can call the SetAge method<br />We can use the GetAge method to read the age of the account holder<br />
    43. 43. Get and Set Methods<br />Creating Get and Set methods is a standard programming pattern<br />Frequently they will perform validation of incoming data and reject out of range values <br />I have not added any validation to the set method yet<br />Nobody with an age less than 8 or greater than 100 can have an account<br />
    44. 44. Using Properties<br />The C# language provides properties to make getting and setting data easier<br />They do not make things possible that we couldn’t do before<br />They must make the programs easier to write<br />Properties are used extensively in Silverlight for display elements<br />
    45. 45. Age Property<br />publicclassAccount{privateintageValue;publicint Age {set {if ( (value > 8) && (value < 100) ) ageValue= value; }get {returnageValue; } }}<br />
    46. 46. Property Keywords<br />The block of code after the get keyword is obeyed when the property is read by a program<br />It must return a value of the property type<br />The block of code after the set keyword is obeyed when the property is written<br />Within the set block the keyword value means “The value being assigned to the property”<br />
    47. 47. Using the Age Property<br />Account s = newAccount ();s.Age = 21;Console.WriteLine ( "Age is : " + s.Age );<br />When a program uses a property it looks just like direct access to a data member<br />The difference is that the get or set behaviours are used the blocks of code in the property are used<br />This makes the code much tidier<br />
    48. 48. Property validation<br />Account s = newAccount ();intnewAge = 150;s.Age = newAge;if (s.Age != newAge ) Console.WriteLine ( "Age was not set" );<br />If the property uses validation it I up to the user of the property to make sure that an assignment worked correctly<br />
    49. 49. Multiple properties for one value<br />publicintAgeInMonths{get {returnthis.ageValue*12; }}<br />This property only has a get method<br />It provides a way of reading the age in months<br />
    50. 50. Properties and Silverlight<br />The items that we see in the properties Pane for an element are all C# properties<br />When an assigning to an element property a program runs code inside a C# set behavior<br />This might seem inefficient<br />Accessing the data directly would be quicker<br />But it is actually a necessary part of how Silverlight runs <br />50<br />
    51. 51. Properties and Notification<br />The set method in a Silverlight property has to do a lot more than just update the stored data<br />This action will also trigger a display update for the screen<br />Setting a property in a program also sends a notification to the program that the property is being changed<br />This idea of using property changes to trigger events is one we will return to <br />51<br />
    52. 52. Page Design with Silverlight<br />We can design all our pages by dragging items onto the page, giving them a name and then setting their properties<br />Visual Studio will create all the code behind the program to make this work<br />You can set many properties of element s including colour, texture, transparency and even animation<br />But this is best left to Graphic Designers<br />52<br />
    53. 53. Review<br />Visual Studio provides a complete design tool for creating and managing user interfaces<br />A Silverlight display is made up of elements<br />Each element is implemented by a C# class which is part of the element hierarchy<br />Silverlight elements expose properties which allow programs (and Visual Studio) to determine their location and appearance on the display page<br />53<br />
    54. 54. Understanding XAML<br />
    55. 55. XAML and Silverlight<br />A Silverlight application is made up of pages that contain elements<br />These have properties that determine where they are, how they appear and what they can do in an application<br />The Visual Studio tool allows us to manipulate the page content by using the design surface and the element properties pane<br />55<br />
    56. 56. Expressing Silverlight Elements<br />The description of the elements in a Silverlight application is actually held in a text file<br />This file is formatted in a particular way<br />Microsoft invented a language, XAML to hold this design information:<br />eXtensibleApplication Markup Language<br />XAML was invented to hold user interface design information <br />56<br />
    57. 57. Why do we need XAML?<br />XAML allows us to separate the role of graphic designer and programmer<br />The designer should not have to see code objects to work<br />The programmer should not be held back while the design is produced <br />The XMAL file provides a separation between the code that drives the application and the way the application looks<br />57<br />
    58. 58. XAML file content<br /><TextBox Height="72"HorizontalAlignment="Left" Margin="8,19,0,0" Name="firstNumberTextBox" Text="0"VerticalAlignment="Top" Width="460"TextAlignment="Center" /><br />This snippet of XAML is the description of the firstNumberTextBox in our adding machine<br />It contains fields that describe the position and size of the textbox<br />This file is managed by Visual Studio as your program is being developed<br />58<br />
    59. 59. XAML in Visual Studio<br />The XAML file holds the information which is updated by both views<br />59<br />
    60. 60. The XAML language<br />XAML is a “declarative” language<br />It just tells us about things, it does not tell us what they do and how they can do it<br />The XAML file has a particular format<br />The characters < and > are used to mark the start and end of some elements in the file<br />The format looks a bit like XML<br />eXtensible Markup Language<br />60<br />
    61. 61. Using XAML<br />You can actually edit the XAML text in your project to create new display elements and modify existing ones<br />This can often be much quicker than using the editing interface provided by Visual Studio<br />You just have to type the new values into the XAML window and the properties of the element are changed immediately<br />61<br />
    62. 62. Demo 1: Editing XAML<br />Demo<br />62<br />
    63. 63. The XAML file at run time<br />When a Silverlight program runs the XAML file is compiled into a set of low level display instructions that are obeyed by the Silverlight runtime system<br />This is the point at which the XAML object descriptions in the text are converted into program objects we can use in our code<br />This all happens automatically as far as we are concerned<br />63<br />
    64. 64. XAML and XML<br />XAML looks a bit like XML<br />XML means “Extensible Markup Language”<br />This means that XML is really a way of designing languages that want to talk about something<br />Just like the english language lets us invent verbs and nouns and put them into sentences that have meaning in a particular context<br />64<br />
    65. 65. Inventing our own XML <br /><?xml version="1.0" encoding="us-ascii" ?><br /><HighScoreRecordscount="2"><br /><HighScore game="Breakout"><br /><playername>Rob Miles</playername><br /><score>1500</score><br /></HighScore><br /><HighScore game="Space Invaders"><br /><playername>Username</playername><br /><score>4500</score><br /></HighScore><br /></HighScoreRecords><br />This XML format to hold a video game high score table<br />65<br />
    66. 66. HighScore element<br /><HighScore game="Breakout"><br /><playername>username</playername><br /><score>1500</score><br /></HighScore><br />The HighScore element contains two other elements, playername and score<br />It also has a property that gives the name of the game<br />We could add others, for example the date and time the score was achieved<br />66<br />
    67. 67. HighScoreRecords element<br /><?xml version="1.0" encoding="us-ascii" ?><br /><HighScoreRecordscount="2"><br /><HighScore game="Breakout"><br /><playername>username</playername><br /><score>1500</score><br /></HighScore><br /><HighScore game="Space Invaders"><br /><playername>username</playername><br /><score>4500</score><br /></HighScore><br /></HighScoreRecords><br />The HighScoreRecords element contains a count of the number of HighScore elements<br />67<br />
    68. 68. XML and data structures<br />We can invent our own language format whenever we have some structured data that we want to store<br />The designers of XAML have done this<br />They have created a language that lets us design user interfaces<br />68<br />
    69. 69. The XAML data revisited<br /><TextBox Height="72"HorizontalAlignment="Left" Margin="8,19,0,0" Name="firstNumberTextBox" Text="0"VerticalAlignment="Top" Width="460"TextAlignment="Center" /><br />We can see that the XAML content that describes a textbox is very similar to a HighScore element<br />The designers of XAML had to work out what data fields are required in a TextBox object<br />69<br />
    70. 70. What is a Markup Language?<br />The “ML” in XML stands for “Markup Language”<br />A markup language was originally a set of commands for the printers of a document<br />‘Put the words “Table of Contents” in bold’<br />When the World Wide Web was created the Hyper Text Markup Language was designed to allow a text file to describe a particular web page design<br />70<br />
    71. 71. XML and HTML<br />The idea of creating your own markup language was such a good one that people wanted a standard form for doing this<br />XML came out of this drive for standards<br />It is the way in which the files use the < and /> and other characters to mean the start and end of elements, names and properties<br />It also tells you how to create “schemas” that define the structure and content of XML documents<br />71<br />
    72. 72. XML Schema<br />An XML schema describes a particular XML document format:<br />“A HighScore element must contain a PlayerName and a Score value, but the Date value is optional”<br />Programs can use a schema to make sure that a particular document contains content which is valid<br />72<br />
    73. 73. XML and software<br />XML allows programs to share data irrespective of what kind of system was used to create the data<br />There are many software tools that can create schemas and you can even store the contents of C# directly into XML structured files<br />However, for now just remember that the description of a Silverlight page is a text file containing an XAML document <br />73<br />
    74. 74. XAML and Silverlight Pages<br />A Silverlight application is made up of a number of pages<br />Each page is expressed as a single XAML source file<br />The page will contain descriptions of a number of Silverlight elements <br />From time to time we will have to make changes to the XMAL file directly<br />74<br />
    75. 75. Review<br />The design of a Silverlight page is expressed as a XAML document stored as text file <br />The separation of the design from the program code makes it much easier for designers and programmers to work together<br />The format of a XAML document is based on XML (an eXtensible Markup Language) <br />XML allows us to create languages that describe any kind of structured data<br />75<br />
    76. 76. Creatinganapplicationwithsilverlight<br />
    77. 77. Silverlight and C#<br />Up until now all we have done is create XAML designs for our application<br />We have used the editing surface and the properties pane, along with a text editor<br />Now we are going to see where the program content lives<br />This code will provide the active content for our calculator<br />This will work out the result <br />77<br />
    78. 78. The Visual Studio Solution Explorer<br />The Solution Explorer is another pane in Visual Studio<br />It shows all the elements in a particular solution<br />This includes all the application resources and XAML files <br />78<br />
    79. 79. The MainPage.xaml file<br />The MainPage.xaml file contains the XAML that describes how the main page looks<br />If you add further pages to the application they will appear as xaml pages in the solution<br />79<br />
    80. 80. The code behind a xaml page<br />Each xaml page has a file of C# behind it<br />We can find this by opening up the xaml file as shown in Solution Explorer<br />80<br />
    81. 81. XAML file content<br />namespaceAddingMachine{publicpartialclassMainPage : PhoneApplicationPage {// ConstructorpublicMainPage() {InitializeComponent(); } }}<br />This is all the actual code behind our adding machine main page<br />81<br />
    82. 82. MainPage class<br />namespaceAddingMachine{publicpartialclassMainPage : PhoneApplicationPage {// ConstructorpublicMainPage() {InitializeComponent(); } }}<br />This code is in a class called MainPage which extends the PhoneApplicationPage class<br />82<br />
    83. 83. MainPage constructor<br />namespaceAddingMachine{publicpartialclassMainPage : PhoneApplicationPage {// ConstructorpublicMainPage() {InitializeComponent(); } }}<br />The code just contains the constructor that is called when the page instance is loaded<br />83<br />
    84. 84. Initialise Components<br />namespaceAddingMachine{publicpartialclassMainPage : PhoneApplicationPage {// ConstructorpublicMainPage() {InitializeComponent(); } }}<br />The constructor calls a method that initialises all the components on the page<br />84<br />
    85. 85. Demo 1: Code Behind<br />Demo<br />85<br />
    86. 86. Health Warning<br />We have just had a quick look in the “engine room” of Silverlight<br />This is somewhere you should never go<br />Do not make any changes to this code or Visual Studio may get very upset and you will almost certainly break your program<br />86<br />
    87. 87. Running our application<br />We can run our application if we like<br />We can type in values and press the equals button<br />But nothing happens<br />Next we need to make a method that will do the calculation and get it to run<br />87<br />
    88. 88. calculateResult method<br />privatevoidcalculateResult()<br />{<br />float v1 = float.Parse(firstNumberTextBox.Text);<br />float v2 = float.Parse(secondNumberTextBox.Text);<br />float result = v1 + v2;<br />resultTextBlock.Text = result.ToString();<br />}<br />This method will calculate the result and display it<br />If we call this the display will be updated<br />88<br />
    89. 89. Obtaining values<br />privatevoidcalculateResult()<br />{<br />float v1 = float.Parse(firstNumberTextBox.Text);<br />float v2 = float.Parse(secondNumberTextBox.Text);<br />float result = v1 + v2;<br />resultTextBlock.Text = result.ToString();<br />}<br />This line gets the text out of the firstNumberTextbox and parses it to produce a floating point value<br />89<br />
    90. 90. Calculating a result<br />privatevoidcalculateResult()<br />{<br />float v1 = float.Parse(firstNumberTextBox.Text);<br />float v2 = float.Parse(secondNumberTextBox.Text);<br />float result = v1 + v2;<br />resultTextBlock.Text = result.ToString();<br />}<br />This statement calculates the result we get by adding the values together<br />90<br />
    91. 91. Displaying the result<br />privatevoidcalculateResult()<br />{<br />float v1 = float.Parse(firstNumberTextBox.Text);<br />float v2 = float.Parse(secondNumberTextBox.Text);<br />float result = v1 + v2;<br />resultTextBlock.Text = result.ToString();<br />}<br />This statement gets a string version of the result value and puts it into the result texbox<br />91<br />
    92. 92. Silverlight elements and properties<br />The method works because the Silverlight elements expose properties that the program can read (to get the numbers typed in) and write (to display the required result)<br />Our program is able to work with the display elements because they are objects as far as we are concerned<br />The objects are created when the program starts<br />92<br />
    93. 93. Getting the result<br />Now all we need is to run the calculateResult method when the Equals button is pressed<br />To do this we have to connect an event generator (the button) with the method that will run when the button produces an event<br />The event is generated when the user presses the equals button<br />93<br />
    94. 94. Programs and events<br />For events to work a program must have a way of managing an event as a data object<br />We need to be able to give the button an object that represents a method to be called when the event occurs<br />C# provides a delegate mechanism that can create references to methods<br />Fortunately Silverlight and Visual Studio make this very easy to use<br />94<br />
    95. 95. Events in Visual Studio<br />We can ask Visual Studio to create an event delegate for us by double clicking on the element in the designer<br />Visual Studio will do all the “plumbing” to make this work<br />95<br />
    96. 96. The Event Handler Method<br />When we have double clicked the button we find that there is now a new method in the MainPage class<br />This will be called when the button is clicked in our program <br />96<br />
    97. 97. Displaying the result<br />privatevoidequalsButton_Click(objectsender, RoutedEventArgs e){calculateResult();}<br />Visual Studio has given this method a sensible name<br />This is based on the component name <br />We just need to add a call of calculateResult to get the program to work <br />97<br />
    98. 98. Demo 2: A Complete Solution<br />Demo<br />98<br />
    99. 99. Managing Events<br />The properties of a Silverlight element include information about the events and what methods they are bound to<br />You can see this by selecting Events in the Properties pane<br />99<br />
    100. 100. Events and XAML<br /><Button Content="equals" Height="72"HorizontalAlignment="Left" Margin="158,275,0,0" Name="equalsButton"VerticalAlignment="Top" Width="160" Click="equalsButton_Click" /><br />We know that everything in Silverlight begins and ends with the XAML<br />When we add an event binding in Visual Studio this adds a property to the XAML for that component<br />You can see it above<br />100<br />
    101. 101. Review<br />Behind each XAML file is a C# source file that contains the behaviour for that page<br />You add your own behaviours by putting methods into this code file<br />If you bind Silverlight events to elements the event handlers are also placed in this file<br />You connect these handlers to your code to produce a working application<br />
    102. 102. Exercise 1: Time Trackeruser interface design<br />
    103. 103. Exercise 2: time record xmlDesign<br />
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×