Using the Preview Tool to Develop UI

The Preview Tool lets you develop individual portions of a UI. Different layouts, background, and scaling settings are applied depending on how you view your MCML, with the intent to help the design process.

This simple MCML is the source for the examples below:

<Content>
    <Text Name="MyText" Content="Layout" Color="Gold" Font="Calibri, 24" />
</Content>

	Stand-alone Preview Tool Center layout Black background No scaling By using a center layout without scaling, the UI and its details are easier to view and design.
	Preview Tool application in Windows Media Center Center layout No background Scaling Because no other background was specified, the default Windows Media Center background is visible. Proportional scaling is used, so the text appears smaller because the window is not full screen.
	Windows Media Center application Default layout No background Scaling The sample MCML has been compiled, installed, and run as a Windows Media Center application. This sample does not specify a layout, so the default layout is used (objects are positioned at top left). Because no other background was specified, the default Windows Media Center background is visible. Proportional scaling is used.

Scaling in the Preview Tool

The Preview Tool is specifically designed to not scale the MCML content when you view it in the stand-alone Preview Tool. When you view the MCML content in the Windows Media Center version, the Preview Tool inherits the proportional scaling that is applied to all applications that run within Windows Media Center. One reason for this design is for the authoring and preview cycle in UI design so that you can view the UI at full size (for example, when working on a small feature within the UI). Because Windows Media Center scales the content proportionally to the window, the visual elements can get quite small when you want to switch quickly between your MCML authoring environment and the Preview Tool. For example, in the previous figures, compare the size of the text where scaling is or is not applied.

Evaluating Layout and Behavior

In stand-alone mode, the Preview Tool lets you see how your layout looks and works in different sizes and aspect ratios. Windows Media Center is mostly designed for widescreen (16:9) and standard (4:3) display. You can also set the screen resolution to a different size (such as 1920 x 1200 pixels for a 16:10 aspect ratio) and run Windows Media Center at full screen to view different aspect ratios. However, changing the screen resolution this way can be tedious during UI development. By contrast, you can run the Preview Tool with an arbitrary size. The following figure shows the snowflake sample gallery at a 4:1 aspect ratio:

When the size of the window is increased, the gallery grows to accommodate more rows and columns of data without having to change the panel that contains the snowflakes, recompiling, installing to the GAC, or registering it in Windows Media Center. Instead, because there is no proportional scaling, the item sizes remain unchanged and more snowflakes are displayed. The following figure shows the result:

The following tips are useful for working with the Preview Tool:

• To view proportional scaling in the Preview Tool, use <ScaleLayout MaintainAspectRatio="true" AllowScaleUp="true" AllowScaleDown="true" /> in your test harness. For an example, see Layout > Scale Layout in Sample Explorer.
• To switch between 16:9 and 4:3 aspect ratios, select the window frame, hold CTRL, and size the window up or down.

Testing Pages

The stand-alone Preview Tool has a page concept, but it is distinctly different and simpler than the page concept within Windows Media Center (the PageSession and HistoryOrientedPageSession classes). A page is basically a <UI Name="Pagename"> element in markup, but the underlying functionality for what a page does is provided by Windows Media Center. The stand-alone Preview Tool is designed to work with the visual layer of the platform only. So, once you are ready to test page behavior, you should use the Preview Tool within Windows Media Center.

An even better approach is to test the page behavior early in the application development cycle using wire-frame resources. The simple button in Sample Explorer (Controls > Button) provides an example of UI to use as a placeholder to implement and test the layout and data binding that involves your page variables. You can replace the simple button later with a button that is fully designed.

Testing UI

The stand-alone Preview Tool provides the flexibility to create a test harness for your UI. The following figure shows an example of a simple test harness for a button:

The Preview Tool in Windows Media Center (the top right window) is running an application (a compiled assembly) for testing the button functionality. In this example, it calls a method to display a Windows Media Center dialog box.

