Styles

1. Styles
   1. Introduction
   2. Declaring a Style
   3. Basing Styles on Others
   4. Not Just Looks

Introduction

Styles are used to define classes of views and to change their default properties. If you’re familiar with HTML it works similar to CSS.

Declaring a Style

Styles are declared in an XML file under the Content/Styles folder:

MyStyles.xml

<MyStyles>
  <Button BackgroundColor="Red" /> 
  <Button Style="BigBlueButton" BackgroundColor="Blue" 
          Width="300" Height="80" /> 
</MyStyles>

The above file defines two styles. The first one changes the BackgroundColor on all buttons to red. The second style changes the BackgroundColor, Width and Height on all buttons with the style BigBlueButton to the values defined. Here is an example of using the style in a view:

MyView.xml

<MyView>
  <Group>
    <Button Text="Button1"/> 
    <Button Style="BigBlueButton" Text="Button2" /> 
  </Group>
</MyView>

The first button will have the default button style applied and be red. The second button will have the BigBlueButton style applied and be blue.

Basing Styles on Others

If you want to create a new style that is based on an existing style you can use the BasedOn attribute:

MyStyles.xml

<Button Style="BigButton" Width="300" Height="80" /> 
<Button Style="BigBlueButton" BasedOn="BigButton" 
        BackgroundColor="Blue"  /> 

Not Just Looks

It’s worth pointing out that, despite what the name implies, styles can be used to define any property and not just those that changes the appearance of the view. E.g. if you’re creating a mobile game and want all lists to select on mouse up by default you can change this using styles:

MyStyles.xml

<MyStyles>
   <List SelectOnMouseUp="True" />
</MyStyles>