Stage 1: A Basic Layout

Right, now let's begin playing with our application.

Our first order of business is to show something a little bit more informative that 'hello' on the main screen. To do this, we are going to use one of the UI's that are included with MCMLookalike (and that I described in this post ). We are going to create the faded text that appears in the background in the top-right corner most Media Center screens.

Using a UI from Another File

There are two steps if you are planning on using a UI in a seperate file. In this case, we are using a UI from the 'controls.mcml' file that should appear in your Solution Explorer in Visual Studio. The first step is to make sure that the file is added to your resource file. You do this because it is an easy way to include all of your MCML files in a single container that is never going to be seperated form your application..because it is PART of your application. In this example, it's already been done for you - but it's something to keep in mind if you ever make your own MCML libraries.

The next step is to add the file to the <mcml> tag as a namespace. This is very similar to using the "include" directive in C++ or the "Using" directive in C# or VB.NET. It tells Media Center that you will be using resources from another MCML file.

In this example, we change our MCML tag to look like the following...

<Mcml xmlns="http://schemas.microsoft.com/2006/mcml"

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

      xmlns:con="resx://TriviaCenter/TriviaCenter.Resources/Controls"

      xmlns:me="Me">

The first namespace we load - cor - contains all of the basic data types required for most Media Center applications, such as String and Int. This should be present in pretty much all MCML applications, unless it is very simple.

The second namespace - con - is short for 'controls'. The first characters tell Media Center what type of resource it is. In this case, we are accessing a resource file (resx). It's in the 'TriviaCenter' namespace, and it's contained in the class 'TriviaCenter.Resources'. Finally, it's file name is 'Controls'. This allows us to access all of the UI's that have been created in Controls.mcml, and it's why we went to the effort of putting the Controls file into our resource.

The final directive - me - is a reference to this MCML document, so you can use UI's that you declare elsewhere through the file.

Using the UI

   If you look through Controls.mcml, you will find a class called 'backgroundtext'. This is the UI we will be using for the background text (is anyone surprised?)

-------

<!-- The Background Text Element -->

<UI Name="BackgroundText">

    <Properties>

        <!-- The text to appear in the control -->

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

    </Properties>

    <Content>

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

            <Children>

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

            </Children>

        </Clip>

    </Content>

</UI>

-------

   The text above is the complete text of the 'backgroundtext' UI in Controls.mcml.

   So first thing is first - open the 'StartPage.mcml' file from your Solution Explorer. Find the <text> tag and delete it - we won't need to be displaying that 'hello' message anymore.

   Now we create a BackgroundText UI. To do this, we simply create a new tag. Starting with the namespace name (because this control is defined in our Controls.mcml file, we use the namespace con, as described earlier) a semi-colon and then the name of the UI, which is backgroundtext.

   So we should now have a tag reading...

   <con:BackgroundText/>

   So let's give it one!

    <con:BackgroundText Label="triviacenter"/>

   Excellent. Just for the hell of it, let's press F5 and take a look at what we have done so far...

   Nice! But we aren't going to want to have that thing right in the middle of the screen!

   One of my recent posts was on using layout managers to position UI elements on your screen. I think now is a good time to try them out. As described in my post, we need to do a couple of things first to help set everything out.

   First, let's put the BackgroundText object inside a container, like a panel. This does a couple of things - first, it lets us position the elements within the panel, as well as allowing us to have more than one object inside our UI.

   So - now we should have something like this...

 <Panel>

    <Children>

        <con:BackgroundText Label="triviacenter"/>

    </Children>

</Panel>

  OK. Now, we need to tell the Panel what kind of layout we are going to use. I find one of the best layout methods of positioning elements around the screen is formlayout.

   We tell the Panel that we want to use the formlayout method simply by setting the 'layout' attribute of the panel tag.

   <Panel Layout="Form">

   Excellent. But FormLayout needs more information to work with. We now need to tell it where to put all of our objects (luckily, so far we only need to deal with one).

   To give any layout manager hints on where to place objects, you use the <LayoutInput> tag. As the name suggests, they allow you to give some kind of input to the layout manager. You put these tags inside the object you want to position. So in this case, because we want to move the BackgroundText object, we will put the LayoutInput tag inside the BackgroundText object.

       <con:BackgroundText Label="triviacenter">

           <LayoutInput>

           </LayoutInput>

       </con:BackgroundText>

   We now have a place to put our input to the layout manager.

   Each layout type has it's own special tag for input. For the FormLayout method, you need the <FormLayoutInput> tag. It shouldn't take too much brainpower to figure out that others, such as HorizontalLayout, will probably need <HorizontalLayoutInput> ;)

   Each FormLayoutInput tag takes a number of attributes - Left, Right, Top and Bottom. Each of these are given as <relativeto>,<offset>. The <relativeto> part is the name of the UI element (eg. the Panel, Text object etc.) that you are positioning this item relative to, and given as a percentage of the width or height of the relative object.

   This is a little complicated - we will see how this works later. But as a simple example, let's get the positioning right on this background text object.

   Firstly, because we want the object to be at the top of the screen, we should get that right. This is relatively easy...

   <FormLayoutInput Top="Parent,.05"/>v

   OK - what you need to visualise here is that the PANEL object we created now fills the entire screen. Since the panel is the parent of our BackgroundText UI, it means that if we use the above tag, it will place the top of our background text object at a distance of 0.05x of the height of the panel from the top of the panel - which is also basically 1/20th (0r 5%) of the way down the screen.

   We can do the same trick with the horizontal position. But since we want our text to be right-aligned (eg. if the writing gets bigger for longer program names, we don't want the text wandering off the right-hand side of the screen!) we need to set the position of the right of the object.

   OK - that will do for this stage - we have a control we can use, in a sensible position. Now, what if for some reason we wanted to be able to change the text of this title? What if we wanted to show what trivia category you are using? Well, for that we are going to need our C# object, and that's the topic of the next walkthrough.

Download the sample project for this stage - Stage 1