WPF XAML Code Snippets

After having worked in HTML for past 4 years, returning to WPF is quite a contrast. XAML is probably too noisy, but there's a lot of power that goes along with it.

It takes time to get a layout set up just right, so when we figure it out, maybe it's a good time to create a code snippet for XAML.

Fast Path

• Create a folder named Snippets in your current project.
• Add a new file named datagrid.snippet.
• Add code like this:

<?xml version="1.0" encoding="utf-8" ?>
<CodeSnippets xmlns="http://schemas.microsoft.com/VisualStudio/2005/CodeSnippet">
  <CodeSnippet Format="1.0.0">
    <Header>
      <Title>Instant DataGrid</Title>
      <Author>JWP</Author>
      <Description>XAML Markup for a data grid</Description>
      <Shortcut>DataGridSnippet</Shortcut>
    </Header>
    <Snippet>
      <Code Language="XAML">
        <![CDATA[
<DataGrid x:Name="processListDataGrid"
  EnableRowVirtualization="True"
  AutoGenerateColumns="False"
  RowDetailsVisibilityMode="VisibleWhenSelected">
  <DataGrid.Columns>
    <DataGridTemplateColumn Width="120">
      <DataGridTemplateColumn.CellTemplate>
        <DataTemplate>
          <Button Tag="{Binding id}" Click="OnKillProcess" HorizontalAlignment="Stretch">Stop Process</Button>
        </DataTemplate>
      </DataGridTemplateColumn.CellTemplate>
    </DataGridTemplateColumn>
    <DataGridTemplateColumn>
      <DataGridTemplateColumn.CellTemplate>
        <DataTemplate>
          <TextBlock Style="{DynamicResource gray}" Text="{Binding id}" />
        </DataTemplate>
      </DataGridTemplateColumn.CellTemplate>
    </DataGridTemplateColumn>
    <DataGridTemplateColumn>
      <DataGridTemplateColumn.CellTemplate>
        <DataTemplate>
          <TextBlock Style="{DynamicResource gray}"  Text="{Binding windowtitle}"></TextBlock>
        </DataTemplate>
      </DataGridTemplateColumn.CellTemplate>
    </DataGridTemplateColumn>
    <DataGridTemplateColumn>
      <DataGridTemplateColumn.CellTemplate>
        <DataTemplate>
          <TextBlock  Style="{DynamicResource gray}" Text="{Binding processname}"></TextBlock>
        </DataTemplate>
      </DataGridTemplateColumn.CellTemplate>
    </DataGridTemplateColumn>
  </DataGrid.Columns>
</DataGrid>
        ]]>
      </Code>
    </Snippet>
  </CodeSnippet>
</CodeSnippets>

For XAML snippets make sure the language is:

 <Code Language="XAML">

Tools Code Snippet Manager
Go to Tools/Code Snippet Manager and click on import.

Find your folder and the snippet and click "Open".

It's ready to use!

ShortCut
This line in the snippet sets the shortcut.

<Shortcut>DataGridSnippet</Shortcut>

Editing
Go back to a XAML file and type in the start of a tag, e.g. DataGrid

Intellisense kicks in and should show this:

Select the snippet and press tab twice!

Nice..

JWP2021 WPF Code Snippets