Playing around with Media Center and MCML

Article
04/12/2007

Getting a bit off subject again, I recently started playing around at home with Media Center and MCML. MCML basically allows you to create full fidelity applications using Media Center and, as I understand, is what most of the Media Center UI is created on.

It’s a rather strange programming language as the goal is to completely separate the UI (view) from the data (model). While this certainly isn’t anything new, here it is taken to the extreme in that many things that you would normally do in code, such as events, is done in XML. Another thing is there is no library of basic controls to build applications on – everything you need you will have to create from scratch.

First, a disclaimer. I work on the Unified Communications team, not in the Media Center team – so my knowledge of MCML and Media Center is limited to the same resources you can find on the web. While I do know a few people on that team, I have refused to bug them with my questions.

I will do a quick walkthrough of a (poorly written) application that I recently created. The goal was to create a real estate searching application as my wife is studying to be a real estate agent so that was the subject that popped out first. However, I doubt I will take this application much further than where it currently is (which is not very far).

The following is my opening MCML page.

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

xmlns:a="assembly://RealEstateSearcher/RealEstateSearcher"

xmlns:multiselect="resx://RealEstateSearcher/RealEstateSearcher.Resources/MultiSelect"

xmlns:re="assembly://RealEstateSearcher/RealEstateSearcher.Code"

xmlns:styles="resx://RealEstateSearcher/RealEstateSearcher.Resources/Styles"

xmlns:nav="resx://RealEstateSearcher/RealEstateSearcher.Resources/NavigationPanel"

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

xmlns:me="Me">

<Panel>

<multiselect:MultiSelect>

<Model>

<re:MultiChoice Description="My Radio Group">

<re:MultiChoiceItem Title="Beaux Arts" />

<re:MultiChoiceItem Title="Bellevue" />

<re:MultiChoiceItem Title="Bothell" />

<re:MultiChoiceItem Title="Carnation" />

<re:MultiChoiceItem Title="Clyde Hill" />

<re:MultiChoiceItem Title="Duvall" />

<re:MultiChoiceItem Title="Hunts Point" />

<re:MultiChoiceItem Title="Issaquah" />

<re:MultiChoiceItem Title="Kenmore" />

<re:MultiChoiceItem Title="Kirkland" />

<re:MultiChoiceItem Title="Medina" />

<re:MultiChoiceItem Title="Mercer Island" />

<re:MultiChoiceItem Title="Newcastle" />

<re:MultiChoiceItem Title="Redmond" />

<re:MultiChoiceItem Title="Renton" />

<re:MultiChoiceItem Title="Sammamish" />

<re:MultiChoiceItem Title="Woodinville" />

<re:MultiChoiceItem Title="Yarrow Bay" />

</Options>

</re:MultiChoice>

</Model>

</multiselect:MultiSelect>

</Children>

</Graphic>

</Children>

</Panel>

</Content>

</UI>

</Mcml>

For those of you who have used XAML the top will look very familiar. Basically I am just imported other classes so I can use them in this file. The UI element specified what can be considered a control or a page. There are four possible child elements of the UI element and I use only one here – Content – which is basically what should appear on the screen.

Content can have only one child, so I used a panel to arrange things on the screen and then I set a background image under that. Finally, I reference a MultiSelect object that I created and pass it in data. The code for MultiSelect is data related so it is written in C#.

using System;

using System.Collections;

using System.Collections.Generic;

using System.Text;

using Microsoft.MediaCenter.UI;

namespace RealEstateSearcher.Code

