.NET GUIコントロール（コピペ用）

## ◇ラベル

![01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/8dbdd12a-0646-ce20-8d06-7f2f632221a8.png)

### ◎Label

```xml
<StackPanel>
    
    <Label
        Margin="10"
        Padding="0"
        Content="ラベル" />
    
</StackPanel>
```

### ◎TextBlock

```xml
<StackPanel>
    
    <TextBlock Margin="10" Text="テキスト" />
    
    <TextBlock
        Margin="10"
        Text="長いテキスト。長いテキスト。長いテキスト。長いテキスト。長いテキスト。長いテキスト。長いテキスト。長いテキスト。"
        TextWrapping="Wrap" />
    
</StackPanel>
```

## ◇テキストボックス

### ◎TextBox

![02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/91ca1de6-8bae-e179-75f7-86b8b289d5db.png)

```xml
<StackPanel>
    
    <TextBox Margin="10" Text="テキストボックス" />

    <TextBox
        Width="120"
        Height="50"
        Margin="10"
        Text="テキストボックス。テキストボックス。テキストボックス。テキストボックス。"
        TextWrapping="Wrap"
        VerticalScrollBarVisibility="Visible" />
    
</StackPanel>
```

### ◎RichTextBox

![13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/28b8dbb2-3426-4b1c-7281-3f06ce483a99.png)

```xml
<StackPanel>
    
    <RichTextBox Margin="10">
        <FlowDocument>
            <Paragraph>
                こんにちは、<Bold>世界</Bold>
            </Paragraph>
            
            <Paragraph>
                <Run Foreground="Red">あいうえお</Run>
                <Run Foreground="Blue">かきくけこ</Run>
            </Paragraph>
        </FlowDocument>
    
</StackPanel>
```

## ◇ボタン

![03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/5fd8d491-f508-9cb9-de26-e275baf24485.png)

### ◎Button

```xml
<StackPanel>
    
    <Button
        Width="75"
        Margin="10"
        Content="ボタン" />
    
</StackPanel>
```

### ◎ToggleButton

```xml
<StackPanel>
    
    <ToggleButton
        Width="75"
        Margin="10,10,10,1"
        Content="トグルボタン1"
        IsChecked="True" />
    <ToggleButton
        Width="75"
        Margin="10,1,10,10"
        Content="トグルボタン2" />
    
</StackPanel>
```

## ◇チェックボックス

![04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/839cb891-540f-e0f6-f3ee-4e1d1b644cd7.png)

### CheckBox

```xml
<StackPanel>
    
    <CheckBox
        Margin="10"
        Content="チェックボックス"
        IsChecked="True" />
    
</StackPanel>
```

## ◇ラジオボタン

![05_.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/0f5aed3a-7586-1f9d-13f0-1c964c2d9a40.png)

### ◎RadioButton

```xml
<StackPanel Orientation="Horizontal">
    
    <RadioButton
        Margin="10"
        Content="ラジオボタン1"
        GroupName="Grp1"
        IsChecked="True" />
    <RadioButton
        Margin="10"
        Content="ラジオボタン2"
        GroupName="Grp1" />
    
    <RadioButton
        Margin="10"
        Content="ラジオボタンA"
        GroupName="Grp2" />
    <RadioButton
        Margin="10"
        Content="ラジオボタンB"
        GroupName="Grp2"
        IsChecked="True" />
    
</StackPanel>
```

## ◇コンボボックス、リストボックス

![06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/d418fb1f-4e04-3c9a-fc49-b40bcaa66a47.png)

### ◎ComboBox

```xml
<StackPanel>
    
    <ComboBox Margin="10" SelectedIndex="0">
        <ComboBoxItem Content="選択肢1" />
        <ComboBoxItem Content="選択肢2" />
    </ComboBox>
    
</StackPanel>
```

### ◎ListBox

```xml
<StackPanel>
    
    <ListBox
        Height="80"
        Margin="10"
        ScrollViewer.VerticalScrollBarVisibility="Visible"
        SelectedIndex="0">
        <ListBoxItem Content="選択肢1" />
        <ListBoxItem Content="選択肢2" />
    </ListBox>
    
</StackPanel>
```

## ◇タブ

![07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/06592ea7-d626-957f-c3e8-f85e811cd341.png)

### ◎TabControl

```xml
<StackPanel>
    
    <TabControl
        Height="150"
        Margin="5"
        SelectedIndex="0">

        <TabItem Header="タブ1">
            <StackPanel>
                <Button Margin="10,5" Content="ボタン1" />
                <Button Margin="10,5" Content="ボタン2" />
                <Button Margin="10,5" Content="ボタン3" />
            </StackPanel>
        </TabItem>

        <TabItem Header="タブ2">
            <StackPanel>
                <Button Margin="10,5" Content="ボタン4" />
            </StackPanel>
        </TabItem>

    </TabControl>
    
</StackPanel>
```

