How to create a Control Converter plugin.

MockupToXaml uses control converters in order to convert a Mockup control to a XAML control.

First you must understand how the MockupToXaml application resolves a Mockup Control to a XAML control. The program reads the Balsamiq Mockups BMML file and reads in the controls. A BMML control looks like this:

<control controlID="2" controlTypeID="com.balsamiq.mockups::Button" x="214" y="252" w="563" h="-1" measuredW="100" measuredH="5" zOrder="2" locked="false" isInGroup="-1"/>

The controlTypeID is what we use to locate a template XML file.

The application looks in the /Templates folder for a file named after the controlTypeID (with the colon : characters replaced with an underscore. So the template file for the control above would be: com.balsamiq.mockupsButton.xml

This XML file would contain the following code:

<?xml version="1.0" encoding="utf-8" ?>
  <Template><![CDATA[<Button Width="{Width}" Height="{Height}" Margin="{X},{Y},0,0" HorizontalAlignment="Left" VerticalAlignment="Top" />]]></Template>

The XML schema is documented below:

This is the name of the controlTypeID from the BMML file.

This is the xmlns required for the Template XAML code to function. There should always be an namespace as every control will need one.

The fully qualified path to the Assembly that will convert the BMML Mockup code into a snippet of XAML code.

The full class name to the class the implements the IMockupControlConverter interface. This is the class that actually does the work.

XAML Code snippet that will be expanded with the values from the ConverterClass loaded from the ConverterAssembly.

The StandardButton class is implemented like this:

namespace MockupToXaml.Converters
    public class StandardButton : IMockupControlConverter
        public StandardButton()
        public MockupTemplate Template { get; set; }

        public string ConvertMockupToXaml(MockupControl control)
            string code = string.Empty;

            code = Utility.PerformReplacements(Template.Template, control);

                // Add attributes for the mockup control properties
                XElement tag = XElement.Parse(code);
                Utility.ProcessProperty(tag, "Button", "Content", "text", control);

                return tag.ToString();
                return code;


The Template property is set to an object representation of the XML template document listed above. ConvertMockupToXaml is the method called by the application and is the main entry point for the plugin. The application passes in an object representation of the MockupControl fromt he BMML file as a parameter. The purpose tof the ConvertMockupToXaml method in your plugin is to perform the tasks necessary to expand the control template into well formed XAML.

In this case, the <Button /> XAML element is expanded and well formed XAML is returned to the program "code". This is just a basic example, you can get more complex by examining the BMML properties that are included in the MockupControl object parameter.

Last edited May 17, 2010 at 1:32 AM by dsandor, version 2


No comments yet.