The stand-alone Preview Tool (the bottom right window) shows the result of pressing F5 in Visual Studio—the MCML code is loaded and shows the different ways to instantiate the button using different properties.

The following figure shows a test harness for the Z sample application, which takes advantage of MCML layouts and rules to step through all of the UI:

On the right, each UI defines an individual page within the Z sample application. Selecting an item loads an MCML UI into the larger, 4:3 area on the left. This test harness is defined by Default.mcml in the sample code, which is included with the Windows Media Center SDK.

Use the following procedure to use the F5 test harness functionality in Visual C# 2008 Express Edition with the Z sample application (otherwise, the Preview Tool reports an exception and closes when you press F5 because the Z test harness can't find the data):

1. Open a command prompt with administrator privileges.
2. Navigate to [WMCSDK_InstallPath]\Samples\Z\.
3. Run Command.CreateDevEnvironment.cmd.
4. Make the following changes in Visual C# 2008 Express Edition:
   • In Solution Explorer, select Solution 'Z' (2 Projects).
   • From the Project menu, select Set as Startup Projects.
   • From the Project menu, select Properties.
   • In Solution Z Property Pages, under Common Properties click Startup Project.
   • Select Single Startup Project, and then select Z from the drop-down list.
   • Click OK.
5. From the Debug menu, select Start Debugging (or press F5) to start the Z test harness.

To start the Preview Tool within Visual C# 2008 Express Edition, you must edit the .csproj file for the solution because the Start Action setting is not available in Visual C# 2008 Express Edition. The following example code from the Z.csproj file shows the additional XML code:

<PropertyGroup>
    <UseVSHostingProcess>true</UseVSHostingProcess>
    <StartWorkingDirectory>$(windir)\eHome</StartWorkingDirectory>
    <StartArguments>-load:"resx://Z/Z.Resources/Default" -assemblyredirect:"$(FullyQualifiedOutputPath)" -markupredirect:"resx://Z/Z.Resources/,file://$(MSBuildProjectDirectory)\Markup\,.mcml"</StartArguments>
    <StartAction>Program</StartAction>
    <StartProgram>$(windir)\eHome\McmlPad.exe</StartProgram>
</PropertyGroup>

The XML code contains the following Preview Tool parameters:

• -load:"resx://Z/Z.Resources/Default"

  Loads the Z assembly and navigates to the Default.mcml resource. Default.mcml is never used by the application once installed—its only purpose is to provide the test harness.

• -assemblyredirect:"$(FullyQualifiedOutputPath)"

  Loads the assembly from a specific location. When $(FullyQualifiedOutputPath) is evaluated, it returns a path such as C:\Program Files\Microsoft SDKs\Windows Media Center\v6.0\Samples\Z\bin\Debug\. This does not work if the assembly is registered to the Global Assembly Cache, so be mindful of when you run Command.InstallAndRegister.cmd contained in the sample solution.

• -markupredirect:"resx://Z/Z.Resources/,
  file://$(MSBuildProjectDirectory)\Markup\,.mcml"

  Replaces instances of resx:// with file:// and appends .mcml. This allows you to build the assembly once, load the Default.mcml test harness into the Preview Tool, make changes to the source MCML, and test the results of those changes by refreshing the Preview Tool without having to rebuild the assembly.

You can use these Preview Tool parameters at the command line or by using the Preview Tool Launcher. These parameters allow you to create a compiled assembly and open MCML files directly in the Preview Tool to edit and preview your changes in real time, and to view changes to markup by refreshing the Preview Tool. And, you avoid having to recompile, install to the GAC, and register the application in Windows Media Center. The following figure shows the Preview Tool Launcher:

In this example, the Preview Tool Launcher sets the command-line parameters for the Preview Tool. After changing the markup, you can press F5 to refresh the the Preview Tool window without needing to recompile. This also allows you to make changes to the UI without committing them to the compiled assembly.

Sample Explorer

• Layout > Scale Layout
• Controls > Button

See Also

• Developing Applications for Windows Media Center
• Understanding the Fundamentals