Ultraviolet Markup Language

Ultraviolet Markup Language (UVML) is the XML-based markup language used to define an Ultraviolet Presentation Foundation layout.

Defining a View

A UPF view is defined by adding a <View> element to the <UIPanelDefinition> element which represents a particular screen (see Sample 9 - Managing State with Screens). This element must have an attribute called ViewModel which, as its name implies, specifies the assembly-qualified type name of the view's view model.

<?xml version="1.0" encoding="utf-8">
<UIPanelDefinition>
    <View ViewModel="My.Game.ViewModelType, My.Game">

    </View>
</UIPanelDefinition>

The view model is a special object to which the view's elements can bind themselves. Using this functionality, they can directly call methods on the view model in response to events, and they can both read and update the values of the view model's properties.

The actual object instance which the screen uses as its view model must be passed to it in code. This is best done by overriding the protected OnViewLoaded() method which which is defined by the UIScreen class.

public class MyScreen : UIScreen
{
    protected override void OnViewLoaded()
    {
        View.SetViewModel(new ViewModelType());
        base.OnViewLoaded();
    }
}

Declaring Elements

The UVML markup which defines a view's layout is added directly beneath the <View> element. To add an element to the view, simply add an XML element with the corresponding name.

<View>
    <Button>Hello, world!</Button>
</View>

Note that there is an implicit instance of the Grid layout container, the layout root, which always exists at the top level of the layout tree; the Button in this example is a child of the layout root.

Binding Properties

You can set the value of any of the element's properties via an attribute:

<View>
    <Button HorizontalAlignment="Stretch">Hello, world!</Button>
</View>

Note that in this example we've put the string "Hello, world!" directly inside of the XML element. This causes it to be assigned to the UPF element's default property, which in the case of content controls like Button is the Content property.

You can also set property values using specially-qualified XML elements:

<View>
    <Button>
        <Button.HorizontalAlignment>Stretch</Button.HorizontalAlignment>
        <Button.Content>Hello, world!</Button>
    </Button>
</View>

This is most useful when the value of a particular property cannot be represented by a simple string, such as is the case with a Grid's ColumnDefinitions and RowDefinitions properties.

<View>
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="100" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
    </Grid>
</View>

Binding Events

In addition to binding properties, you can bind events to handler methods on the view model.

<View>
    <Button Click="HandleClick">Click me!</Button>
</View>

This will cause the button to call the HandleClick() method whenever it processes the Click event. The method on the view model must match the signature of the routed event's handler delegate.

Hierarchy

Nesting an element inside of another element makes it a child of that element.

<View>
    <StackPanel>
        <Button>Hello</Button>
        <Button>world!</Button>
    </StackPanel>
</View>

This is only valid when the parent is a type which can contain children, such as a content control or layout container.

Binding Expressions

Binding expressions specify that a property should be bound to the view model, rather than being given a literal value. These expressions are distinguished by the fact that they're {{surrounded by double curly braces}}.

Binding expressions can be used to specify the value of any dependency property.

<View>
    <Button>{{ViewModelProperty}}</Button>
</View>

A binding expression can contain any valid C# code fragment. The code is scoped to your view model, so you can access properties and methods of the view model without qualification.

Please see the UPF Binding Expressions article for more detail on this topic.