Create New Control

Steps to create a new control

1. Create Control
2. Create Renderer Interface
3. Create Renderers
   1. Implement ViewModel Rendering
   2. Implement Ux Rendering

Example: Create a Button Control

Control source

using T4UtilityBelt.UiModels3.Renderers;

namespace T4UtilityBelt.UiModels3
{
    public class ButtonControl : Control<ButtonControl, IButtonRenderer>
    {
        private string _commandName;
        public string CommandName
        {
            get
            {
                if (string.IsNullOrEmpty(_commandName))
                {
                    return Name;
                }
                return _commandName;
            }
            set { _commandName = value; }
        }
    }
}

Interface source

namespace T4UtilityBelt.UiModels3.Renderers
{
    public interface IButtonRenderer : IRenderer<ButtonControl, IButtonRenderer>
    {
    }
}

Renderer Source for Windows Tablet

using T4UtilityBelt.UiModels3.Renderers;
using T4UtilityBelt.Writers3;

namespace T4UtilityBelt.UiModels3.WinT
{
    public class ButtonRenderer : Renderer<ButtonControl, IButtonRenderer>, IButtonRenderer
    {
        // <Button Content="Go!" Command="{Binding SearchCommand}"></Button>
        protected override void OnRenderUiXmlBegin(ButtonControl control, UiCodeWriter writer)
        {
            writer.WriteBeginTag("Button");
            RenderControlAttributes(control, writer);
            writer.WriteAttributeFormat("Command", @"Template:Binding SearchCommand", control.CommandName);
            writer.WriteEnd();
        }

        protected override void OnRenderUiXmlContent(ButtonControl control, UiCodeWriter writer)
        {
            control.Controls.RenderUiXml(writer);
        }

        protected override void OnRenderUiXmlEnd(ButtonControl control, UiCodeWriter writer)
        {
            writer.WriteEndTag("Button");
        }

        protected override void OnRenderViewModelCs(ButtonControl control, CsCodeWriter writer)
        {
            writer.WriteFormatLine(
@"      public ICommand {0}Command
        {{
            get
            {{
                return new MvxRelayCommand(Execute{0});
            }}
        }}
 
        public Partial void Execute{0}();
",
control.CommandName
);

        }
    }
}