slide1
Download
Skip this Video
Download Presentation
Weather Viewer Application Introducing Microsoft Silverlight, XML, LINQ to XML and Web Services

Loading in 2 Seconds...

play fullscreen
1 / 81

Weather Viewer Application Introducing Microsoft Silverlight, XML, LINQ to XML and Web Services - PowerPoint PPT Presentation


  • 105 Views
  • Uploaded on

32. Weather Viewer Application Introducing Microsoft Silverlight, XML, LINQ to XML and Web Services. Outline. 32.1 Platform Overview 32.2 Silverlight 2 Runtime and Tools Installation 32.3 Test-Driving the Weather Viewer Application 32.4 Overviewing the Weather Viewer Application

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about ' Weather Viewer Application Introducing Microsoft Silverlight, XML, LINQ to XML and Web Services' - varuna


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
slide1
32
  • Weather ViewerApplication
  • Introducing Microsoft Silverlight, XML, LINQ to XML and Web Services
outline
Outline
  • 32.1 Platform Overview
  • 32.2 Silverlight 2 Runtime and Tools Installation
  • 32.3 Test-Driving the WeatherViewer Application
  • 32.4 Overviewing the WeatherViewer Application
  • 32.5 Creating the WeatherViewer Application
outline1
Outline
  • 32.6 Calling a Web Service and Using LINQ to XML to Process the Results
  • 32.7 Customizing the Data Presentation
  • 32.8 Creating a Customized Silverlight Control
  • 32.9 Final WeatherViewer Application Code
objectives
In this tutorial you will learn:

Use Silverlight to create a rich Internet application.

Create Silverlight user interfaces in XAML.

Use LINQ to XML to convert XML into a collection of Visual Basic objects.

Use XML Axis properties to manipulate XML content in Visual Basic.

Customize the appearance of existing Silverlight controls.

Create a custom Silverlight control.

Objectives
32 3 test driving the weather viewer application
32.3 Test-Driving the WeatherViewer Application
  • You have been asked to create a web-based application that allows the user to enter a zip code and displays the weather forecast for the corresponding United States city. To obtain the weather forecast, you must use a web service. The application should display the days of the week returned by the web service and the image that represents the weather for each day. The user should then be able to click the appropriate day to see the high and low temperatures for that day in both Fahrenheit and Celsius.
32 1 platform overview
32.1 Platform Overview
  • SilverlightTM is Microsoft’s platform for Rich Internet Applications
    • These applications that offer the responsiveness and rich GUI features of desktop applications.
  • Silverlight runs as a browser plug-in compatible with most browsers and operating systems.
  • The user interface is described in XAML and acode-behind file contains the program logic.
32 1 platform overview cont
32.1 Platform Overview (Cont.)

Silverlight 2’s .NET Platform Subset

  • Silverlight is a robust, cross-platform, cross-browser subset of the .NET platform.
  • Silverlight supports .NET collections, input/output, generics, multithreading, globalization, XML and LINQ.
  • Silverlight also includes APIs for interacting with other elements in a web page.
slide8

32.1 Platform Overview

Graphics and GUI Capabilities

  • Silverlight’s graphics are a subset of the WPF framework.
  • Figure 32.1 shows the default list of controls thatyou can use in Silverlight.

Figure 32.1|Default controls listed in the IDE’s Toolbox for Silverlight applications.

32 1 platform overview cont1
32.1 Platform Overview (Cont.)
  • Data Binding
    • Silverlight’s data-binding model makes it easy for you to display data from objects, collections, databases, and XML.
  • Networking
    • Silverlight’s networking support allows you to write browser-based applications that invoke web services and other networking technologies.
32 2 silverlight 2 runtime and tools installation
32.2 Silverlight 2 Runtime and Tools Installation
  • Download and install the following software:
    • Silverlight 2 Runtime
    • Silverlight Tools Beta 1 for Visual Studio 2008
  • Silverlight is not currently available for Visual Studio Express Edition.
test driving the weatherviewer application
Test-Driving the WeatherViewer Application
  • Run the completed Weather Viewerapplication(Fig. 32.2).