## ◇枠線

![08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/b930187d-2e5a-f2ce-3aec-a8f1c8f4490d.png)

### ◎Border

```xml
<StackPanel>
    
    <Border
        Width="300"
        Height="15"
        Margin="10"
        BorderBrush="Blue"
        BorderThickness="1" />
    
</StackPanel>
```

### ◎GroupBox

```xml
<StackPanel>
    
    <GroupBox
        Width="300"
        Margin="10"
        Header="グループ">

        <StackPanel Orientation="Horizontal">
            <Button Margin="10" Content="aaa" />
            <Button Margin="10" Content="bbb" />
            <Button Margin="10" Content="ccc" />
        </StackPanel>

    </GroupBox>
    
</StackPanel>
```

## ◇四角、円

![09_.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/b30b7479-50b1-cab6-2120-6e0612daf426.png)


### ◎Rectangle

```xml
<StackPanel>
    
    <Rectangle
        Width="150"
        Height="10"
        Margin="10"
        Fill="Magenta" />
    
</StackPanel>
```

### ◎Ellipse

```xml
<StackPanel>
    
    <Ellipse
        Width="80"
        Height="30"
        Margin="10"
        Fill="MediumAquamarine" />
    
</StackPanel>
```

## ◇日付入力、カレンダー

### ◎DatePicker

![10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/7d053eff-bfed-949d-1d2d-c5d87db891c4.png)

```xml
<StackPanel>
    
    <DatePicker Width="150" Margin="10" />
    
</StackPanel>
```

### ◎Calendar

![11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/c00c06b8-17ad-cb00-840b-198706295ed1.png)

```xml
<StackPanel>
    
    <Calendar Margin="10" />
    
</StackPanel>
```

## ◇スライダー

![12_.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/62cf3e56-727e-6fa4-1a18-13c98e6f1eff.png)

### ◎Slider

```xml
<StackPanel>
    
     <Slider
        Margin="10"
        Maximum="50"
        Minimum="0"
        TickPlacement="TopLeft"
        Value="20" />

    <Slider
        Height="50"
        Margin="10"
        Maximum="10"
        Minimum="0"
        Orientation="Vertical"
        TickPlacement="Both"
        Value="7" />
    
</StackPanel>
```

## ◇プログレスバー

### ◎ProgressBar

![14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/e43949ed-c5f0-0ae8-acad-c04f86de28ec.png)

```xml
<StackPanel>
    
    <ProgressBar
        Height="6"
        Margin="10"
        Maximum="100"
        Minimum="0"
        Value="33" />
    
    <ProgressBar
        Width="6"
        Height="60"
        Margin="10"
        Orientation="Vertical"
        Value="77" />

</StackPanel>
```

## ◇メニュー

### ◎Menu

![16_.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/04ebe3b6-37e0-af0e-cc85-50ea991a39c2.png)

```xml
<Grid>

    <Menu>
        <MenuItem Header="ファイル(_F)">
            <MenuItem Header="開く(_O)" />
            <MenuItem Header="上書き保存(_S)" />
            <Separator />
            <MenuItem Header="終了(_X)" />
        </MenuItem>

        <MenuItem Header="編集(_E)" />
        <MenuItem Header="表示(_V)" />
        <MenuItem Header="ヘルプ(_H)" />
    </Menu>

</Grid>
```

### ◎ContextMenu

![17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/6d3482bb-2e44-96be-abe5-220675292b25.png)

```xml
    ：
    
    <Window.ContextMenu>
        <ContextMenu>
            <MenuItem Header="メニュー1" />
            <MenuItem Header="メニュー2" />
            <Separator />
            <MenuItem Header="メニュー3" />
        </ContextMenu>
    </Window.ContextMenu>

    <StackPanel>

        <Button
            Width="200"
            Height="50"
            Margin="30"
            Content="ボタン">
            <Button.ContextMenu>
                <ContextMenu>
                    <MenuItem Header="ボタン用メニュー1" />
                    <MenuItem Header="ボタン用メニュー2" />
                </ContextMenu>
            </Button.ContextMenu>
        </Button>

    </StackPanel>

</Window>
```

## ◇エキスパンダー

![18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/63804d74-033b-154d-4b21-da6213f84f09.png)

### ◎Expander

```xml
<StackPanel>

    <Expander
        Margin="10"
        Background="SpringGreen"
        IsExpanded="True">

        <StackPanel>
            <Button Margin="10" Content="ボタン1" />
            <Button Margin="10" Content="ボタン2" />
            <Button Margin="10" Content="ボタン3" />
        </StackPanel>

    </Expander>

</StackPanel>
```

