Patchou's Cabana

The personal blog of Patchou

MCT Documentation – Modify the UI

< back to Media Center Themer’s documentation index

If you’re still reading this after browsing through all the other sections of the documentation, you may start to feel a bit overwhelmed. Pictures, colors, text, etc… now that you’ve seen them all, here’s the recommended way to tackle a new theme project:

  1. Start by selecting a nice background picture for the theme. Spend as much time as needed on this as it will certainly be the corner stone of your new theme.
  2. Use auto-colorization and do many tests to find a good looking color that matches your background.
  3. Replace the default text colors so they look good in your windows. Text color is important and must not be neglected, check as many different screens as possible to make sure you don’t miss one.
  4. Explore Media Center to look for additional pictures to change (Music, Photos, TV, …) and colorize manually. If you don’t find any, you’ve not searched enough :-).

Now, if you have the patience to do more, here’s one last topic that may be of interest to you.

Advanced Topic: Windows’ Structure

Changing pictures and text color is interesting, but what about doing much more? for instance, you may want to re-organize the menu items on the start screen, erase elements in a couple of windows to achieve a minimalist look, etc… Media Center Themer lets you access and modify the actual structure of all Media Center’s windows. One note though: this topic is advanced and time-consuming one; nevertheless it’s also the most interesting thing to do from a geek point of view.

Here is what’s it about: each windows of Media Center is created from a template, located in XML files written in MCML: Media Center Markup Language. Each different screen uses one or more of these structure files to present data to the user. With the LogResources setting enabled (see the Change the Pictures section), you’ll find most of these files located in the html sub-directories of ehres.dll and microsoft.mediacenter.shell.dll. Both .xml and .mcml files represent the same thing and can be opened in any text editor. It is recommended to use a proper XML editor as it will be able to validate your changes to some extent. Changing something in a window means finding the proper file and figuring out the syntax of whatever you want to achieve. Luckily, Microsoft being the nice organized company that it is, you’ll find documentation about the MCML format online, in the MSDN.

As an example, let’s change the time that’s normally displayed in the top right corner of Media Center’s screens. The idea is that you may also want to see the current date, including the day of the week so that it looks like this:

Media Center - Before
Media Center – Before Modification
Media Center - After
Media Center – After Clock Modification

As this element, the time, is displayed in many windows, chances are that it’s defined in one single place, then shared among different screens. Looking into the logged resources directories, you’ll find a file called CLOCK.MCML which looks like what you’re searching for. The only way to know that for sure it to give it a try so make a copy of it in the directory of Media Center Themer, call it NewClock.mcml and add the following definition in your XML data file:

<Resources>
	<Html>
		<Resource Id="CLOCK.MCML">
			<Replace File="NewClock.mcml"/>
		</Resource>
	</Html>
</Resources>

As with pictures, this code instructs the tool to load NewClock.mcml instead of Clock.mcml when the resource is requested by Media Center. Now open NewClock.mcml in your favorite XML editor and spend some time trying to figure out what it does exactly. Use the MSDN documentation as much as possible to try and match element names with actual information. In order to achieve what we want, you’ll want to concentrate on the following line:

	...
	<Color Name="Color" Color="color://comm:OffWhite"/>
 <DateTimeFormats Name="Format" DateTimeFormats="ShortTime"/>
</Properties>
...

Notice the DateTimeFormats attribute being set to ShortTime… if you look at the documentation of the DateTimeFormats enumeration in the MSDN, you’ll find all the values that can be used for this attribute. Looking at some of their own examples, you’ll also see that more than one value can be specified and that everything must be separated with commas. So change the line to the following (put everything on a single line, no breaks), save and restart Media Center. You should now see the date and day of the week displayed next to the time.

<DateTimeFormats Name="Format"
	DateTimeFormats="LongDate,ForceDayOfWeek,ShortTime"/>

This small example illustrates how much the Media Center interface is open to changes. It is not straightforward and you’ll probably need to spend many hours trying all sorts of things, crashing Media Center, before anything good can happen. Don’t get discouraged too fast: for most people, changing the pictures and font attributes of Media Center is more than enough so you may want to stick to that at the beginning. Just remember that it is possible to do much more than that.

Epilogue

You’re now done reading this documentation, thank you for your time and patience. You’ll find additional examples of what can be done in the Samples section. As always though, the best thing to do is practice and learn along the way… have fun!

  • Archive

  • Categories

  • Blogroll