Note that the screen capturesin this tutorial were taken inInternet Explorer 8 beta, butthe application runs in anybrowser with the Silverlight 2 runtime installed

TextBox in which the userenters the zip code

Figure 32.2|Weather Viewer application before the user enters a zip code.

test driving the weatherviewer application cont
Test-Driving the WeatherViewer Application (Cont.)
  • Enter a US zip code in the TextBox (Fig. 32.3), then press the Get WeatherButton to obtain the weather forecast.

User selects a day to see the detailed forecast for that day

Figure 32.3|Displaying the weather forecast for the specified zip code.

test driving the weatherviewer application cont1
Test-Driving the WeatherViewer Application (Cont.)
  • Click one of the days in the forecast to see the complete details for that day (Fig. 32.4).

Customized control displaysthe detailed forecast andblocks the user from accessingthe rest of the GUI until theCloseButton is clicked

Figure 32.4| Complete weather details for the selected day.

32 4 overviewing the weather viewer application
32.4 Overviewing the Weather Viewer Application

When the user presses the Get Weather Button:

Obtain the US zip code from the Zip Code… TextBox

Use a WebClient object to invoke the WeatherForecast web service fromw www.webservicex.net

When the response data is received from the web service:

Convert the XML weather forecast into WeatherData objects

Use data binding to display the Weather Data objects in a ListBox

32 4 overviewing the weather viewer application cont
32.4 Overviewing the Weather Viewer Application (Cont.)

When the user selects a particular day in the weather forecast:

Display the complete details of the forecast for that day

When the user clicks the Close Button in details view:

Close the details view

When the user changes the text in the Zip Code… TextBox:

Clear the contents of the ListBox

slide16

Action/Control/Event (ACE) Table forthe WeatherViewer Application

  • Use an ACE table to convert the pseudocodeinto Visual Basic (Fig. 32.5).

Figure 32.5|WeatherViewer application’s ACE table. (Part 1 of 2.)

slide17

Action/Control/Event (ACE) Table forthe WeatherViewer Application (Cont.)

Figure 32.5|WeatherViewer application’s ACE table. (Part 2 of 2.)

creating a silverlight application
Creating a Silverlight Application
  • In Visual Studio, select File > New Project(Fig 28.6).
  • Under Visual Basic Silverlight project types, select Silverlight Application.
  • Name your project WeatherViewer.

Silverlight Applicationproject template

Figure 32.6| Creating a new Silverlight Application project.

creating a silverlight application cont
Creating a Silverlight Application (Cont.)
  • Select Add a new Web to the solution for hosting the control and choose Web Application Project.
  • Your IDE should now appear similar to Figure 32.7.

Design view split into adesigner and XAML editor

Figure 32.7| New Silverlight application in Visual Studio.

32 5 creating the weather viewer application
32.5 Creating the Weather Viewer Application

Basics of a Silverlight Application Project

  • A basic Silverlight application has two XAML files:
    • Page.xaml defines the application’s GUI.
    • App.xaml declares your application’s shared resources, such as styles for GUI elements.
  • It also has two code-behind files.
    • Page.xaml.vbdeclares the GUI event handlers and other methods.
    • App.xaml.vb defines application-level event handlers.
32 5 creating the weather viewer application cont
32.5 Creating the Weather Viewer Application (Cont.)
  • The Page.xaml file is similar to the default XAML for a WPF application.
  • In Silverlight, the main element is a UserControl.
  • A Silverlight application is packaged as a .xapfile.
  • The web page in which the Silverlight application will be hosted references the application’s .xap file to launch the Silverlight Runtime.
32 5 creating the weather viewer application cont1
32.5 Creating the Weather Viewer Application (Cont.)

Laying Out and Building the GUI

  • There are three types of layout containers in Silverlight—Canvas, StackPanel and Grid.
    • A Canvas enables you to precisely control positioning.
    • A StackPanel enables you to place a set of controls horizontally or vertically.
    • A Grid enables you to specify rows and columns with fixed sizes or with auto-size.
