Media Center@Vista - Let's Unite What's Been Separated
One great thing about most of today's presentation layer technologies is that they not only support but sometimes even enforce a separation of application logic and the view. This is also true for the new Media Center presentation layer language called Media Center Markup Language (MCML) coming with Media Center on Windows Vista. It is a declarative, CML based language to create full fidelity Media Center User Interfaces and introduces comprehensive concepts of binding data coming from an underlying data access or communication layer to UI elements.
Another concept that is quite strong in MCML and especially makes sense in larger projects is to segment the UI artifacts in several physical MCML files. This enables architects, designers and developers to segment their projects as they need it. For example it could make sense to have group UI elements in certain categories like buttons, higher level graphics elements and background themes or to have the artifacts assigned to certain developers. Another way and probably the most obvious way to segment the UI is to have the notion of pages derived from the web application paradigm.
Whatever the strategy is it is a good thing to do and to give structure to a media center application development project. Although the concept of accessing resources is described in the media center SDK I realized that it is not 100% clear on how to handle several physical MCML files in one project. Therefore I explain how to do that in two simple samples.
The recommended prerequisites for those samples are:
- Windows Vista Beta 2, RC1, RC2 with Media Center
- Visual Studio 2005
- Windows Media Center SDK
The first step is to create a new media center project in Visual Studio 2005. The project template is available in Visual Studio 2005 after installing the Media Center SDK. This will then create the project structure with the necessary files for a Media Center application which is a .Net class implementing the IAddInModule and IAddInEntryPoint interfaces, a markup folder with a default MCML page and a resource container holding the references to the resources needed by the application.
The project could be deployed straight away however we need to add a second MCML resource for this simple sample. Therefore we first of all add a second MCML file by right clicking on the "Markup"-folder in the solution explorer and then choosing a MCML file in the following dialogue. After this is done we add some (very) simple markup to this file:
<UI Name="CF2">
<Content>
<ColorFill MinimumSize="200,200" Content="SkyBlue">
<Children>
<Text Color="White" Content="I'm Coming from a MCML resource file" Font="Segoe, 16" HorizontalAlignment="Center" />
</Children>
</ColorFill>
</Content>
</UI>
Next step would be to add a reference to this file in the resource container of the project. In order to do that right click on the project and open the properties sheet. On the resources tab you can add the resource by choosing "Add existing file" in the "Add Resource" drop down menu. In order to browse to and to add the markup file the view mode needs to be switched to "All Files (*.*)" otherwise MCML files will not be displayed.
After choosing the right file it is added as a resource with a name of the physical file without the file extension however the name can be changed to an arbitrary name.
The next step now is to make this MCML resource file consumable in the consuming page. Therefore the page needs to be referenced in the MCML root element of the consuming page as a XML namespace. The naming scheme to access the resource correctly would be the following:
xmlns:myns="resx://<assemblyName>/<assemblynamespace>.<resourceClass>/<resourceName>
A this example the reference looks like this:
xmlns:scf="resx://NavigationSample/NavigationSample.Resources/SimpleColorFill"
Now the UI element named "CF2" from the MCML resource file defined earlier can be used in the markup of the consuming page by referencing it with the XML namespace prefix and its name:
<UI Name="Hello">
<Content>
<Panel>
<Layout>
<FlowLayout Orientation="Vertical" />
</Layout>
<Children>
<ColorFill MinimumSize="100,100" Content="IndianRed">
</ColorFill>
<scf:CF2></scf:CF2>
</Children>
</Panel>
</Content>
</UI>
The MCML Files are included as attachments if someone wants to try this real simple sample.
Next time I will describe how to use multiple MCML files in a pagination context and how to navigate from one page to another and how to manually deploy an application to the Media Center host using the RegisterMceApp.exe tool. So stay tuned
Resources:
Advanced Media Center Topic by Aaron Stebner
Comments
- Anonymous
November 07, 2006
Alexander, I appreciate your very basic introduction into MCML, however, where can I find more information on advanced UI design in MCML. There is a lot of discussion regarding installation of MCML, developing for the media center environment, but its very hard to find any information on creating customized controls with MCML or even mimicking the scroller glide. - Anonymous
November 08, 2006
Thanks for your valuable feedback. I agree that there is not much information about advanced topics out there and even the SDK documentation is not yet ready. However a new technology needs a growing and active community. Since the Media Center Community developing applications based on Windows Media Center Presentation Layer is relatively small and one of my tasks is evangelism it's my obligation to enable people to ramp up with the technology and that begins with the basic steps.Concerning your concrete issues I guess you already studied the sections about UI Inheritance which can probably help you to customize UI elements and enhance them with custom properties and behaviours.