The Digital Lifestyle Developer Blog

Not The Only One

IgnoranceIsBliss — Thu, 04 Dec 2008 23:10:00 GMT

Looks like I'm not the only one experiencing erratic wakeup issues after the installation of the TV Pack:

http://thegreenbutton.com/forums/8/286420/ShowThread.aspx

Looks like a major glitch in the pack, but one that hasn't had too much official response as yet. Has anyone else out there found a similar problem? Perhaps we can band together and solve whatever this issue is.

Also, I'm currently searching for work (I'm not out of work - just looking at a change of scene). If anyone is interested in a Media Center, C++ or C# developer and is ideally Australian based, please let me know!

Look Ma, No Buttons!

IgnoranceIsBliss — Tue, 02 Dec 2008 21:33:00 GMT

A user of EMUCenter showed me his new Media Center remote a few days ago on my forums, and I discovered that Microsoft has left out the '#' and '*' buttons on the latest generation of their control.

Of course, MS has always stated that there is no guarantee that those particular buttons will be present. But this leaves us with a dilemma.

There are now basically no 'spare' buttons present on the remote control. If we need to create a context menu (or a 'more' menu, like right-clicking on an icon in Windows) we are presented with a problem - which button on the remote can we override?

The ideal button is 'i', but unfortunately MS has restricted this. We can't override it. I used to use '#' and '*' extensively, but now they aren't present in new remotes. My applications often use the text buttons, so the numbers are off limits, so are all the 'play' buttons (eg. skip forward etc.) because someone may be watching media while accessing the application.

So...are there any more options?

At the end of the day, the answer is basically 'no'. Which means we either severely limit our applications to suit this situation, or we have to put in a little extra work. I'm going to detail my current 'suggestion' for how to take care of this problem. I have chosen to replace a seperate button with a press and hold. So we simply hold the 'Select' button down for a second or so in order to bring up my context menus.

One major caveat - this solution does NOT work for mouse input due to the fact that there is very little mouse monitoring available in Media Center. We can still respond to a click as per normal, but we can't capture a click-and-hold or a right-click.

The biggest problem is that this involves a significantly more complicated setup, because the 'Clicked' member of the 'ClickHandler' class only responds to the user releasing the button. We can't capture the start of the button press. So we basically have to throw out 'ClickHandler' and replace it with something else.

A suitable handler is 'KeyHandler'. But with a KeyHandler, we can't capture mouse input - which causes the issue with the mouse that I explained earlier.

So, we need...

A KeyHandler to handle the 'Space' button.

A KeyHandler to handle the 'Enter' button.

A ClickHandler to handle mouse input.

A Timer to gauge the amount of time our button has been held.

A Bool to set if the timer has expired.

These can be created as locals...

<cor:Bool Name="TimerExpired" Bool="false"/>

</Locals>

So, the first step is to recognise that our button has been pressed. We will do this with the Space handler, to begin with.

Unlike the ClickHandler.Clicked, SpaceHandler.Pressed turns on the moment we press the button, and because we have disabled 'Repeat' when we declared it, it will STAY on for as long as the user holds down the button.

<Rules>

</Changed>

</Rules>

This will capture when the space-bar is pressed. But this is a changed condition, which means that it will be fired both when the button is pressed, and when the button is released. So in order to ensure the button is being pressed, we need to add a condition to the rule.

</Conditions>

And finally, we need to turn on the timer.

</Actions>

There. The next step is to handle the timer 'ticking' to indicate that we have been holding for long enough. Our first step is to deactivate the timer, then we set the boolean Local we created.

</Actions>

</Changed>

Finally, we need to respond to the release of the button. We do this with the exact opposite statement to the one we used to detect the start of the click.

Once we have created our rule, we then simply disable the timer (when the timer has not yet expired) and perform any actions required.

</Conditions>

</Actions>

</Changed>

There are two options with how we behave. If we want to respond to our 'held down' event immediately once the timer has expired (ie. it is bringing up your popup window immediately after 1 second, even if the user has their button still held down) - you do this by adding the action code to the 'Tick' handler. The other method is to respond after the user releases the button, which you do by copying the above rule and changing the 'TimerExpired' test to 'false'.

You can of course add any animations, sound effects etc. that you want to any of the rules above.

Another Quick Warning

If your popup/context menu contains elements that respond to a button press and you bring up the popup as part of the timer event (ie. as soon as the timer ticks, the popup appears), you'll find the user still has their Select button pressed down.

When the user RELEASES their select button, the ClickHandler on the currently selected item is triggered. This is BAD.

I have an established work-around for this. I create a boolean property on my main Interface object called 'StillHeldDown'. In the rule that starts the timer, I set 'StillHeldDown' to 'true', and turn it off in the rule that detects that the button was released early.

In the 'Clicked' rule within the UI items that are in my context menu, I check for 'StillHeldDown'. If it's 'true', I set it back to 'false'. If it's 'false', I do whatever I would normally do with a mouse click.

This basically creates a buffer that 'eats' the first Clicked event that occurs on the item

TV Pack Installing & Startup Issues

IgnoranceIsBliss — Sat, 15 Nov 2008 02:38:00 GMT

Two things I'll mention today - one is to do with development, one is a tip for those having trouble with Media Center startup since installing the TV Pack.

Part 1 - Installing on Media Center with the TV Pack Installed

'Fiji' - or the Media Center TV Pack - is a MUST have for Media Center owners in Australia. I find it criminal that it's only available to OEM's, but on the other hand I can also see it breaking some peoples configurations, since you do need to scan for new channels, play with your lineup and it interrupts 3rd party Guide applications, which are required in this country.

Installing onto Fiji is done exactly the same way as usual (ie. using an installer based on the WiX example that comes with the Media Center SDK) - but there is a small glitch with the example.

For Fiji, Microsoft changed the version number from 5.0 to 5.1 - and unfortunately, their example checks for a version number of '5.0'. This means that any installer based on the SDK example won't install on Windows 7 or on the TV Pack.

The easiest fix? Just delete the condition from your WiX file. Simply search for the text '5.0' and erase the condition. It appears in TWO different places in your installer, so make sure you get both.

Part 2 - Startup Issues Since Installing Media Center

Since installing the TV pack myself, I've been having two issues. The first is that all of my TV-Pack equipped Vista PC's are waking themselves up at approximately 4:00am, but that's not the actual problem I'm discussing here.

The problem I had is that Media Center was starting up when the 'Welcome' screen was still showing. Technically, this sounds like a great idea since it should give you a seamless transition into Media Center after your machine starts up. Unfortunately, it was starting up so early that the video card didn't seem to be ready for it (or appropriate drivers were not installed quite yet) meaning that I would get an error message and when Media Center finally DID turn up, it was in the ugly 'GUI' mode (no smooth animations, glitchy playback etc.)

How did I fix it? I grabbed a small utility called "Startup Delayer" from "r2 Studios". I'm not going to rabbit on too long about it - this isn't an ad - but it helped me resolve the problem by delaying the startup of Media Center until the Welcome screen had gone and my video drivers were fully up to speed. It also improved my startup time slightly. If you are having a similar issue, try downloading it from http://www.r2.com.au/software.php?page=2&show=startdelay

Addinistrator - Now Shipping

IgnoranceIsBliss — Fri, 07 Nov 2008 02:44:00 GMT

For those who haven't noticed, my new applications are shipping with Addinistrator.

The basic idea of Addinistrator is allowing users to have much better control over their Start menu and other entry points for Media Center applications. It lets you choose which two Start menus are visible, create your own start menus and edit the contents of existing ones, delete and shuffle programs around etc.

It also interfaces with my existing products, EMUCenter and Yougle.

If you have Yougle installed, Addinistrator allows you to add internet radio stations to the 'Radio' menu (Yougle is used to actually play the streams) without having to stuff around with MCL files. Just enter the name, URL and a thumbnail image and you are away.

If you have EMUCenter installed, Addinistrator allows you to create Start and Program menu entries for non-Media Center applications (windows applications, emulators etc.). Simply choose 'Add Program' and you can launch Internet Explorer, your favourite games, MSN chat etc.

Only the 'Work In Progress' builds currently have Addinistrator - if you feel like trying it out, give it a go.

I'm thinking of making the program available to the development community as a whole. One other feature I'm thinking of adding is making it a replacement for 'RegisterMCEApp' - allowing you to register programs through Addinistrator. Why? The main reason is a simple one - I'd like to make Start menu creation and the sort order of your Start menu items part of the XML file format, to allow applications to register themselves without needing to make seperate x64 and x86 installers to make the required registry entries.

There's also another upshot - users will be warned if they are about to lose a strip from their Start menu and Addinistrator will let them choose which strips they want to keep.

If you would be interested in bundling Addinistrator, or tying your package in to offer more functionality, please let me know by posting a comment.

Interacting with Media Center

IgnoranceIsBliss — Thu, 06 Nov 2008 21:39:00 GMT

I haven't really covered how to interact with Media Center itself through much of these posts.

Although there isn't a lot you can actually get Media Center to do, it's often vital to make your application play different types of media or have some control over the Media Center experience - such as creating notifications, playing sounds etc.

All of this is done through the AddInHost object - http://msdn.microsoft.com/en-us/library/aa468251.aspx.

One of the nice touches is that the AddInHost class has a static member called current that contains the interface to Media Center - you don't need to go to any great lengths to access it. Within the AddInHost object are a number of properties that give you feedback or control on the state of Media Center. They are all relatively well documented in the SDK, so I'll only cover the most important.