defining the layout using grid s
Defining the Layout Using Grids
  • Remove White from the Background attribute (Fig. 32.8), then type Ctrl + Space to display an IntelliSense window.
    • Specify any color you wish as a hexadecimal value of the form #RRGGBB.
  • Insert the ShowGridLines attribute so that you can see the grid layout better as you design.

Grid layout container with Background of LightSkyBlue and gridlines displayed

Figure 32.8|Changing the background color of the Grid and displaying grid lines.

defining the layout using grid s cont
Defining the Layout Using Grids (Cont.)
  • Split the Grid into two rows and one column (Fig. 32.9).
    • The first row’s height should be 35 pixels.
    • The asterisk (*) indicates that the row should occupy all remaining space.

Defines two rows in the Grid

Defines two rows in the Grid

Figure 32.9| Defining the rows and column in the main Grid.

defining the layout using grid s cont1
Defining the Layout Using Grids (Cont.)
  • The first row of the GUI contains three elements.
    • Lines 16–26 of Fig. 32.10 define the Grid element that manages the GUI controls in the first row.
    • Lines 21–25 create a Grid.ColumnDefinitions element containing three ColumnDefinitions.

Defines a nested Grid withone row and three columns

Figure 32.10| Defining a Grid that will contain the first row of elements in the GUI.

defining the layout using grid s cont2
Defining the Layout Using Grids (Cont.)
  • The Border element (Fig. 32.11) contains a TextBlock element.
    • The Grid.Row and Grid.Column attributes indicate the row and column in which the Border is placed.
    • The Border has a CornerRadius of 10 (which rounds its corners).

Defines a Border containing a TextBlock in row 0 and column 0 of the nested Grid

Defines a TextBoxin row 0 and column 1 of the nested Grid

Defines a Button in row 0 and column 2 of the nested Grid

Figure 32.11| Inserting controls into the nested Grid.

defining the layout using grid s cont3
Defining the Layout Using Grids (Cont.)
  • A TextBlock (Fig. 32.12) is used here just to show you that there is a second row.

Defines a TextBlock in row 1 of the main Grid

Figure 32.12| Inserting an element in the second row of the main Grid.

defining the layout using grid s cont4
Defining the Layout Using Grids (Cont.)
  • Run the application (Fig. 32.13).
  • Notice that the application does not resize automatically.

Figure 32.13|Weather Viewer running in a browser.

defining the layout using grid s cont5
Defining the Layout Using Grids (Cont.)
  • Remove the main UserControl’s Width and Height attributes.
  • The application now occupies the entire browser window (Fig. 32.14).

Removing the Width and Height attributes from the UserControlenables the application to resizewith the browser window

Figure 32.14| Resizable Weather Viewer running in a browser.

32 6 calling a web service and using linq to xml to process the results
32.6 Calling a Web Service and UsingLINQ to XML to Process the Results
  • A web service is a software component stored on one computer that can be accessed via method calls over a network.
  • Web services have important implications for business-to-business transactions.
    • They enable businesses to conduct transactions via standardized, web services rather than relying on proprietary applications.
    • Web services typically are platform and language independent, so companies can collaborate without worrying about compatibility.
32 6 calling a web service and using linq to xml to process the results cont
32.6 Calling a Web Service and UsingLINQ to XML to Process the Results (Cont.)
  • Web services can be invoked directly from a web browser using a technique called Representational State Transfer (REST).
    • Each operation is identified by a unique URL.
adding a datagrid to the gui and creating the submitbutton s click event handler
Adding a DataGrid to the GUI and Creating the submitButton’s Click Event Handler
  • Remove the TextBlock at lines 40–41, then double click the DataGrid control in the Toolbox to insert a DataGrid control (Fig. 32.15).

Defines a DataGrid control

Figure 32.15 | InsertedDataGrid element.

adding a datagrid to the gui and creating the submitbutton s click event handler cont
Adding a DataGrid to the GUI and Creating the submitButton’s Click Event Handler (Cont.)
  • The DataGrid control (Fig. 32.16) is in a separate library (known as an assembly) from the other Silverlight controls.
  • An assembly (represented as a .dll file) is the mechanism used to package compiled .NET code for reuse.

Figure 32.16 | Reformatting the UserControl start tag for readability.

