About Ammy

Ammy is a UI language that compiles to XAML. Any XAML construct can be directly translated to Ammy syntax, but not vise versa, since Ammy has unique features specific to it. The goal is to create a concise, readable syntax and get rid of unnecessary clutter.

Basics

Window "MainWindow" {
  Width: 200
  Height: 100
  TextBlock { 
    Text: "Hello, World!"
  }
}

As you can see, Ammy syntax resembles JSON, but takes shortcuts to make it more human readable.

One important distinction is the fact that comma is optional if you define properties on different lines.

Width: 100 
Height: 100, 
Background: Red 

If your properties are defined on the same line though, comma is mandatory.

Width: 100, Height: 200, Background: Red // Error will be given, if comma is omitted

Other distinction is support for C-style comments. Both // and /* */ work as intended.

Mixins

Ammy allows you to create reusable components called mixins. Once defined they can be used anyplace in the same scope.

// Definition
mixin Header() for TextBlock {
  FontSize: 18
  FontFamily: "Segoe UI"
}
 
// Usage
TextBlock { 
  #Header
  "Chapter 1"
}

In this case we have defined a mixin called Header. Applied to any TextBlock it will add FontSize and FontFamily properties to that element. You can apply multiple mixins to any given element, unlike native XAML Styles that can’t be mixed. Mixins can also define zero or more parameters to use as attribute values.

// Definition
mixin Square(side) for Border {
  Width: $side
  Height: $side
}
 
// Usage
Border { 
  #Square(16)
}

More about mixins

Realtime update

If you are using Visual Studio as an IDE for Ammy development you can update UI on live application.

  1. Start debugging
  2. Change something in ammy file
  3. Hit Control + S
  4. UI is updated without application restart, while Viewmodel state and everything else stays the same

So, for example, you have an application that displays a twitter feed. You have defined a Tweet control as following:

UserControl "Tweet" {
  TextBlock { Text: bind tweet_text }
}

You run this application and see that avatar is missing. So naturally, you
decide to fix it:

UserControl "Tweet" {
  Grid {
    Image { Source: bind tweet_avatar }
    TextBlock { 
      Text: bind tweet_text, 
      Margin: "40, 0, 0, 0"
    }
  }
}

Now you just save the file and watch as all loaded tweets are updated to a new look.

There are some restrictions though. For example you can’t add new ammy file and expect it be used without restarting your application. You also can’t change root node type. Although using UserControl as a root object basically negates this problem.

IDE support

We have intellisense, realtime error checking, syntax coloring and a lot more!

Demonstration

Watch the development of a simple data entry application. Note that application was always running during the development, never needing to restart. Also note how window structure and presentation are separated. Structure being in MainWindow.ammy file, while all presentation resides in MainWindowMixins.ammy.

Skip to 24:30 if you want to see resulting code and application.

Try it!

Write install-package Ammy in your Visual Studio package manager and hit Enter.

After that install Visual Studio extension called Ammy from extension gallery. Without this extension you won’t have syntax coloring or realtime update support. Extension also adds new item templates to Add -> New Item... dialog.

Now go to syntax documentation and discover more great features!