vsXEN

vsXEN brings the power of Zen Coding/Emmet to WPF in Visual Studio.

This project is based on a heavily modified version of the C# Zen Coding library by Mads Kristensen.

For normal usage, the best way to install is through the Visual Studio Gallery / Visual Studio Marketplace.

Usage

Expansion

Type the shortcut or tag name, and press TAB to invoke Xen.

btn

<Button></Button>

Child >

You can nest children using the > symbol.

stack>list>li

<StackPanel>
    <ListBox>
        <ListBoxItem />
    </ListBox>
</StackPanel>

Sibling +

You can create siblings by using the + symbol.

btn+btn+txb

<Button></Button><Button></Button><TextBlock></TextBlock>

Multiplication *

You can create multiple elements by using the * symbol.

btn*3

<Button></Button>
<Button></Button>
<Button></Button>

Climb up ^

You can climb up in the hierarchy by using the ^ symbol. ^ climbs up one level, ^^ climbs up two levels, and so on.

dock>stack^btn

<DockPanel>
    <StackPanel>
    </StackPanel>
</DockPanel>
<Button></Button>

Item Numbering $

You can insert incrementing numbers at any point by placing one or more $ symbols. This is very useful in conjunction with multiplication.

listBox>li#li$$$$*4

<ListBox>
    <ListBoxItem x:Name="li0001"></ListBoxItem>
    <ListBoxItem x:Name="li0002"></ListBoxItem>
    <ListBoxItem x:Name="li0003"></ListBoxItem>
    <ListBoxItem x:Name="li0004"></ListBoxItem>
</ListBox>
        

XAML Specific Usage

Xen has XAML specific updates and new functionality.

Element Name #

You can declare the x:Name of an item by using the # suffix followed by the name.

button#foo

<Button x:Name="foo"></Button>

Style .

You can specify the Style of a control by using the . suffix followed by the Style x:Key.

btn.BlueButton

<Button Style="{DynamicResource BlueButton}" />

Properties []

Additional properties can specified - in full form. This can useful when multiple items need to have the same attribute set.

btn[Background="#FFCC00"]

<Button Background="#FFCC00" />

Advanced Usage

Example 1

dock>stack*2>listBox>li#li$$$$*4

<DockPanel>
    <StackPanel>
        <ListBox>
            <ListBoxItem x:Name="li0001"></ListBoxItem>
            <ListBoxItem x:Name="li0002"></ListBoxItem>
            <ListBoxItem x:Name="li0003"></ListBoxItem>
            <ListBoxItem x:Name="li0004"></ListBoxItem>
        </ListBox>
    </StackPanel>
    <StackPanel>
        <ListBox>
            <ListBoxItem x:Name="li0001"></ListBoxItem>
            <ListBoxItem x:Name="li0002"></ListBoxItem>
            <ListBoxItem x:Name="li0003"></ListBoxItem>
            <ListBoxItem x:Name="li0004"></ListBoxItem>
        </ListBox>
    </StackPanel>
</DockPanel>

Example 2

grid>stack#myStack>btn.BlueButton*3^+dock>btn[Background="#FFCC00"]+list>li#item$$*6

<Grid>
    <StackPanel x:Name="myStack">
        <Button Style="{DynamicResource BlueButton}"></Button>
        <Button Style="{DynamicResource BlueButton}"></Button>
        <Button Style="{DynamicResource BlueButton}"></Button>
    </StackPanel>
    <DockPanel>
        <Button Background="#FFCC00"></Button>
        <ListBox>
            <ListBoxItem x:Name="item01"></ListBoxItem>
            <ListBoxItem x:Name="item02"></ListBoxItem>
            <ListBoxItem x:Name="item03"></ListBoxItem>
            <ListBoxItem x:Name="item04"></ListBoxItem>
            <ListBoxItem x:Name="item05"></ListBoxItem>
            <ListBoxItem x:Name="item06"></ListBoxItem>
        </ListBox>
    </DockPanel>
</Grid>

Reference

Xen case corrects all common Xaml elements. Unlike HTML, XAML has case sensitive tags which can be problematic for Emmet-style coding which is fully lowercase. Xen automatically reformats a known tag to the proper case.

Additionally, any unknown tag in the sequence will be expanded as well. For custom expansion, for example, if you want to turn mxp to myExpandedTag, you can specify this in the options. (Options Nukeation Tools Xen)

Simplified

bd Border

check CheckBox

ci ComboBoxItem

combo ComboBox

cp ContentPresenter

date DatePicker

dock DockPanel

li ListBoxItem

list ListBox

mi MenuItem

radio RadioButton

rect Rectangle

rel RelativePanel

rtb RichTextBox

rtf RichTextBox

scroll ScrollViewer

split GridSplitter

stack StackPanel

tab TabItem

tabs TabControl

tb TextBlock

ti TreeViewItem

txt TextBox

uniform UniformPanel

wrap WrapPanel

Common Elements

button* Button

checkbox* CheckBox

combobox* ComboBox

image Image

label Label

listbox* ListBox

menu Menu

progressbar ProgressBar

radiobutton* RadioButton

rectangle* Rectangle

richtextbox* RichTextBox

textblock* TextBlock

textbox* TextBox

treeview TreeView

Containers

canvas Canvas

relativepanel* RelativePanel

scrollviewer* ScrollViewer

tabcontrol* TabControl

viewbox Viewbox

wrappanel* WrapPanel

border* Border

dockpanel* DockPanel

expander Expander

frame Frame

grid Grid

groupbox* GroupBox

stackpanel* StackPanel

Other Elements

calendar Calendar

contentcontrol ContentControl

datagrid DataGrid

datepicker* DatePicker

documentviewer DocumentViewer

ellipse Ellipse

gridsplitter GridSplitter

listview ListView

mediaelement MediaElement

passwordbox PasswordBox

scrollbar ScrollBar

separator Separator

slider Slider

statusbar StatusBar

toggle ToggleButton

toolbar ToolBar

toolbarpanel ToolBarPanel

toolbartray ToolBarTray

webbrowser WebBrowser

windowsformshost WindowsFormsHost

Children

comboboxitem ComboBoxItem

listboxitem ListBoxItem

menuitem MenuItem

treeviewitem TreeViewItem

Resource

ct ControlTemplate

set Setter

setter Setter

style Style

trig Trigger

trigger Trigger

* have simplified shortcuts

TODO