adding a datagrid to the gui and creating the submitbutton s click event handler cont1
Adding a DataGrid to the GUI and Creating the submitButton’s Click Event Handler (Cont.)
  • The DataGrid’s x:Name attribute (Fig. 32.17) indicates the control’s name for use in Visual Basic code.
  • The attribute AutoGenerateColumns indicates that the DataGrid should determine its columns from the source of its data.

DataGrid control configured toappear in row 1 of the main Grid

Figure 32.17 | Configuring the DataGrid.

adding a datagrid to the gui and creating the submitbutton s click event handler cont2
Adding a DataGrid to the GUI and Creating the submitButton’s Click Event Handler (Cont.)
  • Right click Page.xaml in the Solution Explorer and selecting View Code.
  • At the top of the Code view, the Class NameComboBox (Fig. 32.18) lists classes and objects.

Selecting submitButton from theClass NameComboBox

Figure 32.18 | Selecting submitButton from the Class NameComboBox.

adding a datagrid to the gui and creating the submitbutton s click event handler cont3
Adding a DataGrid to the GUI and Creating the submitButton’s Click Event Handler (Cont.)
  • Select submitButton from the Class NameComboBox, then select Click from the Method NameComboBox (Fig. 32.19).
  • This generates a Click event handler for the Button.

Selecting Clickevent from theMethod NameComboBox

Figure 32.19 | Selecting the Click event in the Method NameComboBox.

adding a datagrid to the gui and creating the submitbutton s click event handler cont4
Adding a DataGrid to the GUI and Creating the submitButton’s Click Event Handler (Cont.)
  • When the user presses the Get WeatherButton, the application should use the zip code to invoke the web service (Fig. 32.20).

Changing the Cursor to the Waitcursor to indicate that theapplication is awaiting a response

Defining the web service URL

Asynchronously calling the web service

Figure 32.20 | Get WeatherButton’s event handling code.

creating a webclient object and using it to invoke a web service
Creating a WebClient Object and UsingIt to Invoke a Web Service
  • You must import the System.Net namespace (Fig. 32.21).

Importing namespaceSystem.Net

Figure 32.21 | Importing the System.Net namespace.

creating a webclient object and using it to invoke a web service cont
Creating a WebClient Object and UsingIt to Invoke a Web Service (Cont.)
  • A WebClient object must be used an instance variable (Fig. 32.22).
    • The keyword WithEvents indicates that events are associated with the object.
    • When the DownloadStringCompleted event occurs, the application processes and displays the information.

Creating a WebClient object to invoke the web service

Figure 32.22 | Creating a WebClient object.

creating a webclient object and using it to invoke a web service cont1
Creating a WebClient Object and UsingIt to Invoke a Web Service (Cont.)
  • In Code view, select the weatherService object for the Class Name and select DownloadStringCompleted for the Method Name (Figure 32.23).

Display the results if there are results to process

Changing the Cursor to the Arrow cursor to indicate that the response has been received

Figure 32.23 | Calling DisplayWeatherForecast in response to the WebClient’s DownloadStringCompleted event.

creating a webclient object and using it to invoke a web service cont2
Creating a WebClient Object and UsingIt to Invoke a Web Service (Cont.)
  • The property Error is used to determine whether an error occurred.
  • If the Result property (a String) contains the substring "Day" there is information you can display, and you call method DisplayWeather­Forecast.
using linq to xml to convert xml data into a collection of objects
Using LINQ to XML to Convert XML Datainto a Collection of Objects
  • Right click the project in Solution Explorer and select Add > Existing Item.
    • Navigate to C:\Examples\Tutorial32\ and select WeatherData.vb.
  • Add line 2 (Fig. 32.24) to the Page.xaml.vb code-behind file. Notice that the IDE reports an error, indicating that the namespace cannot be found.

Importing namespace System.Xml.Linq

Figure 32.24 | Importing the System.Xml.Linq namespace.

using linq to xml to convert xml data into a collection of objects cont
Using LINQ to XML to Convert XML Datainto a Collection of Objects (Cont.)
  • Right click the project in Solution Explorer and select Add Reference .
    • In the .NET tab, select the assembly System.Xml.Linq (Fig. 32.25) and click OK.