{

/// <summary>

/// Handles the model for a list of values where multiple values can be selected

/// </summary>

public class MultiChoice : ModelItem, IValueRange

{

#region Private member variables

private string _title;

private List<string> _chosenOptions;

private IList _options;

private int _currentIndex;

#endregion

#region Constructor

/// <summary>

/// Creates a new MultiChoice instance

/// </summary>

public MultiChoice()

{

_chosenOptions = new List<string>();

_currentIndex = 0;

}

#endregion

#region Properties

/// <summary>

/// The description of the choice

/// </summary>

public string Title

{

get

{

return _title;

}

set

{

if (_title != value)

{

_title = value;

FirePropertyChanged("Title");

}

/// <summary>

/// The list of options available

/// </summary>

public IList Options

{

get

{

return _options;

}

set

{

if (_options != value)

{

_options = value;

FirePropertyChanged("Options");

}

/// <summary>

/// Returns a string representing the selected options

/// </summary>

public string SelectedOptions

{

get

{

return String.Join(", ", _chosenOptions.ToArray());

}

/// <summary>

/// The text used to specify the items the user selected

/// </summary>

public string SelectText

{

get

{

if (_chosenOptions.Count == 0)

{

return Resources.No_Option_Selected;

}

else if (_chosenOptions.Count == 1)

{

return Resources.Single_Option_Selected;

}

else

{

return Resources.Multi_Option_Selected;

}

#endregion

#region Methods

/// <summary>

/// Toggles the specified selection

/// </summary>

/// <param name="selection">The selection to toggle</param>

public void ToggleSelection(string selection)

{

// See if we are adding or removing the selection

if (true == _chosenOptions.Contains(selection))

{

// Remove the option

_chosenOptions.Remove(selection);

}

else

{

// Add the option

_chosenOptions.Add(selection);

}

FirePropertyChanged("SelectedOptions");

FirePropertyChanged("SelectText");

}

#endregion

#region IValueRange Members

/// <summary>

/// Returns true if we have a next value

/// </summary>

public bool HasNextValue

{

get

{

if (_currentIndex < _options.Count)

{

return true;

}

else

{

return false;

}

/// <summary>

/// Returns true if we have a previous value

/// </summary>

public bool HasPreviousValue

{

get

{

if (_currentIndex > 0)

{

return true;

}

else

{

return false;

}

/// <summary>

/// Moves to the next value

/// </summary>

public void NextValue()

{

_currentIndex++;

}

/// <summary>

/// Moves to the previous value

/// </summary>

public void PreviousValue()

{

_currentIndex--;

}

/// <summary>

/// Gets the current value

/// </summary>

public object Value

{

get

{

return _options[_currentIndex];

}

#endregion

}

Most of this code will be of use in our actual MultiSelect control. It implements IModelItem, which is required for all model objects. It is not overly complex but basically allows one to keep track of which items are selected. IValueRange is an MCML interface used by the UI to iterate through my data. When doing data binding, it is important to call FirePropertyChanged to alert the UI that the value has changed. The following is the MCML for my MultiSelect, which displays the UI.

<Mcml

xmlns="https://schemas.microsoft.com/2006/mcml"

xmlns:re="assembly://RealEstateSearcher/RealEstateSearcher.Code"

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

xmlns:checkbox="resx://RealEstateSearcher/RealEstateSearcher.Resources/Checkbox"

xmlns:button="resx://RealEstateSearcher/RealEstateSearcher.Resources/Button"

xmlns:styles="resx://RealEstateSearcher/RealEstateSearcher.Resources/Styles"

xmlns:me="Me">

<re:MultiChoice Name="Model" MultiChoice="$Required" />

<AnchorLayoutInput Name="AlignToTop"

Top="Scroller,0,-100" Bottom="Scroller,0,-15" Vertical="Far"

Left="Scroller,0" Right="Scroller,1" Horizontal="Center"

ContributesToHeight="false"/>

<AnchorLayoutInput Name="AlignToBottom"

Top="Scroller,1,15" Bottom="Scroller,1,100" Vertical="Near"

Left="Scroller,0" Right="Scroller,1" Horizontal="Center"

ContributesToHeight="false"/>

</Properties>

<Rules>

</Actions>

</Changed>

</Actions>

</Changed>

</Rules>

</Locals>

<Text Name="TopText" Content="resx://RealEstateSearcher/RealEstateSearcher.Resources/MultiSelect_Top_Title"

Color="LightGray" Font="font://styles:SectionTitle" Padding="0,0,0,20">

</LayoutInput>

</Text>

</Layout>

</LayoutInput>

<Text Name="SelectText" Color="LightGray"

Font="font://styles:SecondaryText" Margins="0,0,0,30" />

<Text Name="Selection" Color="Red" Font="font://styles:SecondaryText"

Margins="0,0,0,30" WordWrap="true"/>

</Children>

</Panel>

<me:ScrollButton Name="ScrollUpButton" Model="[ScrollUp]"

Image="resx://RealEstateSearcher/RealEstateSearcher.Resources/MouseNavUp" FocusImage="resx://RealEstateSearcher/RealEstateSearcher.Resources/MouseNavUpFocus"

LayoutInput="[AlignToTop]"/>

<me:ScrollButton Name="ScrollDownButton" Model="[ScrollDown]"

Image="resx://RealEstateSearcher/RealEstateSearcher.Resources/MouseNavDown" FocusImage="resx://RealEstateSearcher/RealEstateSearcher.Resources/MouseNavDownFocus"

LayoutInput="[AlignToBottom]"/>

<Scroller Name="Scroller" Orientation="Vertical"

ScrollingData="[ScrollData]" FadeSize="-5">

</LayoutInput>

<GridLayout Orientation="Vertical" Columns="1"

Spacing="10,10" AllowWrap="false"/>

</Layout>

</Keyframes>

</Animation>

</Animations>

</Repeater>

</Children>

</Scroller>

</Children>

</Panel>

</Content>

<checkbox:CheckBox Model="[Model]" Option="[RepeatedItem!re:MultiChoiceItem]" />

</Content>

</UI>

</Properties>

<Rules>

</Actions>

</Condition>

</Rules>

</UI>

</Mcml>

Here I specify other possible child elements of the UI element. The Properties child allows me to create variables that are subject to change. If the value is set to $Required it must be passed in but I can pass the value to any of these I desire. If you scroll back up to the default page you will see that I pass in the value of Model, which is required. The AnchorLayoutInput elements are just shortcuts for later and specify that those elements should be aligned to the top of the parent or to the bottom.

The Rules section allows me to specify bindings and event handlers. The Default element allows me to give an element a default value. Here I have several elements that specify the data from the C# code I showed above is used to populate a scrolling repeater element – which is how data lists are displayed in MCML. The event handlers here handle the case of the scroll up and scroll down buttons being clicked and scroll up or down as appropriate.

The Locals section allows us to specify variables not subject to change through the page. Here I have some command objects that handle the clicking of my up and down scroll buttons.

In the Panel of my Content element, I specify a layout of Anchor which allows me to specify the location of an item relative to its parent. I found it a bit tricky to get the hang of but eventually my controls ended up where I wanted them. Basically here I display two rows of text – where the first is just some static text saying what the user should do and the second displays the user’s selections. Finally I have a Scroller item that displays the data from my model. The Repeater is what actually handles the data and you can see below the Scroller I call a CheckBox element that I will get to shortly. Note that even though the Scroller and Repeater handle scrolling data, I still need to add the scroll buttons myself.

I placed the XML for the ScrollButton element within the same file at the bottom. It derives from the button element that I will also cover shortly. Basically here I set some common properties for the buttons and handle mouse focusing. I also keep it from the keyboard.

The code for button is a bit simpler than checkbox so I will cover that next.

<Mcml

xmlns="https://schemas.microsoft.com/2006/mcml"

xmlns:sys="assembly://mscorlib/System"

xmlns:styles="resx://RealEstateSearcher/RealEstateSearcher.Resources/Styles"

xmlns:me="Me">

<sys:Boolean Name="CenterText" Boolean="false"/>

</Properties>

</Locals>

<Rules>

</Actions>

</Condition>

</Actions>

</Condition>

</Actions>

</Condition>

<Condition Source="[CenterText]" SourceValue="true"

Target="[Background.Layout]" Value="Center"/>

</Rules>

<Graphic Name="Background" Content="[Image]" SizingPolicy="SizeToChildren"

MinimumSize="[TileMinSize]" MaximumSize="[TileMaxSize]">

</Children>

</Graphic>

</Content>

</UI>

</Keyframes>

</Animation>

</Mcml>

Here you can see what I mean by the fact that you have to implement almost everything yourself. I am sorry to say now that I am running out of time to write this post so rather than leave you in the dark about the rest of the code I will just post it without explanation below. If you have any questions about it please feel free to ask – though I can’t guarantee that I know the answer. I should also reiterate that I am just a beginner in MCML so a lot of what I am doing is likely wrong. But if you’d like to get a further feel for what you can do, here is the code for checkbox.

<Mcml

xmlns="https://schemas.microsoft.com/2006/mcml"

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

xmlns:re="assembly://RealEstateSearcher/RealEstateSearcher.Code"

xmlns:styles="resx://RealEstateSearcher/RealEstateSearcher.Resources/Styles"

xmlns:me="Me">

<re:MultiChoice Name="Model" MultiChoice="$Required" />

<re:MultiChoiceItem Name="Option" MultiChoiceItem="$Required"/>

</Properties>

</Locals>

<Rules>

</Conditions>

</Transformer>

</Set>

</Actions>

</Changed>

</Conditions>

</Transformer>

</Set>

</Actions>

</Changed>

</Conditions>

</Actions>

</Changed>

</Conditions>

</Actions>

</Changed>

</Conditions>

</Actions>

</Condition>

</Conditions>

</Actions>

</Condition>

</Conditions>

</Actions>

</Condition>

</Conditions>

</Actions>

</Condition>

</Conditions>

</Actions>

</Condition>

</Conditions>

</Actions>

</Condition>

</Conditions>

</Actions>

</Condition>

</Rules>

<Panel>

</Layout>

<Graphic Name="Check" Content="image://styles:CheckBoxNonFocus"

MouseInteractive="true" Margins="0,0,5,0" MaximumSize="[BoxSize]" Layout="Form">

<FormLayoutInput Left="Parent,0.2" Right="Parent,0.8"

Top="Parent,0.2" Bottom="Parent,0.8"/>

</LayoutInput>

</Graphic>

</Children>

</Panel>

</Content>

</UI>

</Mcml>

Several of these pages reference a style sheet which is defined as follows.

</Mcml>

Finally, here is the code for MultiChoiceItem, which is used by the MultiSelect and checkbox.

using System;

using System.Collections.Generic;

using System.Text;

using Microsoft.MediaCenter.UI;

namespace RealEstateSearcher.Code

{

/// <summary>

/// Handles items used in a multi choice

/// </summary>

public class MultiChoiceItem : ModelItem

{

private bool _isSelected;

private string _title;

/// <summary>

/// True if this choice is selected

/// </summary>

public bool IsSelected

{

get

{

return _isSelected;

}

set

{

if (value != _isSelected)

{

_isSelected = value;

FirePropertyChanged("IsSelected");

}

/// <summary>

/// The description of the choice

/// </summary>

public string Title

{

get

{

return _title;

}

set

{

if (value != _title)

{

_title = value;

FirePropertyChanged("Title");

}

Playing around with Media Center and MCML

Additional resources