Multi-Targeting QuickStart

The Multi-Targeting QuickStart demonstrates the structure of a project created to multi-target Windows Presentation Foundation (WPF) and Silverlight environments. It provides a desktop experience (on WPF) and a Rich Internet Application (RIA) experience (on Silverlight).

Business Scenario

The QuickStart is based on a real estate application. This window represents the results of a property search. It shows different characteristics of a selected property and includes a pie chart that shows the percentage of how much that property's characteristics match the search criteria.

Figure 1

Multi-Targeting QuickStart — WPF version

Building and Running the QuickStart

The QuickStart ships as source code—this means you must compile it before you run it. This QuickStart does not have any prerequisites.

To build and run the QuickStart

1. In Visual Studio, open the solution file MultiTargetingQuickstart.sln.
2. Make sure the desired version of the QuickStart is set as the startup project. If it is not, right-click the desired project in Solution Explorer, and then click Set as Startup Project:
   • To build and run the WPF version of the QuickStart, the startup project should be the RealEstateListingViewer.Desktop project in the Desktop solution folder.
   • To build and run the Silverlight version of the QuickStart, the startup project should be the RealEstateListingViewerHost project in the Silverlight solution folder.
3. If you want to build and run the Silverlight version of the QuickStart, right-click the RealEstateListingViewerTestPage.html page, located in the RealEstateListingViewerHost project, and then click Set As Start Page.
4. On the Build menu, click Rebuild Solution.
5. Press F5 to run the QuickStart.

Walkthrough

The following procedure provides the steps to explore the business scenario in the Multi-Targeting QuickStart.

To explore the scenario

1. In Visual Studio, open the solution file MultiTargetingQuickstart.sln.

2. Make sure the desired version of the QuickStart is set as the startup project. For more information about this, see "Building and Running the QuickStart" earlier in this topic.

3. On the Build menu, click Rebuild Solution.

4. Press F5 to run the QuickStart. The main window shows the results of the search, as illustrated in Figure 2, which shows the Silverlight version of the QuickStart.

   

   Figure 2

   QuickStart main window — Silverlight Version

5. The main window shows a photograph, location, price, characteristics score, and a description of the property.

6. Notice that the pie chart, located in the bottom right corner, represents how closely the characteristics of the current property match the search criteria.

Implementation Notes

The QuickStart highlights the key implementation details of a multi-targeted application.

Solution Structure

To follow the shared code/linked projects approach to achieve multi-targeting, structure your solution into two parts: WPF projects and Silverlight projects. To do this, it is recommended that you use Solution folders, as shown in Figure 3.

Figure 3

Multi-Targeting QuickStart solution structure

Inside each solution folder, create the corresponding projects. Each project in the solution manages all the references, resources, and code specific to the WPF or Silverlight target environments. The common code that is shared between the two environments is linked from one project (source project) into the other project (target project); consequently, this shared code gets compiled into each target. The reason for using this approach is because WPF and Silverlight are not binary compatible.

To share the code, the common files are added as links in the target projects. To add a link from an existing file to a target project, right-click the target project, point to Add, and then click Existing Item. After you select the desired file, point to Add at the bottom of the dialog, and then click Add As Link, as shown in Figure 4.

Figure 4

Adding an existing item as a link

Note

To automatically link your files, use the Project Linker tool. For more information about this tool, see the "Visual Studio Tooling Synchronization Package" section in the Project Linker: Synchronization Tool topic.

Multi-Targeting QuickStart Solution Elements

The application defined for both environments is structured in several folders for Images, Models, Services, and Views. Note that in the WPF version of the QuickStart, most files in the aforementioned folders are links to the files in the Silverlight version.

Solution files can be classified into WPF-specific files or Silverlight-specific files and shared files. Note that there are very few files that are specific to WPF or Silverlight.

Platform-Specific Files

The following files are platform specific:

• The application definition file (App.xaml)
• The RealEstateListingView class
• The RealEstateService class

The App.xaml file is the declarative definition of the application. This class is maintained in both projects because it is automatically generated and typically does not contain code. Therefore, it is easier to keep the WPF-specific classes and the Silverlight-specific classes than what it is to abstract Application into a common class.