Selecting the System.Xml.Linqassembly to add to your project

Figure 32.25 | Adding a reference to the System.Xml.Linq assembly.

using linq to xml to convert xml data into a collection of objects cont1
Using LINQ to XML to Convert XML Datainto a Collection of Objects (Cont.)
  • XML uses namespaces in a manner similar to Visual Basic applications.
  • To enable XML data processing of weather data, you must import the namespace contained in the XML (Fig. 32.26).

Importing the XML namespace used in the XML data

Figure 32.26 | Importing the XML namespace for the weather-forecast information.

using linq to xml to convert xml data into a collection of objects cont2
Using LINQ to XML to Convert XML Datainto a Collection of Objects (Cont.)
  • This method (Fig. 32.27) receives the String containing the XML returned by the web service.
  • Line 52 creates an XDocument variable and uses method XDocument.Parse to convert the String object into XML.

Parsing the XML responseStringto prepare it for use with LINQ to XML

Figure 32.27 | Adding the DisplayWeatherForecast method.

using linq to xml to convert xml data into a collection of objects cont3
Using LINQ to XML to Convert XML Datainto a Collection of Objects (Cont.)
  • This LINQ query (Fig. 32.28) converts the XML data into a collection of WeatherData objects.

Selecting the XML’s WeatherData elements that are

Creating a new object of class WeatherData from each XML WeatherData element

Using XML property syntax to access the XML elements within each WeatherData element and assign their values to properties of the new WeatherData object

Figure 32.28 | Converting XML to WeatherData objects with LINQ to XML.

using linq to xml to convert xml data into a collection of objects cont4
Using LINQ to XML to Convert XML Datainto a Collection of Objects (Cont.)
  • The From clause indicates that we are selecting items from the weatherXMLXDocument object.
    • The ellipsis notation (...) represents the new XML descendants property that is used to select XML elements.
    • In this case, <WeatherData> indicates that all the WeatherData elements in the XML document should be selected.
  • The Select clause creates a new WeatherData object for each WeatherData element in the XML.
using linq to xml to convert xml data into a collection of objects cont5
Using LINQ to XML to Convert XML Datainto a Collection of Objects (Cont.)
  • The With keyword indicates that the new WeatherData object should be used implicitly to access the object’s properties.
  • The notation <Day> uses Visual Basic’s new XML child property syntax to access the child element of the WeatherData element.
using linq to xml to convert xml data into a collection of objects cont6
Using LINQ to XML to Convert XML Datainto a Collection of Objects (Cont.)
  • Save your files to ensure that the forecastList is recognized by IntelliSense, then insert lines 72–73 (Fig. 32.29).
  • WPF’s powerful data-binding capabilities make it easy for you to display the weather data in the DataGrid.

Specifying the DataGrid’s ItemsSource from which it will extract data to display

Figure 32.29 | Binding the DataGrid’s ItemsSource property tothe collection of WeatherData objects.

using linq to xml to convert xml data into a collection of objects cont7
Using LINQ to XML to Convert XML Datainto a Collection of Objects (Cont.)
  • Run the application (Fig. 32.30).
  • Enter a zip code and press the Get WeatherButton to invoke the web service.

DataGrid showing the data from a collection of WeatherData objects

Figure 32.30 | Displaying the weather forecast in a DataGrid.

replacing the datagrid with a listbox
Replacing the DataGrid with a ListBox
  • Replace lines 41–42 in Page.xaml with lines 41–42 of Fig. 32.31.
  • Once you’ve added the ListBox, remove the xmlns:my declaration in line 2—it is no longer needed.

Replacing the DataGridwith a ListBox

Figure 32.31|Replacing the DataGrid with a ListBox.

replacing the datagrid with a listbox cont
Replacing the DataGrid with a ListBox (Cont.)
  • Run the application (Fig. 32.32). Enter a zip code and press the GetWeather button to invoke the web service.
  • By default, a ListBox shows the String representation of each item in its ItemsSource.
  • Since we did not define a ToString method for the WeatherData class, the ListBox shows the name of the class.