MediaCenterEnvironment (http://msdn.microsoft.com/en-us/library/bb189320.aspx ) is used to perform real control over Media Center. You can use this class to launch new addins, to navigate to new pages, play media and show dialog boxes equivalent to the normal Windows 'MessageBox'. It can also be used to get and set properties, such as volume levels, mode of the screen, parental controls level etc.

To navigate to a new MCML page, you use the following line...

AddInHost.Current.MediaCenterEnvironment.NavigateToPage(<page>)

To show a message - which is very good for debugging - you can use...

AddInHost.Current.MediaCenterEnvironment.Dialog(<text>,<title>,<buttons>,<timeout>,<ismodal>)

This function is very similar to the Win32 'MsgBox' or the .NET MessageBox class. The only really new thing is the 'IsModal' property, which is used to tell Media Center if the program should halt and wait for a response (true) or if it should allow the program to continue in the background (false).

And one of the most important....

AddInHost.Current.MediaCenterEnvironment.PlayMedia(<mediatype>,<media>,<addtoqueue>)

This function is used to play a media item. The actual 'Media' parameter takes the URL/path to your media. You should use 'addtoqueue' only if you are adding music - using this parameter with other types of item can cause issues.

This is one of the very few functions you can use that will actually crash Media Center, so be careful. All other functions are completely isolated from Media Center, so if you crash you only take out your addin rather than Media Center as a whole. With PlayMedia, you can bring down the entire Media Center experience by playing invalid files. Please take care with all URLs you pass to this function.

For videos or pictures, after a call to PlayMedia you may want to consider calling AddInHost.Current.MediaCenterEnvironment.MediaExperience.GoToFullScreen - which (fairly obviously) will show your media in fullscreen, rather than appearing in the bottom corner of your program.

A word of warning for people debugging in MCMLPad - because your addin isn't launched from Media Center with MCMLPad, you will still have access to the AddInHost object, but the current member will be empty. If you are planning on debugging with MCMLPad, please ensure you place a check that AddInHost.Current is not null before each call that uses the object.

An Incomplete Book - But Still A Book

IgnoranceIsBliss — Wed, 02 Jul 2008 00:24:00 GMT

OK - I've put an incomplete version of the book online at the Push-A-Button website - http://push-a-button.com/products/books/index.php

You are welcome to download it and have a read. If you like it or find it valuable, PLEASE consider donating, since it takes quite a bit of time to write up a document like this.

It's 150 pages long and goes into much more detail than the blog here. It covers most of the same topics, but in a slightly different way. I've only started on the "Building a Real Life Application" section.

If you want to get rid of the watermark or would like the ability to print/comment etc, if you donate I'll make one available to you.

If you have specific feedback about individual sections of the book (eg. examples that are incorrect, poorly-written or poorly explained sections or just places where it doesn't quite 'work' for you) please sign up to my forums at http://community.push-a-button.com and post on the new "Programming in Vista Media Center" forum.

Book Format Options

IgnoranceIsBliss — Fri, 30 May 2008 12:11:00 GMT

OK - people seem a little interested in the idea of a book, and "Cheap PDF" seems to be popular. Personally, I'm thinking the same route because it allows be to embed hyperlinks into the document - and the book is best used when you have Visual Studio available to play with right then and there, anyway.

So then people have a few options. I'll open a poll to allow people to vote on what they think would work best for them.

http://thedigitallifestyle.com/cs/forums/7168/ShowThread.aspx

Would people be interested in a book?

IgnoranceIsBliss — Fri, 30 May 2008 00:38:00 GMT

I'm working on a Media Center development book - would people be interested in buying a book on how to develop applications in Media Center?

If so, what would be more appealing? A large bound volume, or an inexpensive PDF copy?

I'm sitting on 130 pages at the moment, and I've only just covered where the blog is up to now, so there's a LOT of depth and sample code in the book so far.

Popup Menus & Background Objects

IgnoranceIsBliss — Mon, 26 May 2008 22:59:00 GMT

Some people have had issues trying to make 'popup menus' in Media Center applications.

Since I've been adding a similar function to EMUCenter to support some of the new features, I thought I'd cover how to do it. The answer is actually very straight-forward.

The main problem with pop-up menus is the fact that they tend to pop-up over your existing interface, and Media Center isn't particularly good at dealing with overlapping objects and managing focus. In fact, you should avoid overlapping objects in Media Center at all costs, since it can cause some slightly unusual effects, and different focus rules for different input devices (eg. if you have overlap, the remote control tends to focus on the smallest or closest item when you navigate, while the mouse tends to focus on the largest.

So - you have to stop focus from falling onto any of the controls 'beneath' your popup. Many people try to do this by creating an invisible panel control that covers the entire screen, with the idea being that it is a single object that should 'catch' the focus. By setting the Navigation policy to 'ContainAll', you'd imagine that it would prevent anything else from getting focus.

Unfortunately, it doesn't really work like that, although this solution MAY work for the mouse, it doesn't work for the keyboard/remote.

The other technique people use is trying to use the Navigation policy of your popup menu to prevent objects outside the menu from being selected. While this can work for your remote/keyboard, it won't prevent your mouse from changing the focus.

So, what's the best solution?

It's actually pretty simple. In all of your objects that respond to mouse focus, you'll have a Default rule that either turns 'KeyInteractive' on, or sets a property that turns it on for you, such as MakeTopMostOnFocus.

All you have to do is make a shared variable - such as a BooleanChoice - that you use to store if a popup is visible, and then turn the KeyInteractive property on and off based on this variable.

For example, I have a string called "PopupName" on the main class of my application. Whenever the string is empty, all of my main interface items have their KeyInteractive property set to true. But as soon as that text becomes something other than an empty string, all of my objects (other than in the menu itself, of course!) become NON-interactive.

For example:

</Actions>

</Condition>

</Actions>

</Condition>

A Geek Fantasy

IgnoranceIsBliss — Fri, 02 May 2008 01:51:00 GMT

Sorry, this isn't actually a development blog post - it's just me, geeking out at this - http://www.nikkoamerica.com/nhe/dvd_projector_video.html. My GOD, that's so damn geeky, and I want one BADLY.

To bad they'll never reach Australia.

Your Programs Look And Feel

IgnoranceIsBliss — Wed, 26 Mar 2008 01:46:00 GMT

Microsoft are of the opinion that users of Media Center applications do not want 3rd party apps to look like or work like Media Center itself.

This is at odds with 99% of the feedback I've ever recieved as a Media Center developer, but I quote Charlie Owen from MS -

The pool of customers we listen to and try to satisfy is much larger than folks realize. 'Customers want a unified experience' is not supported by the broad data I see everyday.

- Chalie Owen, Microsoft (from the Media Center Sandbox)

Now, I'd like to ask a question simply for data-gathering purposes. Do you - as a Media Center user - want your applications to integrate completely with the Media Center experience, looking and working the same way, or would you prefer every application to have a unique look, feel and method of interaction, with a clear seperation of "Media Center Mainstream" and "3rd Party App"?

Microsoft has offered their reasoning why they don't want to give developers access to components of the system, and although I feel it limits their developer base, I don't feel too bad about that decision, because it does force users to really understand the MCML system. However, the statement that users out there don't WAN'T to have a consistent interface seems unlikely given the real-world feedback I've recieved.

So - I've posted a poll. Please, answer it yourself. And if you can, spread the word about the poll and encourage answers from other users of your Media Center PC - I want to get serious feedback from as many people as I can about this particular issue.

http://thedigitallifestyle.com/cs/forums/ShowThread.aspx?PostID=6021#6021

Reasons Why There Is Not A Unified Interface:

http://blog.retrosight.com/WhyOurLookFeelIsntAvailableToApplications.aspx

Arguments FOR a Unified Interface (My Personal Perspective, And Of Users I've Dealt With):

I know that for every family with a Media Center PC, there's usually 1 or 2 tech-savvy people who have no trouble picking up the basics of navigation in moments. But there is also almost always another 1-2 people who are technophobes, and simply will not access something that is unfamilliar to them. I also know that for every program I have ever written in Media Center, the first thing pointed out in any review or user feedback is "Make it look more like Media Center".

Designing Your Interface - For Beginners

IgnoranceIsBliss — Mon, 17 Mar 2008 04:37:00 GMT

Ok - many people still have some trouble visualising their interfaces when it comes to writing their MCML. They don't know where to start, or what to do. I'm going to take a page from an MCML application and show you how to 'de-construct' it to figure out how it's made.

The basic trick is to imagine you are drawing the page with a vector graphics program. If you have Adobe Illustrator, Harvard Graphics, or even MS Word, you should be able to make some basic vector graphics. For those who don't have any of these programs, try the open-source project InkScape.

In vector programs, you only have some fairly simple primative objects - boxes, circles, text & graphics - to work with, in a very similar way to MCML. And most of the adjustments you can do to these objects is also similar to MCML, the most important being scaling and rotation.

So if you draw your interface in one of these vector programs, you almost naturally discover how to replicate them in the Media Center Markup Language.

Let's take a look at a basic screen from EMUCenter.

Step 1 - Isolating The Elements

The first thing to do is isolating each seperate element we see on the screen. If it's positioned independently - eg. it's doesn't seem to be physically part of another element on the screen - then we basically draw a 'box' around it. We will want to make a UI for each of these.

By looking at our screen, we can come up with several seperate elements.

Background Text (saying 'emucenter')

Filter Bar (top left corner)

Position Bar (bottom right corner)

Selected Game Info (bottom center, underneath the selected game)

Games

If you were drawing these in a vector program, you'd build these items on different layers or, to make them easier to move around and get their positioning right, you'd group them. Everywhere you would put a group or a layer, you build a Panel control, or even more likely a seperate UI.

So each of the sections we isolated above would make perfect UI elements.

Then you attack each UI as a completely seperate, indpendent creature. Remember at all times that there are only really three object types they could possibly be - Text, Graphic and ColorFill. Anything that isn't writing or a solid square of colour is almost certainly a Graphic object - it's as simple as that.

The Background Text:

The background element is self-evident - we've already looked at how to make these earlier.

The Position Bar:

The position bar LOOKS as if it's a single item, but with two numbers that change and a slash that stays where it is, you can actually build it out of three seperate Text objects. You can but them together by putting them in a HorzontalLayout.

The Filter Bar:

The filter bar is similar - single Text objects that appear in a HorizontalLayout, this time with a bit of spacing between them. You'll of course have to put these elements in a Scroller though, to make it scroll, and you'll need to set the LockedPosition, since the selection doesn't actually move - the selection stays still and the options move around it instead.

Selected Game Info:

Again, three Text objects. This time they are going DOWN the screen, so we need a VerticalLayout.

Games

No big surprise, it's like the filter bar - Graphic objects (one normal, one inverted and faded by a Clip object), repeated in a Scroller, with a HorizontalLayout.

Of course, there's more work in making the selection work correctly, making your scrollers and repeaters happy etc. But when you get down to it, it's just a handful of UI's, each with a few text objects or graphic objects. And if you had drawn it, you'd know exactly what you need to do to make the reflections work.

So if you can't visualise it without help, follow this guide and draw your interface in Illustrator, InkScape or it's friends first, and the solution will be much clearer, and you'll have a nice prototype to work off.

Changed or Condition, Default or Binding - Which to use?

IgnoranceIsBliss — Sun, 16 Mar 2008 23:24:00 GMT

There is a bit of confusion out there about which rule to use in which situation when writing rules in your MCML application. I'll just quickly cover the scenarios here...

Default vs Binding Rules

To be honest, you can actually use a Binding rule as a Default rule fairly seamlessly, but it's not really required and adds an (admittedly very small) amount of overhead you don't really need.

The basic difference is that a Default rule is evaluated only ONCE when your application loads. It is never again referenced or used. Binding rules are re-evaluated every time the value of the Source changes. Although pretty insignificant, this means a little bit of memory or a little more time used every time that the property changes.

OK, it's a minor point - but worth bringing up. The second point is a bit more serious.

Changed vs Condition Rules

Some people are likewise confused between the Changed and Condition rules in MCML. The difference in these is pretty simple, but important to know.

A Condition rule can be and often is constantly re-evaluated by Media Center as long as the condition is true. This is excellent for when you are changing the appearance of an object, because you can tell Media Center to make objects visible, brighter, change their colour or text etc. However, because the rules are continually re-evaluated and re-run, there are some things you should NOT do in the Condition rule. You should avoid triggering any event, such as an animation or Invoking a function, that should only happen ONCE.

For this sort of one-shot event, such as mouse clicks, a Command object being invoked or reactions to events from your C# code, you should use the Changed rule.

Changed rules are only run once, when FirePropertyChanged is called. This means that it doesn't matter how long the user chooses to hold the mouse button down or the event remains in it's new value, the rule is only run the one time.

You can further specialise it by adding more conditions.

Let's look at a quick example. In Yougle, I have a "Feedback" section that tells the user what is current going on. When I start a particular function, I set a string to "Starting Embedded Playback", to let the user know that Yougle is working on playing back their media. This triggers the following condition...

</Actions>

</Condition>

The above rule means that for as long as the Feedback's "Text" property anything OTHER than an empty string, the text will be visible.

But what if I want to do something a little more important? What if I wanted to Invoke a function at the same time, but only when the status actually changed to "Starting Embedded Playback"? Remember - this text value could also be any of a hundred other values, so we need to deal with this condition in particular.

If I put the code in a <Condition>, I could find that my function is Invoked several times. To avoid this, it's much better to put it in a <Changed> rule...

</Conditions>

</Actions>

</Condition>

So there you go - using ONE property, but both Changed and Condition rules, you can react to events both when the value changes and while the value is set.

And we've also seen how we can further narrow down rules so that we can deal with a change to a specific value.

Writing A Yougle Source

IgnoranceIsBliss — Thu, 07 Feb 2008 21:25:00 GMT

OK, although this isn't about GENERAL Media Center development and is more of a self-serving plug, I'm going to go ahead anyway and show you how to write a plugin for Yougle.

I get a lot of requests for particular video, audio and (to a lesser extent) picture sources. What many people don't know is that Yougle is extendible - 3rd party developers can write their own sources to add more content to Yougle.

So I'm going to show you the basics of creating the Yougle source to allow you to browse the Media Center Show podcasts.

Development of a Yougle source must be done on a Windows Vista installation that has Media Center included - you can use any .NET language, but our example with use C#, the language Yougle Vista itself was written in.

You also need to have Yougle itself installed.

Finally, create a new Class Library in the .NET language of your choice.

Now you need to tell Visual Studio that your program is going to be using some of the classes defined by the Yougle Vista application. You can do this by looking in the ClassWizard, finding the 'References' section, right clicking and choosing 'Add Reference...'.

The trickiest part of the whole process is coming up. For some reason that I'm sure makes a lot of sense but I don't understand myself, the "References" list in Visual Studio is NOT loaded from the set of assemblies you have in your Global Assembly Cache - they are instead loaded from a completely different location. There are a couple of methods you can use to resolve this particular issue, but the method found here - http://www.devtopics.com/adding-assemblies-to-the-visual-studio-add-reference-dialog/ - isn't bad. You can use this to point to the folder where you have installed Yougle Vista - or, if you can not find the Yougle Vista DLL, you can download it from http://www.push-a-button.com.au/community/index.php?action=tpmod;dl=item47 and put it wherever you like.

OK - now this is done, and we need to start actually writing our code.

It just so happens that there's an example project and example code on my website at http://www.push-a-button.com.au/community/index.php?topic=92.0 - this gives you the complete sample code for the Flickr picture source. So copy all of this code and paste it into your application.

A Yougle Source is basically just a single class - based on the YougleSource class - that you customise to load data from your own provider. There are a couple of functions we need to override to do this properly...

public class MediaCenterShowVid : YougleSource
{

        public MediaCenterShowVid()
{
//Set up all of the details of this source - description, name, picture etc.
        }

public override bool Load()
{
//Load all of the basic category, filter & sort information for the sliders at the top of the screen
        }

public override bool GetMedia(int page)
{
            //Get a list of media (pictures, videos, audio streams etc.)
        }

public override string Play(string URL)
{
//If required, take the URL discovered in the GetMedia call and convert it into something that we can actually download
        }
    }

And that's it - override those 4 functions, and you're away!

So how do we do this in the case of the Media Center Show? Well it's actually pretty easy when you get right down to it. Let's do these in order...

The Constructor

Nothing too shocking here, really - you use the Load function to set all of the major information about your source, so that Yougle knows what to show in the list of sources.

        public MediaCenterShowPodcast()
{
//Set up all of the details of this source - description, name, picture etc.

_Name = "The Media Center Show";                                    //The name of the source
            _Description = "Watch Ian Dixon's Media Center Show";       //The description of the source
            _Type = YougleSourceType.audio;                                      //The type of media available (picture,video or audio)
            _Rating = YougleSourceRating.children;                              //The maximum audience rating
            _ImageURL = "http://thedigitallifestyle.com/images/albumcoversmall.png";
                                                                                                    //A URL for an image to use

}

The Load Function

This function is responsible for loading all of the information that appears in the 'pivot bar' at the top of the screen - your sort orders, filters, channels and categories.

There are TWO pivot bars in Yougle Vista. The top one is called the CATEGORY bar. Each category has one or more OPTIONS to choose from, which are shown on the lower pivot bar.

As an example, 'Sort' can be a category - with options being 'by popularity', 'by date', 'by views' etc.

Where there are multiple categories, they work and are reset in a left-to-right manner. For example, let's say the first category was 'sort', the second was 'period' and the third was 'category'. In this case, you can effectively 'add' these three options together (eg. sort="By Popularity", period="Today" and Category="Animals") to create more complex queries - in this case, 'Show Me All Of The Animal Videos That Were Popular Today".

However, when you change a category value, all of the categories to the RIGHT of that one are reset. For example, if you had the earlier example and changed "period" to "week", the Category would reset to "All".

Anyway, all of this isn't particularly relevant to us, since we will be getting all of our information from the Media Center Show RSS feeds - and there is only one real sorting option, which is "By Date".

        public override bool Load()
{
//Load all of the basic category information for the top of the screen

//There is only really one sort order - By Date. Add it.
YougleCategorySet Cat = new YougleCategorySet();
Cat.Name = "sort";
Cat.Options.Add(new YougleOption("by date", ""));
Categories.Add(Cat);

            return true;
}

Why bother adding anything at all? Well, Media Center is a troublesome beast some times, and you MUST have at least ONE option in every list - so you have to have at least one category, and each category must have at least one option - or your source will crash.

The GetMedia Function

This function is the core of Yougle Vista - it gets the media we want to offer to the user. In this case, it will be offering the users the 40 most recent Media Center shows.

Each media item is stored in a "YougleMovie" object (yes, I really should have gotten around to renaming this, but it was originally a video-only product), and each YougleMovie object has some basic attributes, such as name, thumbnail image, description and one or more URLs.

Let's start the function...

        public override bool GetMedia(int page)
{
            Movies.Clear();            //ALWAYS do this

Now, we are getting all of our information from an RSS feed from FeedBurner. ( http://feeds.feedburner.com/TheDigitalLifestyleVideoShow ) - so the very first thing we need to do is actually download the thing...

HttpWebRequest Request = (HttpWebRequest)WebRequest.Create("http://feeds.feedburner.com/TheMediaCenterShowPodcast");
HttpWebResponse Response = (HttpWebResponse)Request.GetResponse();
TextReader Rdr = new StreamReader(Response.GetResponseStream());
String Content = Rdr.ReadToEnd();

This code downloads the current feed from Feedburner, and loads it into a String called 'Content'.

RSS feeds are simply XML documents, so we should be able to happily load this feed into a XMLDocument object...

XmlDocument Doc = new XmlDocument();
Doc.LoadXml(Content);

XmlNodeList Items = Doc.GetElementsByTagName("item");

foreach (XmlNode Vid in Items)
{
YougleMovie Movie = new YougleMovie();

Movie.Name = Vid.Attributes["title"].Value;
Movie.Description = Vid.Attributes["pubDate"].Value;
Movie.Thumbnail = http://thedigitallifestyle.com/images/albumcoversmall.png";

OK - now we have a small issue. We aren't given a DIRECT link to the video in it's own tag. Instead, it's embedded inside the Description tag. On the plus side though, it's the only ".mp3" file in the whole text. So perhaps with a regular expression, we can track it down. ( I use Expresso from Ultrapico, which is an excellent program for creating and debugging .NET style regular expressions, which are slightly different to the Unix/PERL style ones you may be familliar with - get it from http://www.ultrapico.com/Expresso.htm ).

So the regex that finds the 'mp3' file in the description will be something like...

http://thedigitallifestyle.com/audio/([^"]*?)"

Which means we can now use that regex to find the MP3 file.

undefinedhttp://thedigitallifestyle.com/audio/

Match Mch = Rg.Match(Vid.Attributes["Description"].Value);
if (Mch.Success == true) Movie.URLs.Add(new YougleMovieURL(Mch.Groups[1].Value, "video/wmv", true));

Movies.Add(Movie);
}

Of course, it would be much more efficient to create the actual Regex OUTSIDE the 'while' loop, to stop it needing to be created again and again. I've added it there simply because we are doing this step-by-step.

And finally for the GetMedia function, we return a value. We can return either TRUE or FALSE, with 'True' meaning that there is more content waiting to be downloaded (note how the GetMedia function is passed a 'page' parameter? This is so you can download media in seperate 'pages', the same way you view them on a web page). Since we only have access to a single RSS feed and can't move through it, there won't be any more pages to come - so we return FALSE.

return false;

}

The Play Function

The play function is basically there to help speed up the process of locating your media. Quite often, the direct link to the actual video file (the downloadable file, or the actual streaming address) isn't quite as straight forward as it could be. For example, YouTube don't actually publish the location of the .FLV files for their videos - they need to be sourced using special techniques or 3rd party tools ( such as http://www.keepvid.com ) to find the file.

It would take WAY too long to track down all of these direct links as part of the LoadMedia function, so the Play function is called immediately before Yougle is ready to play or download your video.

If we were writing the Media Center Show video source, we could end up having a more difficult job to do here - because we may have to get a link to the web page on either YouTube or MSN Soapbox for the episode. To translate that into a actual URL to either the video file (avi, flv, wmv or asx) would take a little more work. (Luckily, Ian always offers a Direct Download option too, so it should be easy to write a video downloader!)

In this case, we have a situation where we have the actual MP3 file for Media Player to use, so this is really easy.

public override string Play(string URL)
{
//Rebuild the original URL...

String UR = "http://thedigitallifestyle.com/audio/" + URL;

//'UR' now contains the actual address to the actual MP3 file, which Media Center will play...
return UR;
}

We could have just stored the full URL in our YougleMovie object and simply not overridden this member at all, but I wanted to show you how it works, for possible future projects.

And we are pretty much done!

If you have a site you want to work with, but you're having trouble getting direct links to the video or audio files (pictures are usually easy), you'll find that there are a number of websites that have the handy ability to translate web page URL's into video URL's...

http://max.subfighter.com/flv/downloader.php

http://www.keepvid.com

Going Around in Circles

IgnoranceIsBliss — Wed, 23 Jan 2008 01:26:00 GMT

Here's an interesting little tidbit, thanks to Charlie Owen from Microsoft and the Media Center Sandbox.

If you are using a Repeater, you have the option of allowing it to either Wrap or Repeat when you get to the end of it. This is great for long lists, since you can simply jump back to the start or swing over the end or back to the start when you need to.

However, it causes some problems if you are using RepeatedItemIndex. The Value of the index does NOT loop around. So if you are at the first item (index 0) in a 20 item list, the item before it does NOT have an index of '20', as you'd expect if it wrapped around - it actually has an index of -1.

If you are trying to update the ChosenIndex property of a Choice object with this value, you just crashed your application. Congrats :)

BUT - RepeatedItemIndex has more than just 'Value', it also has a second property called SourceValue. THIS is the one you want to use, because the SourceValue is the actual index into the array.

So if you discover this problem, we now have a solution! Thanks to Charlie, for his help with this thread - http://discuss.mediacentersandbox.com/forums/thread/6183.aspx

Question Answered: Menu's and Sub-Menus

IgnoranceIsBliss — Sat, 12 Jan 2008 05:13:00 GMT

To go with the last post topic, Cowboy2007 asked me a question about how to make sub-menu's in MCML. I've discussed the basics of this in the following post, for those who are interested.

http://thedigitallifestyle.com/cs/forums/thread/3835.aspx

Control Interaction - Menu's and Sub-Menus, using Invoke

IgnoranceIsBliss — Tue, 18 Dec 2007 22:14:00 GMT

Although this really isn't really very difficult from what's been explained before, some people have trouble with getting their controls to interact - to change one control based on another.

So I thought I'd spend a little time covering the basics, so that people who are having trouble can get a walk-through of how to do it.

The most common problem is in making a list of items appear based on the state of another list of items. A simple example of this is the menu in a program (press 'ALT' if you are using IE7 and you'll see what I'm talking about).

In this case, we have two menus - the contents of the sub-menu depends on what is selected in the main-menu.

Well, in previous blog posts we have already seen how to load an on-screen list using a Repeater in MCML and a Choice in our C# object. So all we need to do now is extend it slightly to involve TWO repeaters, and TWO Choice objects, then link them together.

So let's say we have to Choice objects, once called MainMenu and the other called SubMenu.

To display these on the screen, we need to create the UI's for the Repeater/Scroller combination (with the ScrollingData and ScrollingHandler of course, so we can handle the scrolling correctly - see the earlier blog posts if you don't quite follow).

So we have our MainMenuUI and SubMenuUI, which are the UI's containing our scroller and repeater. Now we build two UI's for the objects within the scrollers - let's call them MainMenuItem and SubMenuItem.

We give these Item UI's a property called Label

<cor:string name="Label" cor:string="$Required"/>

</Properties>

So, we have the following layout...

Base Item

MainMenuUI

MainMenuItems...

SubMenuUI

SubMenuItems

And finally, we load both items from our C# code - filling the ArrayListDataSets.

But - what about making them work WITH eachother? Well, that is done - like ALL communication between UI elements in MCML - via shared properties.

Now there are a variety of ways to do the next part of our task. I'm going to show you a simple method that will work both with and without a Choice object being used to load the data - this way, if you ever need to replicate this situation with a FIXED list of items, you'll still know how it's done. But just to cover the options, you could...

* Make your own subclass of Choice and use it instead of normal Choice objects for the content of your main menu. By overriding the OnChosenChanged member of the Choice class, your code will be automatically called whenever the ChosenIndex of the Choice object is changed.

* Make a Command object that is Invoked when a menu item is selected. By setting the description of the Command object to the Label of the MainMenuItem, you can then communicate not only that the selection has changed, but what the new selected item actually IS. Note that to make this work, the Command object must be shared between all of the UI components - it would be a property of the Base Item, and passed as properties through to all other UI elements.

* Invoke a function on your main class (which is what I'll be showing you).

So, we will be doing the last - and probably the simplest - of the techniques. The other methods also have their uses - the first one is completely seamless when done correctly and requires virtually no code on the MCML side, while the 2nd one is perfect if your C# code is not actually involved in the loading of more information (eg. if you are switching between fixed lists by changing the Visible property on sub-menus) because it's entirely contained in MCML, with no code on the C# side.

This technique requires both C# and MCML code, but is a little more intuitive.

Let's say our main class (the ModelItem class we do most of our C#->MCML interaction with) is called MainClass. What we can do is add a new member function, called NewMenuSelected.

public void NewMenuSelected(String MenuName);

This function takes a single parameter - the name of the menu that is currently selected. It just so happens that our UI already has a property called Label, which is the name of the menu. So all that is left is to get our MainClass object to the SubMenuUI. This means that both the SubMenuUI and SubItem elements need a property...

<a:MainClass name="MyClass" a:MainClass="$Required"/>

</Properties>

So now, when our MainMenuItem objects get the focus, we want it to call our function....

<Rules>

</Actions>

</Condition>

</Rules>

This means that when our MainMenuItem gets the focus (meaning that it is the active menu we want to see) then we call our C# or VB object and load the new contents of our SubMenu.

public void NewMenuSelected(String MenuName)

{

_SubMenu.Clear();

switch (MenuName)

{

case "File":

_SubMenu.Options.Add("Open");

_SubMenu.Options.Add("Save");

_SubMenu.Options.Add("Save As");

break;

case "Edit":

_SubMenu.Options.Add("Copy");

_SubMenu.Options.Add("Cut");

_SubMenu.Options.Add("Paste");

break;

}

FirePropertyChanged("SubMenu");

}

So hopefully you've seen how these objects can be combined to control the contents of one repeater with another.

Multithreading in MCML

IgnoranceIsBliss — Sun, 09 Dec 2007 23:32:00 GMT

There are times when the response from a click is going to take a little while - fetching information from a web page, downloading a file, queuing a video...some of these things take time, and the user doesn't like to have their Media Center 'lock up' while they are waiting for it.

When this happens, it's time to bring out the good old Thread class once again, and start playing.

There are a couple of things you should be aware of though before you write your threaded application.

If you have some experience with Windows Forms applications (and I hope you do - it will make your Media Center development life much easier), you will know that it is impossible to change the text or the appearance of a control from any thread other than the thread the window was opened in (eg. the Application Thread).

The same rule applies to Media Center applications and the FirePropertyChanged function of ModelItem. If you are going to call FirePropertyChanged, it must be from the application thread, otherwise it will fail.

Note that if you call FirePropertyChanged from the wrong thread, you probably won't get an exception like you do with Windows Forms - the notification will be 'lost' and you may start getting erratic behaviour out of your application.

So how do you manage to change a property value then? Well, you create a member function that takes a single parameter of type 'object' (even if you don't USE the parameter, create it) and then call...

Application.DeferredInvoke(<function name>,<parameter>);

The 'Application' object is a global one, and the DeferredInvoke function tells Media Center and the .NET system to run the <function name> function in the APPLICATION's thread, next time that thread is available for a little extra work.

I personally like to make my work even easier, by using the following code in any property that I expect to be accessed from a thread other than the main application thread...

In The Object That Has Properties....

internal void FPC(object Val)

{

String Value = (String)Val;

if (Application.IsApplicationThread() == true)

FirePropertyChanged(Value);

else

{

Application.DeferredInvoke(FPC,Value);

}

The Actual Property Itself...

string _MyStringValue;

public string MyStringValue

{

get { return _MyStringValue; }

set

{

_MyStringValue = value;

FPC("MyStringValue");

}

};

Because the FPC (which is short for FirePropertyChanged) actually conforms to the format needed to pass to the DeferredInvoke function, it's actually recursive. If you try to set the MyStringValue property, FPC is called.

If FPC detects that it has been called from the application thread (by using the IsApplicationThread() command), it simply calls FirePropertyChanged. If it finds that it isn't in the application's thread, it calls itself again using DeferredInvoke. The 2nd time it runs, it WILL be in the right thread.

This greatly simplifies your programming, because you simply have to make sure that you ALWAYS use the publically exposed property name when you are accessing MyStringValue.

Unfortunately, while this protects you when playing with your own properties that are based on simple type (eg. Int32, String, Bool etc.) it won't help with any type that is already based on ModelItem.

These types - like IntRangedValue, Choice, EditableText, ArrayListDataSet etc. already use FirePropertyChanged internally. So you must ensure that you only actually interact with these classes in the correct Application thread.

New Website for Addins & Utilities

IgnoranceIsBliss — Mon, 19 Nov 2007 03:34:00 GMT

A new website has come to my attention for Windows Media Center addins (and useful tools for a Media Center) - http://htpcresource.com/

This site may have existed for a while without me noticing, so this may not be big news for you. But it's got a growing collection of addins that may be of interest to you - you may want to check it out!

Award Nomination

IgnoranceIsBliss — Mon, 29 Oct 2007 22:33:00 GMT

Thanks to whoever nominated this blog for the Media Center Show Awards this year.

Make sure you nominate any Media Center applications you've been using or liked - and of course, don't forget to VOTE once the list is final!

http://thedigitallifestyle.com/cs/blogs/ian/archive/2007/10/19/the-media-center-show-award-nominations-on-listas.aspx

EMUCenter 0.5.0

IgnoranceIsBliss — Sun, 28 Oct 2007 23:44:00 GMT

Oh, I've finally released the new version of EMUCenter, which has a few new bells and whistles. If people are interested, you can download it from my new community site at http://community.push-a-button.com.au (please register before you can download the programs).

EMUCenter is how I discovered the trick I covered in my last post.

There's also an testing version of the new version of Yougle available. It now supports pictures and has fixed a number of sources that had 'broken' due to site changes (or in Soapboxes case, the complete elimination of their site!).

EMUCenter Screenshots - taken by tom_son from TheGreenButton and the Push-A-Button forums.

Working With Large Scrollers

IgnoranceIsBliss — Sun, 28 Oct 2007 11:01:00 GMT

This is a reasonably advanced topic, but since I've only just discovered the solution for it, I decided I may as well post it here so people who need the solution can use it.

Large scrollers can sometimes be a problem when you need to do large 'jumps' within them. The best example of this is the 'type-to-search' functionality that you find in the Music menu of Media Center. When you start to type the name of the album, artist etc. with either your keyboard or remote control, you will find that the selection jumps straight to the nearest matching item.

To replicate this in your own application can be troublesome.

Normally, Media Center only has two functions to use to control user navigation. The first is Input.NavigateInto. As we have seen before, every object has an 'Input' class associated with it. 'NavigateInto' requests that the current selection be changed to the object that you are Invoking the command on.

For example, if you had a button, putting the following command inside the UI for the button would result on it getting focus.

<Invoke Target="[Input.NavigateInto]"/>

For collections though, this isn't all that useful. If you wanted to select a particular item in a scroller, you'd need to put in some complex rules inside the item that check not only that you WANT the focus to change, but also compare the index of the item against the index that is being searched for. It's possible - but it's slightly ugly.

There's an easier function though. The Repeater item has a special function called NavigateIntoIndex (see http://msdn2.microsoft.com/en-us/library/bb189530.aspx ). This is a very similar function to NavigateInto, but this time allows you to pass an index number. The repeater will then set the focus to the appropriate index element.

NOTE: Be careful when setting up complex events with these particular functions. Unlike a Windows session, when navigation events like clicks and focus changes are all queued up, Media Center does not queue navigation events. So if you try to fire off two or more NavigateInto or NavigateIntoIndex calls at once, one or more of them may be 'lost'.

To work around this problem, use Timers to offset the calls to NavigateInto. For example, make the first one happen immediately and then make the others happen at 1/10th of a second intervals - or whatever works well for you.

There's one major drawback with NavigateIntoIndex and NavigateInto though. Scrollers and repeaters work together to optimise the objects on screen. Part of this optimisation is only creating the actual repeated item when it becomes nessicary to create it. So for example, if you have 100 items in your list but never scroll past the 10th item, the 100th item will never actually be created as an MCML object.

So let's say you were in your own version of the Music section, you were exploring 'Ace of Base' and decided that you wanted to look for 'ZZ Top'. If you had 100 different artists, but only 12 were on the screen, calling NavigateIntoIndex with a parameter of '100' simply wouldn't work, because as yet, the 100th index does not actually exist.

You can tweak the repeaters 'Prefetch' attribute - which chooses how many item the repeater 'pre-loads', but then you are enforcing a strict maximum possible length of your search, which not only means you are just delaying the problem, but pre-loading hundreds or even thousands of entries isn't just time consuming, it can crash your Media Center application.

So what's the trick? Well, it's not too difficult, it's just got some kinda sketchy documentation.

Each scroller has a ScrollingData attached. If you check out the documentation - http://msdn2.microsoft.com/en-us/library/bb189586.aspx - you'll find that it has a 'scroll' method. The documentation says that it takes a parameter that "is the amount to scroll". This is a little misleading. Does it mean in pixels? Pages? Centimeters?

Well, if you have focusable items in your scoller, the measurement is actually in focusable items. So by calling the Scroll method on the ScrollingData object with a parameter of 5, you will scroll forward five elements.

Because you are now moving the SCROLLER rather than trying to move the focus on the repeated item itself, the repeater now has the opportunity to create the MCML objects, which allow it to focus on them properly.

The only catch is that unlike NavigateIntoIndex, Scoll is a relative movement. So if you are on the 1st item, scrolling with a parameter of 4 will take you to the 5th item. If you are on the 6th position, a value of 4 will take you to the 10th item.

So if your repeater is based on a Choice object, remember to factor in the Choice.ChosenIndex as part of your calculation for the amount you need to scroll by.

Playing with Graphics

IgnoranceIsBliss — Sun, 28 Oct 2007 01:03:00 GMT

Yes, it's been ages...and yes, it's still not another addition to the TriviaCenter application. I do promise I'll get back to it some day, but it's a case of "Too much to do, too little time to do it in!"

Anyway, I just thought I'd throw up a couple of posts for things that have been troublesome for me over the last few stages of working on the new release of EMUCenter.

The one visual element I've never really explored in the blog is the <Graphic> element. We are going to cover it in TriviaCenter, but I thought I'd cover some of the basics here, just in case someone needed them.

Like the <Text> element, the <Graphic> element has a 'Content' attribute. This attribute is an Image object, which is a class that is part of the Media Center UI class library.

However, Media Center is pretty good about converting the Image class from various other classes. If you point it towards an image resource (such as a PNG file on the hard drive or in your resource file), then it will load it for you from that resource.

For example...

This creates an image, loaded from the 'Flare' PNG file located in the resources of our Media Center project.

To load an image from a dynamic source, you can simply use a string value and convert it to an image.

For example, if you had a C# class with a property called "MyImage", you could do the following...

The exclaimation mark is how you tell Media Center to treat the String returned by MyClassInstance.MyImage to an Image object.

You may end up wanting to rotate your image. One thing to remember here is that your rotation will occur AFTER you have physically placed the object with your layoutmanager - so for example, if you are using FormLayout, you have to position the graphic itself - and most importantly it's CenterPointPercent - in the correct location so that your rotation makes sure it ends up where it's supposed to be.

If you have trouble, rememeber to remove the rotation, reposition and try again. It can be very confusing to play with your Layout when the object is already rotated.

Addinistrator

IgnoranceIsBliss — Mon, 17 Sep 2007 23:08:00 GMT

I've started a new Open Source project, in the hope that other people are interested in contributing to it.

Installing Media Center addins is a bit of an annoyance. You've got this really pretty Media Center interface, but for people who are trying to use it simply as a home-theatre experience, installing an addin means getting out the keyboard and mouse. Even worse, once you've got the thing installed, if there's an update or a patch for your addins, you've got to leave the Media Center experience to find, download and install them - and User Account Control will be jumping up, which means you can't automate the process from the addin itself.

This is where Addinistrator comes in. It's goal is to perform a number of functions that weren't addressed by the SDK because of it's focus. The SDK is great when it comes to creating your app, but Media Center isn't all that friendly when it comes to deploying and maintaining the app (although Charlie Owen and Aaron Stebner from Microsoft are making excellent improvements to the Media Center SDK applications to make installations much simpler).

Addinistrator will also allow you run-time access to your own Start menu strip (if you have one), meaning that you can re-order and even create new entries on-the-fly to suit your users needs.

Future features may include Start Strip management, a More Programs strip and, most importantly - the ability to browse for and install Media Center applications without the need to leave the Media Center experience.

If you want to contribute, please feel free to visit http://www.codeplex.com/addinistrator

What I've Been Doing

IgnoranceIsBliss — Wed, 29 Aug 2007 13:06:00 GMT

If you're wondering what on earth I've been doing lately, I've been fiddling with some of my own projects lately.

http://www.push-a-button.com.au/downloads/BlindTimerSetup.msi - a 32 bit version of a simple poker game timer. It tells you the current blinds the current ante and how long until they next go up, with text-to-speech announcements of blind increases and warnings when they are getting near.

http://www.push-a-button.com.au/products/mce/vista/youglevista/ is the latest verison of Yougle (Yougle Vista) that has recently replaced the older Yougle 2 I linked people to on this website.

Yougle Vista currently is still in alpha - it has a number of flaws - but I thought people may want to play with it.

KNOWN BUGS:

1) Buffering for Flash Video files (such as YouTube, DailyMotion and Google Video feeds) is extremely slow - it can take quite some time for playback to start. If in doubt, press '#' to download the video rather than trying to stream it directly.

2) The X64 version of Yougle Vista can NOT play Flash Video files, so you will be unable to play videos from YouTube, DailyMotion and Google Video. This is because there is currently no FLV video splitter for 64 bit Windows, and although you are given a 32 bit copy of Windows Media Player (meaning it can use 32 bit video codecs) you only get a 64 bit version of Windows Media Center.

This may be resolved in the not-to-distant future, but right now it's going to cause problems.

3) Pressing the 'Back' to go from your video source (such as YouTube) to the Source Selection screen can cause Yougle to go slightly haywire and drop back to the Media Center start menu. I am aware of what causes this problem, but fixing it is causing me all kinds of pain.

[ for any interested developer, it is because of the fact that Choice objects raise an exception if you try to choose something outside the valid range. When I remove all of the sort entries from the list, but the user had selected anything other than the first one, the exception occurs without me having any ability to catch it, which throws the app back to the Start Menu. The resolution requires me to call two Invokes, one to force the focus of the sub-sort menu to go back to the first item, then a second one to bring focus BACK to the parent sort menu ]

Common Questions:

Q) Will it work on my 360?

A) To a limited degree. The MSN Soapbox source may very well work for you, but most others will not.

Q) Can you make it work BETTER on the 360?

A) I don't know. Perhaps Transcode360 will work...but since I don't yet have enough donations to purchase a 360 or any other Extender device, I simply don't know because I can't test this sort of thing.

