OK - we have a base to work with - an MCML file that describes a nice little layout for our application, and a C# file that is used to provide data to it.
Now, how about we make this thing a little bit more interactive?
In our game, we are going to need to give people the option to choose between categories of question. To do that, we will need to give them a menu of options to play with.
So let's create a button our users can press to choose the category of trivia question!
Because this button is going to be used in several places, let's turn it into a UI. As I discussed earlier, this is a very good way of doing things because UI's are reusable. We will call this button TextButton - this describes what it is, as it will simply be a single line of text.
<
UI Name="TextButton">
</
UI>
There we go. A boring start, but a start none-the-less.
OK - now our button needs to have some content. Just to make things easy, I find it is always good practise to start each object off with a 'Panel'. It allows you to fade, scale, scroll and control the contents of your UI very easily if you have a nice, named panel containing all of your visual elements.
<
Content>
<
Panel Name="ButtonPanel">
<
Children>
</
Children>
</
Panel>
</
Content>
As you can see, we have created a panel, named 'ButtonPanel'. Right now it has no children - it's a completely empty UI.
Let's add content to it. We need to show the user the name of the category - this way they know what they are choosing. The easiest way to do that is with a text element.
<
Text Content="Test" Color="White" Alpha="0.75" Font="Arial,25,Bold"/>
There. Our button now says 'Test', in large white letters that are slightly transparent.
Like we have done in our earlier example of creating the BackgroundText object, our TextButton object is going to be created by our main UI - we need to pass it the text we want it to use.
To do this, we need to define a property - let's call it label, just like we did in the BackgroundText object.
<
Properties>
<
cor:String Name="Label" cor:String="$Required"/>
</
Properties>
Our TextButton UI now has a property called Label, that is a string and must be specified when you create your TextButotn element.
Now we change the <text> tag we created earlier to use that label...
<Text Content="[Label]" Color="White" Alpha="0.75" Font="Arial,25,Bold"/>
------------
MCML SO FAR:
<UI Name="TButton">
<Properties>
<!-- The text to show -->
<cor:String Name="Label" cor:String="$Required"/>
</Properties>
<
Content>
<Panel Name="ButtonPanel">
<Children>
<Text Content="[Label]" Color="White" Alpha="0.75" Font="Arial,25,Bold"/>
</Children>
</Panel>
</Content>
</
UI>
------------
OK - let's try using this new UI in our main UI...
First, let's create another panel. Our first object is in the top-right corner, but we want our list to be closer to the center of the screen.
Once we have our panel, we can fill it with a few buttons. Let's say three - one for 'All Categories', one for 'Entertainment' and one for 'Sports'.
<
Panel>
<Children>
<
me:TextButton Label="All Categories"/>
<
me:TextButton Label="Entertainment"/>
<
me:TextButton Label="Sport"/>
</
Children>
</
Panel>
Remeber - by putting 'me' in as the namespace for our buttons, you are saying 'Look in this file to find the UI'.
If we run this, we get one strange looking mess. This is because we haven't specified a Layout Manager, and if we don't everything simply gets thrown in the middle.
So let's add the attribute 'Layout="VerticalLayout"' to the Panel. All of a sudden, we get this.
That's quite nice...but looking a little lop-sided. Wouldn't it be better if they were all centered? It would give the whole thing symetry. Well, there's nothing we can do just in the Panel tag alone - we now need to branch out a bit.
Before we specify the <children> of our panel, what we can do is start a layout tag. This allows us to not only specify the layout method we want, but also pass some options to this layout method. These will commonly be spacing between the items, alignment of the items, etc.
So we want to stick to the basic FlowLayout idea, with one object following after the next. So we write this into our MCML, right after the panel tag starts but before the children one (although you don't need to put the Layouts before the Content, it does make life much easier when reading the code).
<Layout>
<
FlowLayout Orientation="Vertical" ItemAlignment="Center"/>
</
Layout>
And there you go. As you can see, we set the orientation attribute to "Vertical", meaning that our items will appear from top to bottom rather than left to right. We then also tell the Layout Manager to center all of the items.
This gives us a layout that looks like this.
OK - the visual aspects of the button and where we are putting it are all done. But how do we make it respond? Tune in soon for more info on that very shortly.
------------------
Download the MCML So Far from here
Posted
Apr 12 2007, 11:51 PM
by
IgnoranceIsBliss