replacing the datagrid with a listbox cont1
Replacing the DataGrid with a ListBox (Cont.)

ListBox rendering itsitems as Strings

Figure 32.32|Showing the String representation of WeatherDataobjects in the ListBox.

changing the listbox s itemtemplate to display the date and the weather image
Changing the ListBox’s ItemTemplate toDisplay the Date and the Weather Image
  • The ListBox.ItemTemplate element (Fig. 32.33) customizes the ListBox’s appearance.
  • The DataTemplate element binds data from a data source to the ListBox’s items.
  • The Image control’s Source attribute specifies the location of the image to display.
    • This uses Binding markup extension to obtain the attribute’s value from the WeatherImage property of an object.
changing the listbox s itemtemplate to display the date and the weather image cont
Changing the ListBox’s ItemTemplate toDisplay the Date and the Weather Image (Cont.)

Creating a custom ListBoxItemTemplate that displays the weather image and date for each WeatherData object

Figure 32.33|Changing the ListBox’s ItemTemplate.

changing the listbox s itemtemplate to display the date and the weather image cont1
Changing the ListBox’s ItemTemplate toDisplay the Date and the Weather Image (Cont.)
  • Run the application (Fig. 32.34).
  • Enter a zip code and press the GetWeatherButton to invoke the web service.

ListBox items rendered with a custom ItemTemplate

Figure 32.34|Displaying an image and the day of the week foreach day in the weather forecast.

changing the listbox s itemspanel to arrange the items horizontally
Changing the ListBox’s ItemsPanelto Arrange the Items Horizontally
  • The ListBox.ItemsPanel element (Fig. 32.35) specifies how the items in the ListBox should be organized.
  • The ItemsPanelTemplate specifies theorientation of the ListBox’s elements.

Creating a custom ListBoxItemsPanel that arranges the ListBox items horizontally in a StackPanel

Figure 32.35| Changing the ListBox’s ItemsPanel.

changing the listbox s itemspanel to arrange the items horizontally cont
Changing the ListBox’s ItemsPanelto Arrange the Items Horizontally (Cont.)
  • Run the application (Fig. 32.36).
  • Enter a zip code and press the Get WeatherButton.

ListBox items rendered horizontally with a custom ItemsPanel

Figure 32.36| Displaying the ListBox items horizontally.

adding a usercontrol to the application
Adding a UserControl to the Application
  • Right click the WeatherViewer project in the Solution Explorer and select Add > New Item….
  • Select the Silverlight User Control template and name the file WeatherDetailsView.xaml (Fig. 32.37).

Silverlight User Controltemplate

Figure 32.37| Adding a new UserControl to a Silverlight application.

adding a usercontrol to the application cont
Adding a UserControl to the Application (Cont.)
  • Remove the new UserControl’s Width and Height attributes so that the control fits thelayout container.
  • Replace the Grid element with the XAMLshown in lines 4–34 of Figure 32.38.
adding a usercontrol to the application1
Adding a UserControl to the Application

Figure 32.38| Adding controls to a new UserControl.

adding a usercontrol to the application cont1
Adding a UserControl to the Application (Cont.)
  • The Rectangle control has its HorizontalAlignment and VerticalAlignment attributes set to Stretch, so the Rectangle fills the entire Grid cell.
    • The Rectangle’s Fill attribute specifies its fill color and its Opacity attribute specifies that the Rectangle should be semitransparent.
  • The Border element encloses all the other elements inthe custom control.
    • The BorderBrush attribute specifies the color of the Border, and the BorderThickness attribute controls the thickness of the Border.
  • A Binding markup extension is used to specify the WeatherData property that is bound to the control.
adding a usercontrol to the application cont2
Adding a UserControl to the Application (Cont.)
  • Right click in the XAML for the WeatherDetailsView and select View Code.
  • In the Class NameComboBox, select closeButton, then select Click for the Method Name (Fig. 32.39).

Hides the custom control when the user clicks the CloseButton

Figure 32.39|Click event handler for the CloseButton.