Q) Can you add <insert provider her> to Yougle Vista?

A) Probably not (unless it's a REALLY good idea)...but YOU can.

When Yougle Vista goes from Alpha to Beta, I will release the SDK that allows you to quickly and easily write your own Yougle Vista sources in Visual C# Express or Visual Studio. The SDK will include complete samples of working sources, such as DivX Stage 6 and YouTube - you will be able to base your solutions on these samples.

Yougle Vista Production Video
Video: Yougle Vista Production Video

Scope in MCML

IgnoranceIsBliss — Wed, 01 Aug 2007 23:07:00 GMT

Another sandbox-related discussion (a new user, Jeff, is having some trouble wrapping his head around the MCML concept, so I thought I'd post the assistance I'm giving him).

This is about scope in MCML. I know I've covered this in the past, but this will just expand on my previous points.

Basically, this is all about the question of "I've got this nice little button UI - how do I change the text on it from another UI, or from C#?"

The first thing you need to understand is that each UI is a closed control - you can NOT access the various parts of one UI from another one. So although your button may contain a graphic, a text control and a bunch of other parts, only the button is actually going to be able to make changes to those components - nothing else can.

Every object can only contain rules that effect ITSELF or it's IMMEDIATE CHILDREN. It can't even access it's own grand-childen.

And if you don't quite follow the 'children' concept, it quite simple - if a UI contains another UI, that can be considered it's child. So - for example - your main UI contains your various panels that you are showing or hiding. Those panels contain buttons - those buttons would be the child of the panel, and the grandchild of the base UI.

Base

Menu

Button1, Button2, Button3 etc.

Panel 1

Button1, Button2, Button3

Panel 2

Button1, Button2, Button3

Each of these is a seperate UI, where Base is the first UI in the file, Menu is a main menu and Panel 1 and Panel 2 are panels containing buttons.

So, to cover this...

If you wanted to change the text inside your buttons, you could only do this with a <Set> tag inside the button itself. No other UI can access the internal parts (eg. text objects, graphics etc.) of your buttons.

If you wanted to set a property that changes a property in the FIRST element in a UI (which is almost always a panel or clip object) then you can do it from the PARENT. For example, Panel2 can change the Visible, Alpha, Scale, Position and other properties of each one of it's buttons.

If you want to do anything else, you will need to use a property value, such as a Choice, Command, cor:String, RangedValue or any other shared property, and you'll need to have rules inside the button UI to deal with the property changing.

Classier than using Strings

IgnoranceIsBliss — Mon, 30 Jul 2007 07:58:00 GMT

Oh, another thing that came up in the forums that may work for you if you are playing with Media Center development.

If you back track a bit to our main menu, or to the list of answers in TriviaCenter, you will find that we load our list by filling an ArrayListDataSet with Strings.

But don't feel limited by that - it's commonly used in all of the examples, but it's worth remembering that you can put any class in the ArrayListDataSet - not just String.

Let's say that we wanted to add a picture to the front of every answer - either something to illustrate our answer, or maybe just an 'A', 'B', 'C', or 'D'.

Now we need a different picture for each element. We COULD try and do something that is just way too complicated, like looking up our images in a different data set - but this would be very time consuming and ugly. There's a much easier way.

Instead of loading our ArrayListDataSet with strings like we've been doing, we create our own new class (based on ModelItem, because it's going to have it's own properties and we want Media Center to be able to see any changes we make) and fill the dataset with THESE items instead.

public class MyCategory : ModelItem

{

public _Name;

public _Image;

public Name { get { return _Name; } }

public Image { get { return _Image; } }

}

Of course, we can also add constructors to make our life a little easier.

So when we add them to the ArrayListDataSet....

MySet.Add(new MyCategory("General","file:c:\program files\random stuff\general.png"));

MySet.Add(new MyCategory("Entertainment","file:c:\program files\random stuff\entertainment.png"));

And there's only one other thing we need to change in your MCML code. We can choose to either pass the WHOLE item to our button's UI, or we can set the Image and the Label individually using properties.

The properties would change from...

Label="[RepeatedItem!cor:String]" - which took our string and used it as our label, we now use...

Label="[RepeatedItem!me:MyClass.Name]" - to get the name of the category and

Label="[RepeatedItem!me:MyClass.Image]" - to get the filename of the picture.

Which Class Do I Use?

IgnoranceIsBliss — Mon, 30 Jul 2007 07:41:00 GMT

I've been helping someone out on the Media Center Sandbox, and I thought one of his questions were fairly relevant to someone who is starting to play with MCML development and their own classes.

He was basically asking 'should the properties I use in my .NET program be the Media Center classes (like Choice, ArrayListDataSet etc.) or standard .NET components, such as List?

Some of these topics are covered in earlier posts, but this is just a summary for those who may be a little confused.

If you have a property that is going to return something complex - for example, another object that itself has properties - you should always use a Media Center type (if there is a suitable one) or build your own class based on ModelItem.

So if you are just trying to send a string or an integer, use the String and Integer types - these will be fine.

If you are choosing an element from a list, always use Choice one of the Ranged items. If you have a list of options, always use ArrayListDataSet, or a class of your own that is based on ModelItem.

But this rule only applies to the properties you expose to Media Center. You don't use them for internal values, since most of the ModelItem based classes are not thread safe and will cause exceptions should you use them outside the parent thread.

The reson for this is kinda complicated (see my previous posts for some information on how ModelItem works), but basically, 'ModelItem' allows you to notify Media Center that a property has changed, meaning all of your UI rules will be checked. Without basing your class on ModelItem and calling FirePropertyChanged where appropriate, changing a property in any complex object will mean that Media Center will simply miss it - your UI will never update properly.

So the basic rule is:

Simple Properties and Internal Variables: Standard .NET Classes

Complex Properties: Media Center Classes

No Post This Week - Computer is Dying

IgnoranceIsBliss — Sun, 01 Jul 2007 22:26:00 GMT

Sorry, no new stage of TriviaCenter development this week. I'm starting to think that my new place was built ontop of an Aboriginal burial ground...or at the very least a large magnetic plate. My development machine has been fairly badly crippled by a hardware failure - my on-board USB has died on me and the computer has now slowed down to an absolute crawl whenever any I/O is happening.

So there's an upgrade/replacement motherboard in my not-to-distant future, but after a couple of expensive weeks, I'm going to have to wait until I get the cash together. Next week is the housewarming party, so I'm not entirely sure I'll get an update out then either, particularly with new Yougle changes happening, since it's died recently too due to YouTube site changes.

[EDIT: The problem is mostly fixed now. While the USB on my motherboard is still burnt out, I discovered the reason for the radical slowdown. One of my RAM modules was disconnected when I installed the USB card...which meant that my Vista was running with 512MB of memory. And I agree with the minimum specs on this one - Vista is completely unusable for development work with anything under 1GB]

Oh, and I've got some advice to software developers who are thinking of going the 'donation supported' route. If it's going to cost you money to distribute your software, DON'T DO IT. I've had over 10,000 downloads of the original Yougle with three donations, and 500 downloads of EMUCenter with none. The additional server costs alone have been over $200...so it looks like future products of mine may be coming with additional features that you can only unlock with a registration key.

Forum Now Open for Business

IgnoranceIsBliss — Thu, 28 Jun 2007 08:35:00 GMT

Ian Dixon has kindly donated the developer forum to let us all discuss the topics I'm covering on this blog. So if you have any questions, want to discuss possible features for TriviaCenter or even post code and suggestions, please feel free to jump in.

And if you want a little bit of a chat about Media Center development in general, feel free to vent your frustrations or express your joy here. And of course any expressions of your new-found love for me will also be accepted ;)

