Styling Native Controls

SUMMARY

A style is a collection of properties and their values.
HTML content can be styled with CSS, as always.
Native content can be styled with Style objects that can be defined in XAML or JavaScript.
In JavaScript, you can use JSON, such as:

{
  FontWeight: "Bold",
  Foreground: "Violet",
  Background: "SteelBlue"
}

For the HTML in your app, you style it the same ways as always, such as using CSS. However, this topic discusses how you style native controls.

Setting Properties Directly

You can set visual properties directly on UI objects. Here’s how it looks in XAML:

<Button FontWeight="Bold" Foreground="Violet" Background="SteelBlue" />

In JavaScript, you can call setPropertyName functions:

var b = new ace.Button();
b.setFontWeight("Bold");
b.setForeground("Violet");
b.setBackground("SteelBlue");

Common visual properties include:

Background
FontSize
FontWeight
Foreground
Height
Margin
Width

These cross-platform properties can not only be set on objects in the cross-platform UI framework, but they can be set on raw platform-specific controls as well. For example:

<if.iOS>
  <ios:UISegmentedControl Background="LemonChiffon" />
</if.iOS>
<if.Android>
  <android:RatingBar Background="LemonChiffon" />
</if.Android>

Ace maps these properties (and others, such as Content) to their most natural native counterparts.

Consolidating Properties Into a Style

A style is a simple object that consolidates properties and their values. In XAML, you can define and apply a style to a single button as follows:

<Button>
  <Button.Style>
    <Style TargetType="Button">
      <Setter Property="FontWeight" Value="Bold" />
      <Setter Property="Foreground" Value="Violet" />
      <Setter Property="Background" Value="SteelBlue" />
    </Style>
  </Button.Style>
</Button>

As all XAML can be naturally expressed in JavaScript instead, you could build up a style programmatically as follows:

// Don't actually do this. There's a better way about to be shown:
var b = new ace.Button();
var style = new ace.Style();
style.setTargetType("Button");

var setter1 = new ace.Setter();
setter1.setProperty("FontWeight");
setter1.setValue("Bold");
style.getSetters().add(setter1);

var setter2 = new ace.Setter();
setter2.setProperty("Foreground");
setter2.setValue("Violet");
style.getSetters().add(setter2);

var setter3 = new ace.Setter();
setter3.setProperty("Background");
setter3.setValue("SteelBlue");
style.getSetters().add(setter3);

b.setStyle(style);

However, as a shortcut, you can instead use JSON syntax:

var b = new ace.Button();
b.setStyle(
{
  FontWeight: "Bold",
  Foreground: "Violet",
  Background: "SteelBlue"
});

Usually, the purpose of defining a style is to share it among multiple objects. You can do this in XAML by adding it to a parent element’s Resources collection then referencing it with {StaticResource resourceName} syntax:

<StackPanel xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
  <StackPanel.Resources>
    <Style x:Key="MyStyle" TargetType="Button">
      <Setter Property="FontWeight" Value="Bold"/>
      <Setter Property="Foreground" Value="Violet"/>
      <Setter Property="Background" Value="SteelBlue"/>
    </Style>
  </StackPanel.Resources>

  <Button Style="{StaticResource MyStyle}">A</Button>
  <Button Style="{StaticResource MyStyle}">B</Button>
  <Button Style="{StaticResource MyStyle}">C</Button>    
</StackPanel>

In JavaScript, you can just reapply the same style instance:

var style = {
  FontWeight: "Bold",
  Foreground: "Violet",
  Background: "SteelBlue"
};

var b1 = new ace.Button();
b1.setStyle(style);
b1.setContent("A");

var b2 = new ace.Button();
b2.setStyle(style);
b2.setContent("B");

var b3 = new ace.Button();
b3.setStyle(style);
b3.setContent("C");

Styling Native Controls

Setting Properties Directly

Consolidating Properties Into a Style

Sharing Styles