displaying the complete weather details for the selected day
Displaying the Complete WeatherDetails for the Selected Day
  • The XML namespace called Weather (Fig. 32.40) represents the WeatherViewer namespace in the project.
  • Save your project so that it becomes aware of the new namespace.

XML namespace that enables youto use the new WeatherDetailsView in the GUI

Figure 32.40| Adding a custom control’s namespace to the application’s Page.xaml file.

displaying the complete weather details for the selected day cont
Displaying the Complete WeatherDetails for the Selected Day (Cont.)
  • The Visibility attribute (Fig. 32.41) is set to Collapsed—it is not currently displayed.
  • The Grid.RowSpan attribute is set to 2—when this control is displayed, it will occupy both rowsof the Grid.

WeatherDetailsView is initially hidden and will span both rows of the main Grid when it is displayed

Figure 32.41| Adding a WeatherDetailsView custom control to the GUI.

displaying the complete weather details for the selected day cont1
Displaying the Complete WeatherDetails for the Selected Day (Cont.)
  • In Page.xaml.vb, select forecastListBox from the ClassNameComboBox, then select SelectionChanged for the MethodName (Fig. 32.42).

Specifies that the currently selected ListBox item will supply the data for the WeatherDetailsView

Shows the WeatherDetailsView

Figure 32.42|forecastListBox’s SelectionChanged event handler.

displaying the complete weather details for the selected day cont2
Displaying the Complete WeatherDetails for the Selected Day (Cont.)
  • Select inputTextBox from the Class NameComboBox, then select TextChanged for the Method Name (Fig. 32.43).
  • When a ListBox’s ItemsSource property is set to Nothing, no items will display.

Clears the ListBox when the user changes the text in the TextBox

Figure 32.43|TextChanged event handler for the inputTextBox.

displaying the complete weather details for the selected day cont3
Displaying the Complete WeatherDetails for the Selected Day (Cont.)
  • Run the application.
  • Enter a zip code and press the Get WeatherButton.
  • Once the weather forecast displays, click a dayin the forecast (Fig. 32.44).

WeatherDetailsView displayedafter the user selected a specificday from the ListBox

Figure 32.44|Displaying the WeatherDetailsView for a specific day.

slide69

Outline

  • Figures 32.45–32.48 present thesource code for the application.

(1 of 4 )

XML namespace for custom WeatherDetailsView control

Defining rows in the main Grid

slide70

Outline

(2 of 4 )

Defining rows in the nested Grid

Defining a Bordercontaining a TextBlock

slide71

Outline

(3 of 4 )

Defining a TextBoxfor user input

Defining a Button to invoke the web service

Defining a ListBox with a custom look-and-feel to display the weather forecast

slide72

Outline

(4 of 4 )

Defining a WeatherDetailsView to display the complete details view for a selected day

slide73

Outline

System.Net

(1 of 6 )

Importing namespaces for class WebClient and for LINQ to XML

Importing the XML namespace used in the XML returned by the web service

Creating a WebClient toinvoke the web service

slide74

Outline

System.Net

(2 of 6 )

Defining the URL for invoking the web service

Invoking the web service asynchronously via the WebClient object

slide75

Outline

System.Net

(3 of 6 )

Indicates that this event handler responds to the WebClient’s DownloadStringCompleted event

Uses class XDocument to parse the results of the web service for processing with LINQ to XML

slide76

Outline

System.Net

(4 of 6 )

Uses LINQ to XML and XML property syntax to select all of the non-empty WeatherData elements from the XML and convert them to WeatherData objects

slide77

Outline

System.Net

(5 of 6 )

Specifying that the ListBox should be populated from the collection of WeatherData objects

Specifying that the WeatherDetailsView should obtain its data from the selected item in the ListBox

Showing the WeatherDetailsView

slide78

Outline

System.Net

(6 of 6 )

Clearing the ListBox when the user begins typing a new zip code

slide79

Outline

(1 of 2 )

Creating a Rectangle to hide the other controls on the GUI when a WeatherDetailsView is displayed

Using data binding to display WeatherData properties in the WeatherDetailsView

slide80

Outline

(2 of 2 )

slide81

Outline

Hiding the WeatherDetailsView when its CloseButton is pressed

ad