Please read the 'Welcome Aboard' post though - this is not intended to be a replacement for the Media Center Sandbox forums. If you are going to ask a development question, please try to ask those that are based on the MCMLookalike libraries, TriviaCenter or my other posts here - if it's about something else, you'll get a much faster reply from the sandbox.

Feel like joining in? follow this link to the forums!

[Update: Link fixed]

Stage 11: Responding To Answers (Timers and Commands)

IgnoranceIsBliss — Sat, 23 Jun 2007 06:46:00 GMT

OK, we can now answer trivia questions and keep a score...but you've got to keep watching that darn bottom corner to see if you got it right or not!

So how about we add a little more feedback to the questions by having it obvious if you were right or wrong.

To do that, we are going to need another UI component. Let's start by making one for the 'Correct' response.

<UI/>

In this case, we are going to make a large piece of text (saying 'Correct!') appear on the screen where our list of answers are. It will fade in and move 'towards' us, then fade back out.

So we build our content...

</Children>

</Panel>

Basics done. Now, since we want to make this appear to 'zoom in', we will need an animation that scales the object from the middle. We can do this by setting it's CenterPointPercent property.

Since we also only want this text to appear occasionally (rather than all the time) I've set the Visible property to false.

I've probably already explained this, but just to make sure you know...if an object is not Visible, then it does not interact with the keyboard and mouse. If an object has it's alpha set to 0, you won't be able to SEE it, but it can still block mouse events. So we want to make this object completely dissapear. In this case, we use Visible rather than Alpha.