## ◇グリッド、スタックパネル

![22_1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/8e0b0bcb-29da-23f6-12ab-c2431f933d49.png)

### ◎Grid, StackPanel

```xml
<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition />
        <ColumnDefinition />
    </Grid.ColumnDefinitions>
    
    <Grid.RowDefinitions>
        <RowDefinition Height="1*" />
        <RowDefinition Height="2*" />
        <RowDefinition Height="Auto" />
    </Grid.RowDefinitions>

    <Button Margin="10" Content="ボタン1" />

    <Button
        Grid.Row="1"
        Grid.ColumnSpan="2"
        Margin="10"
        Content="ボタン2" />

    <StackPanel
        Grid.Row="2"
        Grid.ColumnSpan="2"
        Orientation="Horizontal">
        <Button
            Margin="10"
            Padding="20,5"
            Content="ボタン3" />
        <Button
            Margin="10"
            Padding="20,5"
            Content="ボタン4" />
        <Button
            Margin="10"
            Padding="20,5"
            Content="ボタン5" />
    </StackPanel>
    
</Grid>
```

## ◇ラップパネル

![23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/b993387f-4991-9d6f-3241-a747c9686987.png)

### ◎WrapPanel

```xml
<WrapPanel>

    <Button
        Width="50"
        Margin="5"
        Content="ボタン1" />
    <Button
        Width="80"
        Margin="5"
        Content="ボタン2" />
    <Button
        Width="100"
        Margin="5"
        Content="ボタン3" />
    <Button
        Width="50"
        Margin="5"
        Content="ボタン4" />
    <Button
        Width="80"
        Margin="5"
        Content="ボタン5" />
    <Button
        Width="100"
        Margin="5"
        Content="ボタン6" />
    <Button
        Width="50"
        Margin="5"
        Content="ボタン7" />
    <Button
        Width="80"
        Margin="5"
        Content="ボタン8" />
    <Button
        Width="100"
        Margin="5"
        Content="ボタン9" />

</WrapPanel>
```

## ◇スクロールビューアー

### ◎ScrollViewer

![15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/c1e8de51-4a99-149c-6cda-beb27f8da66c.png)

```xml
<ScrollViewer>
    
    <StackPanel>
        <Button Content="ボタン1" Height="50" Margin="10"/>
        <Button Content="ボタン2" Height="50" Margin="10"/>
        <Button Content="ボタン3" Height="50" Margin="10"/>
        <Button Content="ボタン4" Height="50" Margin="10"/>
    </StackPanel>

</ScrollViewer>
```

## ◇ビューボックス

![19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/fbdc5d7c-5960-7c2b-8534-ecb2571c4ded.png)

### ◎Viewbox

```xml
<StackPanel>

    <Viewbox Height="10">
        <TextBlock Text="こんにちは" />
    </Viewbox>
    
    <Viewbox Height="30">
        <TextBlock Text="こんにちは" />
    </Viewbox>
    
    <Viewbox Height="50">
        <TextBlock Text="こんにちは" />
    </Viewbox>

</StackPanel>
```

## ◇ツリービュー

![20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/4c34ed59-6481-741c-7f18-14364a0946c0.png)

### ◎TreeView

```xml
<StackPanel>

    <TreeView Margin="10">
        <TreeViewItem Header="フォルダ1">
            <TreeViewItem Header="ファイルa" />
            <TreeViewItem Header="ファイルb" />
        </TreeViewItem>

        <TreeViewItem Header="フォルダ2">
            <TreeViewItem Header="ファイルc" />
        </TreeViewItem>

        <TreeViewItem Header="フォルダ3" />
    </TreeView>

</StackPanel>
```

## ◇リストビュー

![21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/234f87a5-02e1-1a76-7f82-4b13a9c7cdcd.png)

### ◎ListView

```xml
<StackPanel>

    <ListView Margin="10">
        <ListView.View>
            <GridView>
                <GridViewColumn DisplayMemberBinding="{Binding [0]}" Header="列A" />
                <GridViewColumn DisplayMemberBinding="{Binding [1]}" Header="列B" />
                <GridViewColumn DisplayMemberBinding="{Binding [2]}" Header="列C" />
            </GridView>
        </ListView.View>

        <ListViewItem>
            <x:Array Type="{x:Type sys:String}">
                <sys:String>aaaa1</sys:String>
                <sys:String>bbbb1</sys:String>
                <sys:String>cccc1</sys:String>
            </x:Array>
        </ListViewItem>

        <ListViewItem>
            <x:Array Type="{x:Type sys:String}">
                <sys:String>aaaa2</sys:String>
                <sys:String>bbbb2</sys:String>
                <sys:String>cccc2</sys:String>
            </x:Array>
        </ListViewItem>
    </ListView>

</StackPanel>
```