The RealEstateListingView class is the view, a component that is not typically multi-targetable. A main difference between WPF and Silverlight is that in WPF, the user interface (UI) is defined as a Window, and in Silverlight, it is defined as a UserControl. Notice that in the QuickStart, there are only minor differences in the UI between the two versions. Therefore, both views could have been defined as UserControl and shared across WPF and Silverlight. This is a possible approach for simple views; however, more complex applications will probably take advantage of UI features that are specific to WPF and Silverlight, such as 3D or trigger support in WPF and the Visual State Manager or DeepZoom in Silverlight.

The RealEstateService service, which implements the IRealEstateService interface, is responsible for returning the characteristics of a particular property, including an image of it. The RealEstateService class implementation is divided into two partial classes, one of which is the RealEstateService.cs file that is shared between both projects; therefore, this file is defined in the Silverlight project and is linked to the WPF project. This partial class defines the GetRealEstate method of the service.

The remaining partial class is environment-specific; consequently, the Silverlight project contains the RealEstateService.Silverlight.cs file, and the WPF project contains the RealEstateService.Wpf.cs file. These files define specific behavior for the WPF or Silverlight environment, so they are not shared between projects. These files define the GetImage method. The implementation of this method in WPF differs from the one in Silverlight. In WPF, the property picture is loaded directly from disk, and in Silverlight, the image is downloaded from the Web server.

The approach of splitting the implementation of a service over two partial classes (one for Silverlight and one for WPF) can be used to employ different coding strategies in WPF and Silverlight environments. Note that the service interacts with the rest of the core application through a common interface, so this technique is a mechanism to factor implementation level details into files that are conditionally compiled for each environment.

Note

This technique is useful for minor scale implementation differences between WPF and Silverlight. There are some scenarios where the differences between both environments are considerable enough to apply the aforementioned approach. For more information about multi-targeting considerations, see the "Making Your Solution Multi-Targetable" section in the Multi-Targeting technical concept.

Shared Files

Multi-targeted code that is easily shared between both environments is typically the non-UI code.

In the WPF version of the QuickStart, most files are linked files because the core application was developed in Silverlight. The QuickStart includes the following shared files:

• Pictures located in the Image folder
• Model files, located in the Model folder
• Services files that have shared implementation, located in the Service folder
• Interfaces
• Resources, specifically localization strings

The shared (linked) files are shown in Figure 5.

Figure 5

Linked files shared between Silverlight and WPF projects

Note

For more information about the elements that can be multi-targeted, see the "Multi-Targeted Elements" section in the Multi-Targeting design concept.

Acceptance Tests

The Multi-Targeting QuickStart includes a separate solution that includes acceptance tests. The acceptance tests describe how the application should perform when you follow a series of steps; you can use the acceptance tests to explore the functional behavior of the application in a variety of scenarios.

Some acceptance tests were developed using the testing framework White. To run these tests, you need to have White installed. For more information about White, including download information, see White on CodePlex.

Note

The acceptance tests have been developed and verified with the White 0.1.5.0 release. Although other releases of White might work, it is recommended to use this release to avoid any issues when running the tests.

To run the Multi Targeting QuickStart acceptance tests

1. Place the assemblies required by White in the folder Source\Lib\White. The files are the following:
   • Bricks.dll
   • Bricks.RuntimeFramework.dll
   • Castle.Core.dll
   • Castle.DynamicProxy2.dll
   • Core.dll
   • log4net.config
   • log4net.dll
   • nunit.framework.dll
   • White.NUnit.dll
   • Xstream.Core.dll
2. In Visual Studio, open the solution file Quickstarts\MultiTargeting\MultiTargetingQS_AcceptanceTest\MultiTargetingQS_AcceptanceTest.sln.
3. Right-click MultiTargetingQS_AcceptanceTest, and then click Set as StartUp Project.
4. Press F5.

Outcome

You should see the QuickStart window and the tests automatically interact with the application. At the end of the test pass, you should see that all tests have passed.

More Information

To learn about other QuickStarts included with the Composite Application Guidance, see the following topics:

• Modularity QuickStarts
• View Discovery Composition QuickStart
• View Injection Composition QuickStart
• Commanding QuickStart
• Event Aggregation QuickStart

Home page on MSDN | Community site