Now, when a item changes from Visible="false" to Visible="true", the 'Show' animation is run. So let's create an animation for our panel that will fade the object in, enlarge it, then fade it out again.

</Keyframes>

</Animation>

</Animations>

...

The entire animation will run (as you can see from the above 'Time' settings) 2.3 seconds.

Cute. But how do we trigger the thing to appear?

Well, there are a number of ways to do this. You could create a string that had three states - for example, "Right", "Wrong" and "Waiting", you could use a Choice object, you could do all kinds of things that are messy and complicated. But MCML has a special object designed to handle these kinds of 'event driven' situations.

The Command object can be used to make MCML objects do what you need them to do in response to an event. In this case, we are going to enter our C# code and create two Command objects - one for a correct answer and one for an incorrect answer.

Command _WasRight;

Command _WasWrong;

public Command WasRight

{

get { return _WasRight; }

}

public Command WasWrong

{

get { return _WasWrong; }

}

With 'Command' objects, we don't need to bother about 'FirePropertyChanged' or any of that business. To make things happen from our C# code, we need to Invoke them. This is very easy...they have a member function called Invoke.

So when we validate our answer in C#, we do the following...

if (Right)

{

_WasRight.Invoke();

}

else

{

_WasWrong.Invoke();

};

There you go - if the answer was correct, we Invoke the 'WasRight' and if was wrong, we Invoke the 'WasWrong' commands.

Now we need to react to them. Command objects work in a very similar way to the ClickHandler object. You use a Changed rule to see if anything has happened. Let's see how we do this to handle when the user has answered the question right...

</Actions>

</Changed>

So when the 'Invoked' property of the WasRight command changes (which basically means 'when somebody calls Invoke'), it should immediately set the MainPanel object (the panel that contains our text object) to be visible.

This will trigger the Show animation, which will give us a lovely fade in and fade out!

But hold on!

We fade the object out, but we never make it invisible again. As I said earlier, an object that with an Alpha of 0 can still block mouse clicks and interaction, so we need to make sure that we set the Visible attribute back to false.

Windows Media Center doesn't have a method of detecting the end of an animation. So how do we get around this, and make our object invisible again?

This is where timers come in.

Timer objects are similar to commands and are easy to use methods of timing events in your MCML markup. In this case, we have an animation that is 2.3 seconds long. So what we need is a timer that will tell us when 2.3 seconds have elapsed!

We create our timer object in the Locals section...

</Locals>

And as you can see, we give it a name and an 'interval' (which is the time we want to measure, in milliseconds). You can start and stop timers by using the Enabled property. If we wanted our timer to turn on immediately after the page opens, we could set this property now - but it defaults to "false", which is what we want.

So now, we need to turn the timer on. We want to do that when the animation starts...and the animation is triggered by setting the Visible property on the panel to true.

Find the code where we made the panel visible, and add a line to switch the timer's Enabled property to true. This will turn the timer on.

<Set Target="[VisibleTimer.Enabled]" Value ="true"/>

</Actions>

To catch when the 2.3 seconds have elapsed, you check for the Tick property in the exact same way we checked the Invoked property in a Command object.

</Actions>

</Changed>

Almost an exact opposite of the Invoked function, this one makes the panel invisible again and turns the timer off (although since this is a one-time timer, we don't REALLY need to do that).

Excellent. Let's add it to our main UI and see how it looks.

<me:AnswerResponse game="[game]">

</LayoutInput>

</me:AnswerResponse>

That code will create the AnswerResponse object (passing our 'TriviaCenter' object so it can check for the WasRight command to be invoked).

So now we need one for 'Wrong'. And it's going to be almost identical. Hmm...do we really need to do all that work again, or copy and paste the darn thing and have to do TWO changes should we ever add new features or fix bugs?

Well...why make this AnswerResponse object a little more universal?

Ask yourself what the major differences are probably going to be between the 'Right' and 'Wrong' events. For getting it basically working, all we really need is to change the writing, and maybe change the colour.

So we dive into our AnswerResponse object, and make properties for these differences.

<cor:String Name="Label" cor:String="$Required"/>

</Properties>

This gives us the text label, the colour and the Command object we need to react to. We simply chop and change the values in our content and in our rules sections, and we have something nice and re-usable!

<me:AnswerResponse Label="Correct!" Colour="Green" ShowWhen="[game.WasRight]">

</LayoutInput>

</me:AnswerResponse>

<me:AnswerResponse Label="Wrong!" Colour="Red" ShowWhen="[game.WasWrong]">

</LayoutInput>

</me:AnswerResponse>

The right and wrong answer animations...done with style.

Remember to leave comments if you found this helpful...it's not like I do this for the money! Although my MSDN subscription is coming up soon, and if you happened to have a spare $900AUD... :)

Next time, let's add some graphics and sound to this visually dull affair...and maybe we can spice up the questions too.

Sample code can be found here.

WiX way do I go?

IgnoranceIsBliss — Sat, 23 Jun 2007 02:15:00 GMT

Charlie from Microsoft has made a post commenting on my last blog entry - writing an installer with the standard Setup Project in Visual Studio on the sandbox blog (http://blog.mediacentersandbox.com/UseTheRegistrationAPIWiX.aspx) - oh, and thanks Aaron Stebner for point this out on his blog at http://blogs.msdn.com/astebner/archive/2007/06/20/3439251.aspx

I more than half-expected a response like this, and I admit that I probably didn't emphasise the point enough.

I have provided this method of installing as an example, but it is not the recomended way of producing installers for Media Center applications.

I chose this method for three reasons...

A. It shows the user what REALLY happens when you call RegisterMCEApp.exe.

B. It allows me to give the users a working installer program without having to install another application to get the sample code to run.

C. While WiX is the FAR more flexible, powerful and useful tool, I'm not all that familliar with it yet (although I have played around with ORCA enough with my previous installers to understand that it's primarily an XML interface to the installer database), so I'm not going to give all that much advice on a topic I REALLY don't understand. I'll stick to a topic that I know a little - but only slightly more - about.

D. At least partly, because I knew it would provoke a response, and I was trying to highlight the fact that I believe that if a feature is going to provoke a response like "Please don't use this method", perhaps it shouldn't even appear in the SDK - or it should appear with very large warning labels (again, I haven't checked the latest SDK...maybe they HAVE put those warnings in!)

