Visual Studio XAMLコードスニペット一覧

# ■目次

| [1.一覧](https://qiita.com/Kosen-amai/items/550f398e6675a0ba697f#1%E4%B8%80%E8%A6%A7) | [2.詳細](https://qiita.com/Kosen-amai/items/550f398e6675a0ba697f#2%E8%A9%B3%E7%B4%B0) | [3.インストール](https://qiita.com/Kosen-amai/items/550f398e6675a0ba697f#3%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB) | [4.使い方](https://qiita.com/Kosen-amai/items/550f398e6675a0ba697f#4%E4%BD%BF%E3%81%84%E6%96%B9) |
| ---- | ---- | ------------ | ------ |

# ■1.一覧

| ショートカット | 説明  |
| -------------- | ------------------------------------------------------ |
| [<kbd>btn</kbd>](https://qiita.com/Kosen-amai/items/550f398e6675a0ba697f#btn)  | Button  |
| [<kbd>btn#</kbd>](https://qiita.com/Kosen-amai/items/550f398e6675a0ba697f#btn-1)  | x:Name付きButton  |
| [<kbd>check</kbd>](https://qiita.com/Kosen-amai/items/550f398e6675a0ba697f#check)  | CheckBox  |
| [<kbd>check#</kbd>](https://qiita.com/Kosen-amai/items/550f398e6675a0ba697f#check-1)  | x:Name付きCheckBox  |
| [<kbd>radio</kbd>](https://qiita.com/Kosen-amai/items/550f398e6675a0ba697f#radio)  | RadioButton  |
| [<kbd>radio#</kbd>](https://qiita.com/Kosen-amai/items/550f398e6675a0ba697f#radio-1)  | x:Name付きRadioButton  |
| [<kbd>lbl</kbd>](https://qiita.com/Kosen-amai/items/550f398e6675a0ba697f#lbl)  | Label  |
| [<kbd>tblk</kbd>](https://qiita.com/Kosen-amai/items/550f398e6675a0ba697f#tblk)  | TextBlock  |
| [<kbd>tbx</kbd>](https://qiita.com/Kosen-amai/items/550f398e6675a0ba697f#tbx)  | TextBox  |
| [<kbd>tbx#</kbd>](https://qiita.com/Kosen-amai/items/550f398e6675a0ba697f#tbx-1)  | x:Name付きTextBox  |
| [<kbd>lbl+tbx</kbd>](https://qiita.com/Kosen-amai/items/550f398e6675a0ba697f#lbltbx)  | LabelとTextBoxのセット  |
| [<kbd>tblk+tbx</kbd>](https://qiita.com/Kosen-amai/items/550f398e6675a0ba697f#tblktbx)  | TextBlockとTextBoxのセット  |
| [<kbd>list</kbd>](https://qiita.com/Kosen-amai/items/550f398e6675a0ba697f#list)  | ListBox  |
| [<kbd>list#</kbd>](https://qiita.com/Kosen-amai/items/550f398e6675a0ba697f#list-1)  | x:Name付きListBox  |
| [<kbd>list>li</kbd>](https://qiita.com/Kosen-amai/items/550f398e6675a0ba697f#listli)  | ListBoxItemを含むListBox  |
| [<kbd>combo</kbd>](https://qiita.com/Kosen-amai/items/550f398e6675a0ba697f#combo)  | ComboBox  |
| [<kbd>combo#</kbd>](https://qiita.com/Kosen-amai/items/550f398e6675a0ba697f#combo-1)  | x:Name付きComboBox  |
| [<kbd>combo>ci</kbd>](https://qiita.com/Kosen-amai/items/550f398e6675a0ba697f#comboci)  | ComboBoxItemを含むComboBox  |
| [<kbd>border</kbd>](https://qiita.com/Kosen-amai/items/550f398e6675a0ba697f#border)  | Border  |
| [<kbd>rect</kbd>](https://qiita.com/Kosen-amai/items/550f398e6675a0ba697f#rect)  | Rectangle  |
| [<kbd>img</kbd>](https://qiita.com/Kosen-amai/items/550f398e6675a0ba697f#img)  | Image  |
| [<kbd>grid</kbd>](https://qiita.com/Kosen-amai/items/550f398e6675a0ba697f#grid)  | Grid  |
| [<kbd>rd</kbd>](https://qiita.com/Kosen-amai/items/550f398e6675a0ba697f#rd)  | RowDefinition。（Visual Studio 2019標準）  |
| [<kbd>rds</kbd>](https://qiita.com/Kosen-amai/items/550f398e6675a0ba697f#rds)  | RowDefinitions  |
| [<kbd>rds>rd*2</kbd>](https://qiita.com/Kosen-amai/items/550f398e6675a0ba697f#rdsrd2)  | RowDefinitionsの中にRowDefinitionが2つ  |
| [<kbd>rds>rd*3</kbd>](https://qiita.com/Kosen-amai/items/550f398e6675a0ba697f#rdsrd3)  | RowDefinitionsの中にRowDefinitionが3つ  |
| [<kbd>cd</kbd>](https://qiita.com/Kosen-amai/items/550f398e6675a0ba697f#cd)  | ColumnDefinition。（Visual Studio 2019標準）  |
| [<kbd>cds</kbd>](https://qiita.com/Kosen-amai/items/550f398e6675a0ba697f#cds)  | ColumnDefinitions  |
| [<kbd>cds>cd*2</kbd>](https://qiita.com/Kosen-amai/items/550f398e6675a0ba697f#cdscd2)  | ColumnDefinitionsの中にColumnDefinitionが2つ  |
| [<kbd>cds>cd*3</kbd>](https://qiita.com/Kosen-amai/items/550f398e6675a0ba697f#cdscd3)  | ColumnDefinitionsの中にColumnDefinitionが3つ  |
| [<kbd>stack</kbd>](https://qiita.com/Kosen-amai/items/550f398e6675a0ba697f#stack)  | StackPanel  |
| [<kbd>stackh</kbd>](https://qiita.com/Kosen-amai/items/550f398e6675a0ba697f#stackh)  | Horizontal指定のStackPanel  |
| [<kbd>wrap</kbd>](https://qiita.com/Kosen-amai/items/550f398e6675a0ba697f#wrap)  | WrapPanel  |
| [<kbd>dock</kbd>](https://qiita.com/Kosen-amai/items/550f398e6675a0ba697f#dock)  | DockPanel  |
| [<kbd>stack>btn*3</kbd>](https://qiita.com/Kosen-amai/items/550f398e6675a0ba697f#stackbtn3)  | StackPanelの中にButtonが3つ  |
| [<kbd>stackh>btn*3</kbd>](https://qiita.com/Kosen-amai/items/550f398e6675a0ba697f#stackhbtn3) | Horizontal指定のStackPanelの中にButtonが3つ  |
| [<kbd>winres</kbd>](https://qiita.com/Kosen-amai/items/550f398e6675a0ba697f#winres)  | Window Resources  |
| [<kbd>pgres</kbd>](https://qiita.com/Kosen-amai/items/550f398e6675a0ba697f#pgres)  | Page Resources  |
| [<kbd>ucres</kbd>](https://qiita.com/Kosen-amai/items/550f398e6675a0ba697f#ucres)  | UserControl Resources  |
| [<kbd>style</kbd>](https://qiita.com/Kosen-amai/items/550f398e6675a0ba697f#style)  | Style  |
| [<kbd>style#</kbd>](https://qiita.com/Kosen-amai/items/550f398e6675a0ba697f#style-1)  | x:Key付きStyle  |
| [<kbd>set</kbd>](https://qiita.com/Kosen-amai/items/550f398e6675a0ba697f#set)  | Setter。（Visual Studio 2019標準）  |
| [<kbd>#region</kbd>](https://qiita.com/Kosen-amai/items/550f398e6675a0ba697f#region)  | #region。（Visual Studio 2019標準）  |
| [<kbd>tag</kbd>](https://qiita.com/Kosen-amai/items/550f398e6675a0ba697f#tag)  | 任意のタグ。初期値はGrid。（Visual Studio 2017, 2019標準） |
| [<kbd>menu</kbd>](https://qiita.com/Kosen-amai/items/550f398e6675a0ba697f#menu)  | Menu |
| [<kbd>menu>mi</kbd>](https://qiita.com/Kosen-amai/items/550f398e6675a0ba697f#menumi)  | MenuItemを含むMenu |
| [<kbd>cmenu</kbd>](https://qiita.com/Kosen-amai/items/550f398e6675a0ba697f#cmenu)  | ContextMenu |
| [<kbd>cmenu>mi</kbd>](https://qiita.com/Kosen-amai/items/550f398e6675a0ba697f#cmenumi)  | MenuItemを含むContextMenu |


# ■2.詳細

## `btn`

```xml
<Button Content="Button" Margin="5" />
```

## `btn#`

```xml
<Button x:Name="btn1" Content="Button" Margin="5" />
```

## `check`

```xml
<CheckBox Content="CheckBox" IsChecked="True" Margin="5" />
```

## `check#`

```xml
<CheckBox x:Name="check1" Content="CheckBox" IsChecked="True" Margin="5" />
```

## `radio`

```xml
<RadioButton Content="RadioButton" IsChecked="True" Margin="5" />
```

[△一覧へ](https://qiita.com/Kosen-amai/items/550f398e6675a0ba697f#1%E4%B8%80%E8%A6%A7)

## `radio#`

```xml
<RadioButton x:Name="radio1" Content="RadioButton" IsChecked="True" Margin="5" />
```

## `lbl`

```xml
<Label Content="Label" Margin="5" />
```

## `tblk`

```xml
<TextBlock Text="TextBlock" Margin="5" />
```

## `tbx`

```xml
<TextBox Text="TextBox" Margin="5" />
```

## `tbx#`

```xml
<TextBox x:Name="txt1" Text="TextBox" Margin="5" />
```

[△一覧へ](https://qiita.com/Kosen-amai/items/550f398e6675a0ba697f#1%E4%B8%80%E8%A6%A7)

## `lbl+tbx`

```xml
<Label Content="Item Name1" Margin="5,5,5,0" Padding="0" />
<TextBox Text="Item Value1" Margin="5,0,5,5" />
```

## `tblk+tbx`

```xml
<TextBlock Text="Item Name1" Margin="5,5,5,0" />
<TextBox Text="Item Value1" Margin="5,0,5,5" />
```

## `list`

```xml
<ListBox ItemsSource="{}" SelectedIndex="0" Margin="5" />
```

## `list#`

```xml
<ListBox x:Name="list1" ItemsSource="{}" SelectedIndex="0" Margin="5" />
```

## `list>li`

```xml
<ListBox SelectedIndex="0" Margin="5">
    <ListBoxItem Content="item1" />
</ListBox>
```

[△一覧へ](https://qiita.com/Kosen-amai/items/550f398e6675a0ba697f#1%E4%B8%80%E8%A6%A7)

## `combo`

```xml
<ComboBox ItemsSource="{}" SelectedIndex="0" Margin="5" />
```

## `combo#`

```xml
<ComboBox x:Name="combo1" ItemsSource="{}" SelectedIndex="0" Margin="5" />
```

## `combo>ci`

```xml
<ComboBox SelectedIndex="0" Margin="5">
    <ComboBoxItem Content="item1" />
</ComboBox>
```

## `border`

```xml
<Border BorderBrush="Black" BorderThickness="1" Height="100" Width="100" />
```

## `rect`

```xml
<Rectangle Fill="LightGray" Height="100" Width="100" Stroke="Black" />
```

[△一覧へ](https://qiita.com/Kosen-amai/items/550f398e6675a0ba697f#1%E4%B8%80%E8%A6%A7)

## `img`

```xml
<Image Source="image1.png" />
```

## `grid`

```xml
<Grid></Grid>
```

## `rd`

```xml
<RowDefinition Height="1*" />
```

## `rds`

```xml
<Grid.RowDefinitions></Grid.RowDefinitions>
```

## `rds>rd*2`

```xml
<Grid.RowDefinitions>
    <RowDefinition Height="1*" />
    <RowDefinition Height="1*" />
</Grid.RowDefinitions>
```

[△一覧へ](https://qiita.com/Kosen-amai/items/550f398e6675a0ba697f#1%E4%B8%80%E8%A6%A7)

## `rds>rd*3`

```xml
<Grid.RowDefinitions>
    <RowDefinition Height="1*" />
    <RowDefinition Height="1*" />
    <RowDefinition Height="1*" />
</Grid.RowDefinitions>
```

## `cd`

```xml
<ColumnDefinition Width="1*" />
```

## `cds`

```xml
<Grid.ColumnDefinitions></Grid.ColumnDefinitions>
```

## `cds>cd*2`

```xml
<Grid.ColumnDefinitions>
    <ColumnDefinition Width="1*" />
    <ColumnDefinition Width="1*" />
</Grid.ColumnDefinitions>
```

## `cds>cd*3`

```xml
<Grid.ColumnDefinitions>
    <ColumnDefinition Width="1*" />
    <ColumnDefinition Width="1*" />
    <ColumnDefinition Width="1*" />
</Grid.ColumnDefinitions>
```

[△一覧へ](https://qiita.com/Kosen-amai/items/550f398e6675a0ba697f#1%E4%B8%80%E8%A6%A7)

## `stack`

```xml
<StackPanel></StackPanel>
```

## `stackh`

```xml
<StackPanel Orientation="Horizontal"></StackPanel>
```

## `wrap`

```xml
<WrapPanel></WrapPanel>
```

## `dock`

```xml
<DockPanel></DockPanel>
```

## `stack>btn*3`

```xml
<StackPanel>
    <Button Content="Button1" Margin="5,5,5,0" />
    <Button Content="Button2" Margin="5,5,5,0" />
    <Button Content="Button3" Margin="5,5,5,0" />
</StackPanel>
```

[△一覧へ](https://qiita.com/Kosen-amai/items/550f398e6675a0ba697f#1%E4%B8%80%E8%A6%A7)

## `stackh>btn*3`

```xml
<StackPanel Orientation="Horizontal">
    <Button Content="Button1" Margin="5,5,0,5" />
    <Button Content="Button2" Margin="5,5,0,5" />
    <Button Content="Button3" Margin="5,5,0,5" />
</StackPanel>
```

## `winres`

```xml
<Window.Resources></Window.Resources>
```

## `pgres`

```xml
<Page.Resources></Page.Resources>
```

## `ucres`

```xml
<UserControl.Resources></UserControl.Resources>
```

## `style`

```xml
<Style TargetType="Button"></Style>
```

[△一覧へ](https://qiita.com/Kosen-amai/items/550f398e6675a0ba697f#1%E4%B8%80%E8%A6%A7)

## `style#`

```xml
<Style x:Key="key1" TargetType="Button"></Style>
```

## `set`

```xml
<Setter Property="Background" Value="Red" />
```

## `#region`

```xml
<!--#region NewRegion -->
<!--#endregion-->
```

## `tag`

```xml
<Grid></Grid>
```

## `menu`

```xml
<Menu></Menu>
```

[△一覧へ](https://qiita.com/Kosen-amai/items/550f398e6675a0ba697f#1%E4%B8%80%E8%A6%A7)

## `menu>mi`

```xml
<Menu>
    <MenuItem Header="Item1" />
</Menu>
```

## `cmenu`

```xml
<ContextMenu></ContextMenu>
```

## `cmenu>mi`

```xml
<ContextMenu>
    <MenuItem Header="Item1" />
</ContextMenu>
```


[△一覧へ](https://qiita.com/Kosen-amai/items/550f398e6675a0ba697f#1%E4%B8%80%E8%A6%A7)


# ■3.インストール

## ◇Visual Studio 2017/2019共通作業

1. 「[XAML code snippets for Visual Studio 2019](https://github.com/emu2021makuake/XAML-code-snippets-for-VS2019)」から「Code」-「Download ZIP」を選択
![download2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/82cd3330-2d36-6491-aceb-4c1b3bddcb9c.png)

1. ダウンロードしたZIPファイルを展開
1. Visual Studio 2019のメニュー「ツール」-「コードスニペットマネージャー」を選択
1. 「インポート」ボタンを選択
1. 「Xammet.snippet」ファイルを指定

## ◇Visual Studio 2017の場合の追加作業

以下をsnippetファイルとしてUTF8形式で保存し、同様にインポートすることで
Visual Studio 2019の`#region`, `rd`,`cd`, `set`が使えるようになる。

```xml:XAMLforVS2017.snippet
<?xml version="1.0" encoding="utf-8"?>
<CodeSnippets
    xmlns="http://schemas.microsoft.com/VisualStudio/2005/CodeSnippet">

  <CodeSnippet Format="1.0.0">
    <Header>
      <Title>#region</Title>
      <Shortcut>#region</Shortcut>
      <Description>#region ～ #endregion</Description>
      <SnippetTypes>
        <SnippetType>Expansion</SnippetType>
      </SnippetTypes>
    </Header>
    <Snippet>
      <Declarations>
        <Literal Editable="true">
          <ID>Value1</ID>
          <Default>RegionName</Default>
        </Literal>
      </Declarations>
      <Code Language="XAML"><![CDATA[<!--#region $Value1$-->$end$$selected$<!--#endregion-->]]></Code>
    </Snippet>
  </CodeSnippet>

  <CodeSnippet Format="1.0.0">
    <Header>
      <Title>グリッド行定義</Title>
      <Shortcut>rd</Shortcut>
      <Description>&lt;RowDefinition&gt;</Description>
      <SnippetTypes>
        <SnippetType>Expansion</SnippetType>
      </SnippetTypes>
    </Header>
    <Snippet>
      <Declarations>
        <Literal Editable="true">
          <ID>Value1</ID>
          <Default>1*</Default>
        </Literal>
      </Declarations>
      <Code Language="XAML"><![CDATA[<RowDefinition Height="$Value1$" />$selected$$end$]]></Code>
    </Snippet>
  </CodeSnippet>

  <CodeSnippet Format="1.0.0">
    <Header>
      <Title>グリッドカラム定義</Title>
      <Shortcut>cd</Shortcut>
      <Description>&lt;ColumnDefinition&gt;</Description>
      <SnippetTypes>
        <SnippetType>Expansion</SnippetType>
      </SnippetTypes>
    </Header>
    <Snippet>
      <Declarations>
        <Literal Editable="true">
          <ID>Value1</ID>
          <Default>1*</Default>
        </Literal>
      </Declarations>
      <Code Language="XAML"><![CDATA[<ColumnDefinition Width="$Value1$" />$selected$$end$]]></Code>
    </Snippet>
  </CodeSnippet>

  <CodeSnippet Format="1.0.0">
    <Header>
      <Title>Setter</Title>
      <Shortcut>set</Shortcut>
      <Description>&lt;Setter&gt;</Description>
      <SnippetTypes>
        <SnippetType>Expansion</SnippetType>
      </SnippetTypes>
    </Header>
    <Snippet>
      <Declarations>
        <Literal Editable="true">
          <ID>Value1</ID>
          <Default>Background</Default>
        </Literal>
        <Literal Editable="true">
          <ID>Value2</ID>
          <Default>Red</Default>
        </Literal>
      </Declarations>
      <Code Language="XAML"><![CDATA[<Setter Property="$Value1$" Value="$Value2$" />$selected$$end$]]></Code>
    </Snippet>
  </CodeSnippet>

</CodeSnippets>
```

# ■4.使い方

ショートカットキーを入力して<kbd>Tab</kbd>キー

## ◇使用例

<kbd>btn</kbd>と入力
![100.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/ccb07c71-2889-19fe-5b77-29c56c2b910c.png)

<kbd>TAB</kbd>キー入力
![101.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/9d92e81a-ab5d-7c07-e665-d04e435eec1a.png)

Contentの`Button`部分が選択状態になっているため、そのまま任意のボタン名を入力
![102.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/d4a1121e-e691-3c55-40ef-b2cd31318ee3.png)

<kbd>Enter</kbd>キー入力でタグの外にカーソルが位置付けられる
![103.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/78fe2283-9b4e-125e-f1e3-4ac4c3a3fe09.png)

もう一度<kbd>Enter</kdb>キー入力で改行し、<kbd>stack>btn*3</kbd>と入力
![104.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/8a30b112-ff31-3617-2112-0fd6d5c096ee.png)

<kbd>TAB</kbd>キー入力
![105.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/4652634f-44ba-2a9a-35e2-68a319441339.png)