Looking Like Media Center: Background Text

OK, we now have the tools in hand to create our first UI element - the text that appears in the background of Media Center interfaces (check in the top right corner of almost any Media Center window).

It's a fairly simple beast really - we simply need a text control that gradually fades out vertically.

But we are going to implement this as a reusable control. So put your MCML hats on, and let's dive in.

<UI Name="BackgroundText">
</UI>

That's kind of obvious really - we have defined our control.

Like our previous example, we are going to need to be able to change the text that appears in the control. We will use a property called 'Label'.

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

Now we create the control we need...

...
  <Content>
    <Text Name="TextLabel" Color="White" Font="Arial,40"/>
  </Content>
...

And we set up a binding between the property Label and the text control TextLabel.

...
  <Rules>
    <Binding Source="[Label]" Target="TextLabel.Content"/>
  </Rules>
...

OK, that gets us text...but it's bright white! That's not really of any use to us yet. So first, we need to set the alpha property of the text. This chooses how transparent it is going to be. We need the background blue to show through into our interface, so we need something around 25% transparent. So an alpha value of 0.75 (Alpha is a measurement of how VISIBLE an object is, so it's the inverse of the transparency of an object) will do nicely.

    <Text Name="TextLabel" Color="White" Font="Arial,40" Alpha="0.75"/>

Well, it's now transparent, but we have no fade. The last step in this process is to create a CLIP object, which will allow us to make gradient fades around the edges of a defined rectangle.

Clip objects contain all of the objects they will effect, so we need to change the content tag to contain the following...

...
  <Content>
    <Clip Orientation="Vertical" MaximumSize="300,60" FadeSize="26" NearOffset="-40">
      <Children>
        <Text Name="TextLabel" Color="White" Font="Arial,40"/>
      </Children>
    </Clip>
  </Content>
...

The key to the fading is the 'FadeSize', 'Orientation' and 'NearOffset' attributes of the Clip object.

Orientation determines the direction of the fade (eg. since we want the text to fade downwards, Vertical is the obvious solution).

Fadesize is the physical size of the gradient fade. A fadesize of 26 like we have above will make all objects start fading once they are within 26 pixes of the edge of the box.

NearOffset (and FarOffset) adjust the starting places of the gradient fades. In this case, we are moving the NearOffset WAY back. This is so that the TOP of our next does not become faded, but the BOTTOM will be, because we have left FarOffset at it's normal level.

There you have it. A reusable control to start you on your way. Of course, we still need to tweak the font to match the one used in Media Center, but I'll leave that up to you. And when you DO figure it out, could you tell me what it is? I can't find the bugger :)

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

  <Rules>
    <Binding Source="[Label]" Target="TextLabel.Content"/>
  </Rules>

  <Content>
    <Clip Orientation="Vertical" MaximumSize="300,60" FadeSize="26" NearOffset="-40">
      <Children>
        <Text Name="TextLabel" Color="White" Font="Arial,40"/>
      </Children>
    </Clip>
  </Content>

</UI>