Anyway, if you ARE interested in using WiX (which you should if you plan on formally releasing your code), I'll take you on a quick walkthrough of making the XML file you'll need. If you followed the basics of the last stage, you'll find this one a breeze.

This is much clearer than the registry format, to be honest, and much more simple. Your application tag defines a new Media Center app. You simply give your app a name, and a GUID (Globally Unique IDentifier). You make GUID's with the GUIDGEN tool that is part of Visual Studio - go to 'Tools' and selecte 'Create GUID'.

Then you define an 'Entry Point', which is basically the 'button' that you will use to start your addin. For this, you will need a title, description, another GUID (NOT the one you used in the 'Application' object!) and the complete path to your .NET class.

For an example of building this full path to your class, please see the Stage 10 documentation.

Finally, you choose your categories. This specifies where you want the 'entry point' button to appear. In this case, we have chosen both the 'More Programs' list and the 'Games' list.

There you have it, a basic XML file that you can use to register your application with Media Center.

You can even make a post-build command to register your application - but since you really only ever need to register and unregister once, I've actually turned 'Register MCML Application' into an entry in my Tools menu. Check the screenshot below.

Oh, there is one other advantage of using this method during development. If you use RegisterMCEApp and an XML file, Media Center is notified of the change to it's programs list and the list updates without you having to restart Media Center. This is VERY handy when debugging, because you can get very sick of the Media Center start window.

Stage 10 - Installing It

IgnoranceIsBliss — Sun, 17 Jun 2007 06:51:00 GMT

OK, now there are interesting problems when installing an application for Media Center, because there are two different ways of registering your application.

To appear in Media Center, several entries need to be made to the Windows Registry.

In the first release of the Windows Media Center SDK (and in previous versions, such as Windows XP Media Center Edition) Microsoft suggested that you could either create entries into the registry yourself, located under the registry key..

Local Machine\Software\Microsoft\Windows\CurrentVersion\Media Center\Extensibility

Personally, I like this technique. But there are two drawbacks.

1. Charlie, the Microsoft product director for Media Center extensibility (IE. the Media Center SDK) has informed me that MS won't guarantee that the method of registering plugins will remain the same. Of course, I then asked 'OK - then why do you TELL us to register them that way?' and there wasn't much of a response. I'm yet to see if this is still true in the newer version of the Media Center SDK.

2. If you run a 32 bit installation on a 64 bit version of Windows, your registry entries are placed in an entirely different tree. So the 64 bit version of Media Center can't actually see the keys you've created.. This means you MUST produce both a 64 and 32 bit version of your installer.

Microsoft themselves suggest you use WiX, which is an open source product of theirs that allows you to create installers - but since it's a complicated platform and I want to be able to take you through the basics without needing any additional software, I'm going to take you through the easy, but perhaps not officially supported method of adding registry keys directly.

SO - let's take a look at our installer.

The first thing we need to do is add our program to the Global Assembly Cache. The GAC is a lot like copying a DLL file into the Windows/System directory - it creates a single assembly that you can share among your various applications. It allows Media Center to find your C# classes and code.

This has already been done in the copy of the installer from our last version of TriviaCenter.

Next up, we need to set up our registry entries.

A Media Center application needs at least two GUID's (Globally Unique IDentifiers). The first one is the GUID for the application as a whole (for instance, TriviaCenter) while the second is for an entry point into the application.

An entry point is basically a visible button that a user can press to access your program. A single application can have a number of entry points. For example, MoreWithMyMusic (a program of mine) has a single Application GUID, but it has TWO buttons that appear in the More Programs list - one to normalise all of your music, with a second one to search for Ultrastar songs.

TriviaCenter is very simple. We only need one entry point. So use GUIDGEN (you can often find this tool in the 'Tools' menu of Visual Studio) to build ourselves a new Application and Entry Point GUID.

In our example, I picked {D0515079-4F80-4970-93D5-02F5CF736444} for the app, and {396E0EB3-BC22-4cb2-A6CB-954B5F7CF444} for the entry point.

So at the end of the day, our registry should look like this...

...\Windows\CurrentVersion\Media Center\Extensibility

Applications

{Our Application GUID}

Title (String) "TriviaCenter"

Entry Points

{Our Entry Point GUID}

Title (String) "TriviaCenter"

Description (String) "Sample Code by Steven Harding"

AppID (String) "Our Application GUID"

Timestamp (Integer) Random Numbers - They Don't Really Matter

Addin (String) "The complete path of your addin"

ImageURL "The Path to our Image File"

In the above list, bold text represents registry KEYS, while non-bold text represents registry VALUES.

So now that we know the GUIDS that we need, all we really need to throw together are two things - we need to create an image file or logo that should appear in our list of Media Center games, and we also need to discover what the path of our C# assembly is supposed to be.

To make the full path for your assembly, you need a few parts. The first part is the

<Name of the AddInModule class> , <Full Name of the Assembly>

For example, the full path to the MCMLookalike sample addin is...

MCMLookalike,MCMLookalike,Culture=Neutral,Version=0.0.1000.0,PublicKeyToken=aadbb711d5721433

Because an assembly that is in the Global Assembly Cache can have many versions, you need to do more than just select the assembly by name. This method, with specifying culture, version and a key token allows you to be secure in the fact that the version of the assembly you expected is the version you are getting.

So how do we figure out this address for TriviaCenter?

Media Center applications all start from the same point - a class that is based on 'IAddInModule' and 'IAddInEntryPoint'. If you check out the source code in 'AddIn.cs', you will find that we already have a class like that. It's name is 'BaseAddin'.

public void Launch(AddInHost host)

{

Host = host;

s_session = new HistoryOrientedPageSession();

s_session.GoToPage("resx://TriviaCenter/TriviaCenter.Resources/Default");

}

If you follow the code down for a while, you will find that there's a method called 'Launch'. All it does is creates a new 'HistoryOrientedPageSession' object, and calls 'GoToPage' to open our first MCML file.

But OOPS - we don't HAVE an MCML file called 'Default' anymore. Let's fix this and change the path to this one...

s_session.GoToPage("resx://TriviaCenter/TriviaCenter.Resources/StartPage");

The HistoryOrientedPageSession class allows Media Center to remember the 'history' of your application, meaning that when you press 'Back', you will return to the MCML file you were in previously.

The BaseAddin class is in the namespace 'TriviaCenter'.

So - we now know how to start our path - it's

TriviaCenter.BaseAddin , <Full Name of the Assembly>

How do we get the full name? Well there are a few command line tricks you can do, but I find it easier to cheat a little.

As part of our compile we are already adding TriviaCenter to the Global Assembly Cache. So if we check the cache, it will already have all of the information we need.

Go to 'Start | Run' and check out %WINDIR%/Assembly

This is the folder where all of the files in your Global Assembly Cache are kept. All you need to do is scroll down from the top and find yourself 'TriviaCenter'. If you hover your mouse over the file (or right-click it and choose 'Properties') you will find the full name for the assembly.

TriviaCenter,Culture=Neutral,Version=0.0.1000.0,PublicKeyToken=aadbb711d5721433

And there we go - all done. Our complete path is...

TriviaCenter.BaseAddin ,TriviaCenter,Culture=Neutral,Version=0.0.1000.0,PublicKeyToken=aadbb711d5721433

The last thing is to associate this entry point with a part of Media Center. If you've ever played in 'More Programs', you will have noticed that you have different categories, such as Games, Music, TV etc.

The SDK gives a good list of your options here. To associate our addin with one of these places, you simply create a key under the section that you want. For example, to register our app under 'More Programs', you can simply create it under..

.../Media Center/Extensibility/Categories/More Programs/Entry Point GUID

AppID (String) "GUID of Application"

To register it as a game, we add a key with the entry point GUID under

../Media Center/Extensibility/Services/Games/Entry Point GUID

AppID (String) "GUID of Application"

And all of the rest is kinda straight-forward. I'm not going to go into details of how to use the setup system here - all you really have to do is go through, give the thing a new ProductCode and UpgradeCode, change 'MCMLookalike' to 'TriviaCenter' and generally play around.

Then change your build configuration from 'Debug' to 'Release' and compile. It will create a setup file for you.

For the updated code & installer, download this

My Rant: Steve Jobs - Do Your Research

IgnoranceIsBliss — Wed, 13 Jun 2007 02:21:00 GMT

Steve Jobs recently announced something about the Apple TV that REALLY irritated me

"This is the first time users can easily browse, find and watch YouTube videos right from their living room couch..."

Ahem. Really.

I'm not going to rant about Apple vs MS operating systems here - my friends with Macs know my opinions.

But I think if someone is going to make a "This is a first" announcement, they should consider doing the research behind it. I spent a LOT of time developing the first Yougle, and it's friend Yougle 2...and having someone say something like this leaves me quite annoyed.

Particularly since the fact that he is Steve Jobs means that everyone will believe it.

And he shares my first name! Ahh!

So if anyone knows him (or his email address) and enjoyed Yougle, please give him a quick slap on the head and ask him to at least send me an email saying 'oops - sorry for that!'. I'm also happy to accept millions of dollars in a settlement, but just an apology would be nice :)

Anyway, I think if you look hard enough you may also find that other programs such as MythTV and TVidia can handle Youtube videos, as well as the XBox Media Player. Of course, that last one requires a hacked XBox, so probably doesn't count as a consumer product.

Anyway, I've had my rant...back to Media Center development...

EMUCenter Is Out Now

IgnoranceIsBliss — Mon, 11 Jun 2007 10:52:00 GMT

The guys on http://www.thegreenbutton.com have been asking me for features in MAMECenter, so I spent a chunk of time recently (with my internet connection gone) writing some code to make it happen.

