Creating a Title Control 

As I've mentioned before, UI elements have four components. Content, Properties, Rules and Locals.

To make reusable, flexible controls from a UI, we will need to use properties.

Let's start by creating a page heading - the fading-out text that appears in the top-right corner of most Media Center screens. When you look at it closely, it seems we should be able to achieve this fairly simply - all it is a piece of text that fades out as it approaches the bottom.

So - let's get to it.

From my previous post we learned to make a simple text object. I also mentioned the parent object called Clip that allows you to clip the contents of the region. We will use a clip to handle the fading of the text.

<UI Name="ScreenTitle">

   <Content>

      <Clip FadeSize="25" MaximumSize="500,70" NearOffset="-40" Orientation="Vertical">

       <Children>

        <Text Content="My Label" Color="White" Font="Segoe UI,45" Alpha="0.65" CenterPointPercent="1,0,1"/>

       </Children>

     </Clip>

   </Content>

</UI>

So quite simply we have replaced the Panel from the previous example with the clip object. Then we have made some property changes.

Font Options

Firstly, we set the font for the text to be one similar to that used by the normal Media Center screens.

Then we have set the 'alpha' of the text. This number tells Media Center how opaque the text will be - an alpha value of 1 is completely visible, an alpha of 0 is completely invisible.

Then we set the 'center point' of the text. This sets up the point where all of our transformations use as a 'center' for the text. For example, if your center was at 0.5,0.5,0.5 then any time you changed the size of the object, it would get larger in every direction around the dead-center of the object. If you have a center of 1,1,1 and resized the text, it would grow, but the bottom-right hand corner would stay where it is. We set the corner here so that the text becomes right-justified - any changes will make it stretch towards the left-hand side of the screen rather than the right.

Clip Options

The clip is fairly simple, apart from a little trick we have done to get the fade to look right. Firstly, we have set a 'maximumsize', to tell Media Center the size of the clipping region we want to create.

Then we set a FadeSize, which is the size (in pixels) of the fade that will happen when anything inside the clip gets too close to the edge. Since we want a slow, gradual fade we will pick something high, like 20.

We set the 'orientation' to vertical, since we want the text to fade out as it goes downwards on the screen.

 If you had this content right now, you would find that you are fading in TWO directions, from the top and from the bottom. There's an easy trick we can do though. A Clip object has a nearoffset and a faroffset parameter, which lets us 'fudge' where the fading starts and stops. So by setting our NearOffset to something below zero (-40) we make sure that you never get to see the start of the fade, but the end of the fade is in it's normal place.

Creating a Property

So, we now have our object. But if we want to be using this in different sections of our program (or using it in more programs than just this one), it'd would be nice to make it re-usable. But to do that, we would have to be able to change the text that appears in the title without having to re-write the control even time.

Well, there is a way.

UI's a completely self-contained structures. You can't interact with their contents from outside the UI. We can't, for example, access the text object in the <Content> of one UI from another. All communication in an MCML application is done through the properties of the objects.

So we will need to define a property that holds the text we would like to appear in our title. To do this, we open a Properties tag...

<Properties>

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

</Properties>

What we have done here is created a single property, of type 'String' from the 'cor' namespace (which we imported in our first tag - the MCML tag. 'cor' contains all of the core data types that we will need, such as Int, String etc.).

We have named it 'Title' and we have set it's default value to '$Required'. You set the default value by using an attribute that has the same name as the data type of the property.

'$Required' is a special value. It tells MCML that any time you create an instance of this UI, it MUST include the attribute named 'Title'. This is logical, since you will obviously need a title for your title object.

---

Using the Property

In most MCML attributes, you can use Object Paths to get values from variables rather than writing in the values yourself. This allows you to use the value of a property that you have defined (or that you get from your .NET code).

To use an object path, you place the name of the property you want within square brackets.

So now that we have our property, we can use it in our control. Let's take the text element we created earlier and make it's 'content' attribute be set to the 'Title' property we created.

        <Text Content="[Title]" Color="White" Font="Segoe UI,45" Alpha="0.65" CenterPointPercent="1,0,1"/>

There! Now we have a re-usable UI. But how do we use it?

--

Using the UI

In our main UI (usually the first in the file), we can use this new re-usable UI by simply creating it's name (with it's namespace) as a tag. For example, we could use our newly made title UI like this...