Say hello to 'EMUCenter'. It lets you create your own list of games to play from within Media Center. You can add your normal Windows games, as well as games from your old favourite machines (assuming you still own those disks and haven't thrown them out, of course!).

If you would like to check it out (and tell me if it doesn't work!) feel free to drop on by the greenbutton forums - http://thegreenbutton.com/forums/192174/ShowThread.aspx#192174 - download the program and leave some comments.

There's also a very early draft of the new Yougle for Vista - there's a few problems with the buffering (don't start any large videos, since it takes AGES for the darn thing to buffer the video for Media Player)...but it's generally running. Well, at least enough so I can let you play with it.

Check it out at http://www.push-a-button.com.au/products/mce/vista/yougle2/index.php

Sorry for the Delay

IgnoranceIsBliss — Mon, 21 May 2007 08:51:00 GMT

Sorry it's been so long since my last post, but with moving house at the moment there isn't as much time as I'd normally have for posting.

And once I got the time, my Media Center HDD died. I thought I'd finally take the opportunity to bring the little guy up to date by finally installing Windows Vista Home Premium on him. It's an older system though, so it's taking time and effort to make Vista and Media Center completely happy in it's new home.

But there's a new post today - and it's a BIGGIE. Yes, the code below would take you to a point where your application REALLY DOES SOMETHING!

Stage 9: Navigating to a New Page & Getting Trivia Data

IgnoranceIsBliss — Sun, 20 May 2007 06:57:00 GMT

Allright - are you like me, and you've had enough of playing with this scroller? It's time to hang that up and start working on something REAL.

Our first step is to go to a new MCML page. This first page is handy, but it's now done it's job - the user can now choose a category. But to ask a question, we should have a new MCML page, to keep both parts nice and seperate (also, if we have them as two seperate pages, the 'back' button will then go from asking a question, to asking for a category).

To move to another page in an MCML application, we use the 'Navigate' action. 'Navigate' allows you to make Media Center load another MCML file. You specify the name of the file (normally a resource inside your C# assembly) to navigate to.

Navigate will normally go to the very first UI it finds within the target MCML file. However, if for some reason you want it to navigate to a particular UI, you can use '#<uiname>' at the end of the resource name. We won't be bothering with this.

For example, we will be creating a new MCML markup file called 'Questions.mcml'. To navigate to this page, we find the actions in our Click handler we created for our TextButton, and change it to...

</Actions>

</Changed>

The Navigate command above does two things. First, it tells Media Center to open the resource named 'Questions' that is part of our DLL file (we will add this later) and show us the very first UI it finds. The second part is that it sets the 'game' property of this new UI to our TriviaCenter object.

Using Navigate is just like creating a UI directly (eg. when we create a TextButton). You can pass it any parameters you like. In a little while, you'll see where and how we use the game property in our second page.

You may also notice that I've changed the name of the 'SomeoneClickedMe' function to 'StartGame'. This makes a lot of sense, since this function tells Media Center that you are now ready to answer questions from a category.

Speaking of changes to our C#, we had better discuss them.

As I said earlier on, I expect you to have a good general idea of C#. If you don't, I suggest you stop now, learn how to write some of your more simple Windows applications in C#, then come back to this.

When writing your C# code for Media Center development, it's often easier to write it in a Windows Forms application first. This allows you to use simple, well known and predicatable user interface elements, rather than causing yourself confusion where you don't know if it's your MCML or your C# at fault for problems/

I'm not going to walk you through every stage of the C# code - I'll just explain the very basics behind what I am trying to do here.

The first step is to load our data from a sensible location. That location will be found either in the local directory to the application, or the 'Application Data' directory. We will be using some quiz files sourced from an open source project - you can download them here - http://w3.misterhouse.net:81/mh/data/trivia/ (and they are included in the download).

Each file will represent a single category - Entertainment, Sports etc.

Now we need to look at what data we need to exchange between our two parts of the application - this is usually best done through a diagram or other visual aid. In this case, we are going to need to following key pieces of data to appear in our interface...

The Question

Four Multiple Choice Answers

The Current Score

The Total Number of Questions So Far.

So in our C# object, we need to create properties to deliver all of these things to the MCML page, so they can be reported.

private String _Question;

Choice _Answers;

byte correctanswer;

public String Question

{

get { return _Question; }

}

public Choice Answers

{

get { return _Answers; }

}

...

...and I'm sure you get the rest. It's all pretty straight-forward by this stage in your progress through MCML development.

We also need a couple of different actions that the user can perform. These are...

Starting a New Game (StartGame)

Answering a Question (Answer)

Since for both of these actions, our user will be pressing a button (ie. the name of the category or the answer to the question), we are going to have to get that button press from the MCML Page to the C# Class. So we will need to create public functions for them...

public void StartGame()

{

...

};

public void Answer()

{

...

};

So we have already Navigated to a page - but so far, it doesn't exist! Let's create it now. This page is going to contain our trivia question and the answers. This will be where the bulk of our game is played, and you will find that we can re-use almost every part of our original page.

Let's create our new page using our old one as a template. Start out by right-clicking the 'Start Page.mcml' file in the Solution Explorer and choosing 'Copy', as pictured.

Then right click the 'Markup' folder and choose 'Paste' to make a new copy of our MCML page. Rename it - ideally, to 'Questions.mcml'.

Now, we dive into the MCML code. There is one vital thing we need to do first. Very early on in our first UI element, we create a new 'Local' - our TriviaGame object.

In this case, we don't need this to be a local variable - we have already created a TriviaGame object in our FIRST page, where you select the category. So in order to make the selection of the category move from one MCML page to the next, we will need to sent the TriviaGame object as a property, just like when we pass an object between two MCML elements that are in the one file.

So simply change the 'Local' tags to 'Properties' tags, and we are ready to continue.

<a:TriviaGame Name="game"/>

</Properties>

You'll remember at the start that we set the 'game' property in our Navigate call. This is where we define that game property. Using this technique of passing our object as a property from page to page, we ensure that there is only ever a single TriviaCenter object - it is simply shared amongst all of the MCML pages.

Our BackgroundText object is still important - but lets do something a little more impressive and change it to the name of the category we chose. Because we passed our TriviaGame object from our original page, the category selected in the choice object will still be selected, so we can use this to get the name of the selected category.

<con:BackgroundText Label="[game.Categories.Chosen!cor:String]">

</LayoutInput>

</con:BackgroundText>

Our trivia database only ever has questions with four multiple choice answers. We don't really need to worry about needing a Scroller object anymore - with four, we aren't going to fall off the page anymore. So we can get rid of all of that scroller-related code we have, and change it to a simple Panel.

</LayoutInput>

</Layout>

<me:TextButton Label="[RepeatedItem!cor:String]" Indx="[RepeatedItemIndex]" game="[game]"/>

</Content>

</Repeater>

</Children>

</Panel>

And if you notice the bold text above, you'll also see where I've made another change. Rather than wanting to see the list of categories, I now want this repeater to have a list of the answers.

And since our TextButton class already takes care of focus and choices, our work is almost done! All we need to do is change the actions that the button performs when we click...since we aren't choosing a category this time, starting a new game seems a little silly.

</Actions>

</Changed>

The Answer function (which we discussed earlier) is one we defined in our C# object to tell us that the user has chosen an answer. It will check to see if it correct, update the score and then load the next question.

Remember, since our buttons change the ChosenIndex properties of the Choice objects they are based on, your C# class already knows which of the categories or answers you have selected. That's why we don't need to pass any parameters to our Answer or StartGame functions...because we already have all of the information we need.

Finally, there's our friend the position indicator. Well, since we no longer have a scroller we certainly don't need this anymore...but there's one thing it COULD be useful for. How about for showing our current score?

So let's dive into the PositionIndicator. First, I'm going to rename it to a ScoreIndicator, just so I know what I'm doing (don't forget to change the code where you actually create the indicator in the first UI!)

There's only two things we need to do. Since we aren't using a choice object anymore to get the information for our indicator, we need to change the property that we pass it from the main UI. We want to instead show the total number of questions asked, and the total number of questions that were right. Both of these are stored in our TriviaGame object...so that is the property we need to pass to our new ScoreIndicator.

<a:TriviaGame Name="game"/>

</Properties>

And we also need to change our Bindings. The 'game' object doesn't have Count or ChosenIndex properties, nor will we need the MathTransformer to add one to a property - this is a very simple object now, with two bindings...

The last thing we need to do is make our 'Questions.mcml' page part of our assembly (or DLL file). To do this, double-click on the Resources.resx file.

At the top of the window that appears, there will be drop down menu that will probably default to 'Images'. If you left click it, you'll get a list of choices like the ones here. Choose 'Files'. This allows you to embed files into your DLL by making them part of your resource.

Simply left-click the 'Questions.mcml' file from the Solution Explorer and drag it into the list of Files.

There!. It's now part of your resource file, which will make sure that your C# code and your MCML interfaces can never be accidentally seperated.

And apart from putting in C# code to load the questions and fill the properties, we are done. That's IT. So after all that pain with the scroller, it's only a few fairly simple changes, a few extra properties and a little bit of behind-the-scenes C# code to go from a simple list of categories to a working trivia game.

Of course, there's HEAPS of work to do making this pretty...but now you can have a game of your own running in your Media Center...or can you? You've got it working fine in MCMLPad...but how do we get it into Media Center?

Tune in next time for the answer!

Code is here.

If you can't get it to run or your list of categories keeps coming up empty, create a folder called %APPDATA%/Steven Harding/TriviaCenter

You will need to copy the files ending in .DAT (the question and answer files) from the /bin/debug directory of TriviaCenter and copy them into the %APPDATA%/Steven Harding/TriviaCenter folder. This is where it looks for the trivia questions.

Stage 8: Showing the Current List Position and the Art of Binding

IgnoranceIsBliss — Tue, 08 May 2007 06:52:00 GMT

Now we go back to our scroller.

We've made our list scroll, show the current selection, work with the keyboard and mouse...but it's still easy to get lost in our list of options.

Unless it's clear that there are more options above or below those showing on the current screen, your users can easily be confused. This is why most Media Center windows with lists of options give you a position in the bottom right hand corner.

So let's make one of our own.

First, we are going to need a new Panel to host our controls. Let's create this in the very first UI in our project. We will call it 'PositionIndicator'.

Look at the picture. You will see there are three distinct parts of this object. There is the current position, a slash, and the total number of options.

They are all right next to each-other, in left-to-right order. So this tells us our layout method - we simply need to use 'HorizontalFlow', to space our objects out horizontally.

Now we create three text objects, one for each of the elements we identified earlier (position, slash and total).

</Children>

We don't need to bother assigning a name to the slash text control, since it's value will never change. Of course, our Font and other settings aren't really right yet (and you'll probably want to make them slightly transparent) but these are minor details you can clean up later.

Now we need to get their position right. Since the main UI of our program is based on a FormLayout, we use the FormLayoutInput again. We want to place this object in the bottom right corner of our screen, so something like this should do the trick...

</LayoutInput>

Very nice. Now it's visually quite reasonable. But as yet, it doesn't DO anything.

Let's now get it working. What we need to do is use our Choice object to get the values for this UI element.

We have already seen some of the basics of getting values from our C# object, so it should be fairly straight forward. Rather than setting our current and total text elements to '1', we get them from [TriviaGame.Categories.Options.Count] and [TriviaGame.Categories.ChosenIndex].

But if we simply use those values, we get errors! Why would that be?

Well, it turns out that MCML (like C#) is very type-sensitive. This means that it will raise errors when you try to convert one type of data (like an Integer, like the property TriviaGame.Categories.ChosenIndex) to another type (say a String, like the Content property of a text object).

You need to tell MCML that it is OK to convert your data from an Integer to a String. You can tell MCML to typecast an object like this by using the '!' character, followed by the name of the class you want to convert to.

Now if you refer back to one of the earlier posts on the MCML tag, you may remember that we used a like like this...

xmlns:cor="assembly://MsCorLib/System"

This line imported all of the standard core types, like Int and String. So to change our Integer properties (like the two properties we are getting from our Choice object) and convert them to a String which we need to set the Content of a Text object, they will need to look like this...

Excellent! We have now loaded our data from our C# object into our MCML UI.

But there's another problem. You'll find that when we run our program, everything looks great. Our position is given as zero, and the total number of choices is correct. This is working out fine...until we try to change the selection. Nothing happens!.

Now we come back to our ModelItem object. Do you remember how ModelItem works - that when the data changes, all of the rules associated with a particular property are run again? The problem is that the values we are using in the Content of our text objects are only ever checked when we first show the text objects. Once they are created and set the first time - that's it.

So how do we make our text objects update whenever the ChosenIndex changes? Well, as you may have guessed, we need a rule. Then MCML will run the rule, which will update our value.

And it so happens that there is a special rule just for this. It's called a binding.

In our rules section, we link the Content of our text object (called 'Position') to the ChosenIndex of the Categories Choice object (remembering we need to convert it to a String, of course)

So now whenever the value of our Source changes, the Target is updated.

Now, when we change our selection the current position always changes! We are almost done now.

There's one final thing to be done. You'll find that there's one annoyance. The ChosenIndex of a Choice object is zero-based. That means that the 1st choice has a number of 0. Our users really will like to see this as a one-based value. How on earth do we add '1' to our value, without having to write a new property and new code?

We use a Transformer. And no, I'm not referring to the cartoon or the upcoming movie. Transformers are used to change (or transform) a value.

First, we split the binding so it has both a start and an end tag. We then create 'Transformer' tags to hold our transformation.

</Transformer>

</Binding>

And finally, we choose the transformation we want to actually perform. There are many options. Some are specifically for timespans and dates, some are for formatting strings, others to create true/false comparisons...but we want to perform a mathematical operation. For that, we need a MathTransformer

So to translate, every time your ChosenIndex changes, the rules that use it are checked and run. The binding will run, which takes the ChosenIndex, runs it through the transformer and adds '1', then sets the Content property of your Text.

We now have a working position indicator for our scroller!

The final touch? Let's take our object (including it's rule) and create our own UI for this position indicator. The UI will only need one property - the Choice object it needs to use to get it's data from.

By putting it in it's own UI, we have created a re-usable object that will come in handy for future projects.

And just in case, let's add another binding to make sure that the total number of options in the Choice object is also updated. You never know - you may write an application that adds to the list dynamically.

Need some code? Try here

Stage 7: Showing the Current Selection, and a ModelItem introduction.

IgnoranceIsBliss — Mon, 30 Apr 2007 07:38:00 GMT

There's still a few tricks we can do to make our Scroller work and look better - and one of them is going to also show us the art of binding.

This topic is going to be a little hairy. Stick with me, because it will teach you some very important concepts.

First, let's look at our program. If you are only using the keyboard, it works fine. But should you be using a mouse, you may find that when you move your mouse outside our list of category options, all of our options go back to being faded - even the one we had selected. Personally, I'd like to show our user which item is the current one.

To do this, we are going to use some more of the features of our Choice object.

One of the most important members of Choice is ChosenIndex. This gives us the index number of the currently selected item. For example, the first item in the list of Options will be '0', the second will be '1' etc, just like in C# arrays. Not only can we get the currently selected item, we can also set the selected item.

So how do we set the currently selected option? Well, in this case we should set it whenever we highlight a new option. We have already done something very much like this - when we put our mouse over an option, it grows larger. Well, what we need to do now is as well as using set to set the size and the alpha of the object, we should also use set to change the ChosenIndex of our Choice object.

But to do that, we need one more piece of information. In our buttons, we only have properties for our TriviaGame object, and the label of the button. How do we know which of our options is index #1? And which is #2?

It turns out that it's not too difficult to do.

If you take a look at our Repeater object, you'll find that we used the special value RepeatedItem. In a repeater, RepeatedItem is the value of the item being repeated (in this case, the names of our various categories). It just so happens that there is another special value - RepeatedItemIndex.

This is - as you could probably guess from the name - the index of our repeated item. We can use this value and give it to our TextButton as a property, so that our button knows not only the label of the category, but also knows it's index number.

First, we go to our TextButton and make a Property that we can use to store this index value.

So we now have a property called 'Index' in our TextButtons. Now all we need to do is go into our Repeater and make sure we set this property in all of the TextButtons we create....

</Layout>

<me:TextButton Label="[RepeatedItem!cor:String]" Indx="[RepeatedItemIndex]" game="[game]"/>

</Content>

OK - so now we have a selection of TextButtons - one for each category. They contain both the name of the category (in the Label property) and the index of the property (in the Indx property). They also have a game object that leads them back to the TriviaGame so they can interact with our code.

These three properties are all we need to change the selection. We already have a Rule in our TextButton covering when the mouse is over our object...

</Actions>

</Condition>

This sets the object to 100% opacity (when alpha is 1, the object is visible), and scales the object up by 10% (1.1x it's original size).

All we do now is add another Set tag. This time, what we want to do is set the ChosenIndex of our Choice object. Since we loaded all of our options from the 'categories' object in our game class, all we need to do is add the following line...

Wow - if that gets a little unclear, tell me. It's oddly difficult to describe in text, but it's pretty simple in practise. If you had trouble follwing, just see the example you can download at the bottom of this post.

"Why use the index like this? Why not just use the label?"

I've seen a couple of newer developers using the 'Chosen' property instead of the 'ChosenIndex' property when setting the current selection. It's much easier - the Chosen property contains the actual value of the currently selected item. So for example. if we select the 3rd category in our list, it's ChosenIndex may be be '2', while it's Chosen value may be 'Entertainment'.

The simple answer? Index is safer - because if you happen to have two or more categories with the same name, you'll be lost without the ChosenIndex.

OK - the first part is out of the way.

What we want to do now is change our TextButton so that the selected button looks different to the other options in the list. Now, since we have already explored rules, and you've seen how we set the ChosenIndex property, you should have a good idea of how we can get the property and use it to 'fire' a rule.

</Actions>

</Condition>

There - that condition looks good. This rule should be followed whenever the ChosenIndex property of our Categories object matches the Value of our Index property. Quite simply, if this TextButton is for choice #2, then this rule will be fired when the ChosenIndex is 2.

We still need actions for our rule. How are we going to differentiate our chosen item from all of the otheres?

How about we change our MCML file a little bit? Currently (as you can see in the code I pasted in a little earlier) when any of our TextButton objects has the focus of the mouse or remote, it becomes brighter and bigger. Let's change this. We will make it so that when it has focus, it's bigger. When it's selected, it will be brighter.

So - remove all of the lines that look like this...

from any of the rules that mention KeyFocus and let's instead make them be the actions of our new rules - the ones that use the ChosenIndex.

We end up with two rules...

</Actions>

</Condition>

</Actions>

</Condition>

If you've been following so far, these should be clear. When the ChosenIndex and TextButton index properties match, make the button 100% visible. When they do not match, fade out to 75%.

There's only one problem. When you run this code...it doesn't work.

Ahhh! Why not? Everything makes sense, doesn't it ( well, as much as it can with me describing it to you :P )

Don't worry - I haven't led you down the wrong path. There's just something I need to explain about the way Media Center works.

ModelItem

You know how MCML applications are broken into two seperate pieces - the Model and the View? Well, there's a trick to connecting the two of parts to make them whole.

You've got your C# (or VB.NET) classes, which MCML gets information from. We create rules and set properties, intracting with our code. But there's a performance problem to think about.

It's like working at a desk with a hyperactive manager. If you have someone breathing over your shoulder all day asking for status reports, you'll never actually get any work done, since your too busy answering the same questions, over and over again. The same may happen to your C# code if you were forced to constantly respond to Media Center begging you for information. Remember, the Media Center interface should be running at more than 30 frames per second...do you honestly want Media Center to be asking for each and every property that fast?

So in MCML we have a trick around this - and it uses a class called ModelItem.

Basically, every time you create a C#/.NET class that you plan on using within MCML, you should always base it on the ModelItem class. This is because the most important responsibility of ModelItem is telling Media Center that a property value has changed.

There's a wonderful function that is part of ModelItem called 'FirePropertyChanged'. I'll show you how to use it yourself in a later post, but for right now I'll just tell you that this function is the key to the whole system. Basically, the Choice class we are using to hold our category names is already based on ModelItem. When you change your ChosenIndex property, it calls the 'FirePropertyChanged' function to try and tell Media Center that a change has happened.

This means that all of the rules that pay any attention to ChosenIndex will be re-checked.

Our problem? The FirePropertyChanged event can only flow back down to Media Center if every object in the chain is based on ModelItem.

So in this instance, our Choice object calls 'FirePropertyChanged'. But when it asks our 'TriviaGame' class to pass on the message to Media Center...nothing happens, because 'TriviaGame' isn't based on ModelItem.

OK - a very long winded and explaination. In the end though, it's a very, very simple fix. We change this line (where we declare our class) from this...

public class TriviaGame

To this...

public class TriviaGame : ModelItem

Yes. A lot of explaination for a very minor change, but understanding ModelItem now will really help in the future.

And now we have success! Because we are a ModelItem now, Media Center is being told that our 'ChosenIndex' has changed. This means that every ChosenIndex rule - like the ones that check to see how bright our TextButtons should be - is being re-evaluated when we set the ChosenIndex property.

The next post will be simpler and cover how to create a control to show the user how far they are through the list.

Here is the code for this post.

Stage 6: Cleaning Up & Scrolling our Choices

IgnoranceIsBliss — Sun, 22 Apr 2007 13:33:00 GMT

We are making real progress now in doing things with our interface. But there are a couple of 'housework' items we need to do before we can say we are ready to move on to the next part of our program.

The next question we need to ask ourselves is simple - 'what happens when there are a lot of categories to choose from'?

When you are developing an application and you create something open-ended, like the category list, you always need to check how your system will behave if you have a large number of entries. And if we start adding a whole lot of category names we find that very quickly the screen gets filled with junk - and we begin to loose entries at the top and bottom of the screen.

So - we need to clean up a little.

First, as you'll see from the image to the side, we have a couple of problems to deal with in terms of the positioning, sizing and alignment of our option text.

What we need to do is...

a) START the list items from a fixed point in the screen (vertically), so they do not flow around the center like that.

b) Limit the physical height of the list, to ensure that the list doesn't grow quite so large.

c) Allow the user to scroll through the list.

So we have our work cut out for us this time...

A) Changing the Position of the List

We currently don't bother setting any position details for the Panel that contains our list of options. This means that it is automatically centered on the screen. While this looked great in a small list, in a large list it's rubbish.

So let's continue using what has worked for us so far - the FlowLayout. Below, I've got the revised code for the Panel that contains our repeater object (which displays our various category options)...

<Panel>

</LayoutInput>

....

So in the above code, we have added our new LayoutInput tags to tell the FormLayout exactly where we want to start our list. In this case, we are putting the left hand side at '0' on the screen, and the top of the control and 25% of the way down the screen (remember, the Parent in this case is the screen itself).

Because we have used the 'Center' option for the horizontal alignment, the control will be cenetered within the parent - so it will be in the dead center of the screen horizontally.

B) Reducing the Size of the List

This is actually quite easy. But first, we need to change something.

You've seen our Panel control that we just moved. Well, it's time to give up on using Panel for this particular control, because we are going to start using it to deliberately clip off the bottom of our list in order to fit everything on the screen. And since we are clipping our list, what we need to do is use a Clip object instead of a Panel one.

Luckily, they are exactly the same in most parameters, so simply replace 'Panel' with 'Clip', (and the end tags, of course) and we are done creating our clip area.

Now we need to give parameters to our clip. And the most important is MaximumHeight.

But first, a digression....

Media Center is an unusual beast in that it will most often use percentages when positioning objects, but when sizing them it almost always uses pixels. This can get very confusing, because the whole point behind positioning things by percentage is the fact that it's great for adapting to different screen sizes.

So how can we use pixels? Since a pixel is a single point on the screen, doesn't that mean that something may look really tiny on a full-high-definition TV and absolutely massive on a old fashioned SD TV?

Actually, no. Because Media Center 'cheats' with it's pixels. It actually assumes you are building an interface based on 1024x768, a very standard 4:3 resolution. Well, to be completely honest, it assumes the screen is 768 pixels tall. The WIDTH may vary depending on the aspect ratio of your TV (some may be 1300+ across, but still only 768 down).

So it means we can happily use a pixel size for our Clip object and still be confident that it will work on various displays.

Back to it. All we need to do for our Clip object is to set it's MaximumSize. In this case, we don't care how WIDE it will be but we do care how TALL it will be. You specify a size with two numbers - written '<width>,<height>'. If the width or height is '0', it means "I Don't Care".

So to say "I wan't my list to be no more than 450 pixels high", we try a line like this...

You can also FORCE the object to always be 450 pixels high (regardless of the size of the content within it) by setting it's minimumsize to exactly the same amount.

To make things prettier, the Clip object also has the option of allowing us to gently 'fade' the objects that are being clipped. This not only looks good, but allows you to look more like a proper Media Center application.

To do this, you need to tell the Clip object which way you are going to be fading - horzontally (across the screen) or vertically (up/down the screen). In this case, because our list grows vertically, we also need to use a vertical orientation on our Clip object.

And now, the part we have all been waiting for...Scrolling

C) Scrolling the List

OK - this section will be a little odd, because Scroll objects take a bit of explaining. Firstly, these aren't as simply as just adding a 'Scroll' element to your MCML.

A proper scroll area is built from three seperate parts.

A 'Scroller' Object

A 'ScrollingHandler' Local Variable

and a 'ScrollingData' Local Variable

The Scroller object works just like a normal Panel or Clip - it contains the items you are going to be scrolling through (in this case, your repeater object).

In your <Locals> section, you will also want to create the other two variables you will need...

...

The ScrollingHandler class is just like the ClickHandler class we used earlier to check to see if the mouse had been clicked. It gives your Scroller control the ability to detect scroll events, like page down buttons, arrow buttons, mouse selects etc. It detects when the focus has changed and if nessicary, scrolls your content to suit.

The ScrollingData variable contains all of the information about the current scroll position of the scroll object. The main reason for this object to be kept seperate is so you can have two or more controls that all scroll together. By sharing a ScrollingData member, they can (but this is quite advanced - let's keep this for much later).

So now, let's create our Scroller object. OK - I know I just taught you about Clip, but now I'm going to be annoying and we are going to turn our Clip into a Scroller. Why did I take you through that step earlier? Because now you know about the Clip object and can use it in the future!

<Scroller MaximumSize="0,450" MinimumSize="0,450" Orientation="Vertical">

</LayoutInput>

<Scroller Orientation="Vertical">

We have a scroller. I've told it that we will be scrolling vertically.

We aren't quite done yet. There are still two more steps. We now have to link all of these different elements together. We have a Handler, a Data element and the Scroller itself...but they don't KNOW about each-other.

So let's hook our Scroller up to our ScrollingData object, by adding an attribute to our Scroller tag...

This was the easy part. The last trick we have to do is a leetle more complicated. We have to create a new rule to link the ScrollingHandler and ScrollingData. This rule is going to be run when the MCML page is first loaded, meaning it will have to be a default rule.

What it will do is link our ScrollingHandler to our ScrollingData object. This will mean that when the ScrollingHandler (which is responsible for noticing mouse-clicks, focus events etc.) notices that we have tried to scroll, it will tell the ScrollingData object, which will in turn scroll the Scroller.

ScrollingHandler has a member variable called ScrollingData. All we need to do is set it, with a set rule, like this...

<Rules>

</Rules>

There! If we run that, our new variables and Scroller object will keep everything nicely in line and when we move to far down or up, it will scroll to suit. Beautiful.

And finally, a cosmetic touch. We need a FadeSize, which tells Media Center how extreme - or how large - our fade will be when an object 'drops off'' the edge of our scroller. A value of zero will be a sharp cut, a value of five a relatively quick fadeout and 20 will give you a slow and gentle fade. And you can use both positive and negative fades. A positve fade will fade within the object (for example, it will cut into the rectangle you've specified in MaximumSize. A negative fade value will fade outside the bounds of this size.

Oh, and with that Clip object we were talking about earlier? You can't use a negative fadesize...because the whole point behind a Clip object is that anything you draw outside a Clip won't appear on the screen.

So let's set our FadeSize to -20.

And we are done!

Get the source here.