学習用資料2

###TextBlock
```xml:MainWindow.xaml
<Window x:Class="WpfApp9.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid>
        <TextBlock Text="HelloWorld"></TextBlock>
    </Grid>
</Window>
```

表示結果
![wpf1.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/514262/72b52fa8-fa7a-0385-2561-291a55da9596.png)

上記の.xamlがWPFのView部分を表す。<Grid></Grid>で囲われた部分がコンテンツの内容となる。
```<TextBlock></TextBlock>```はテキストを表示する。
```<TextBlock></TextBlock>```に値をいくつか設定することによって表示のさせかたを変えることができる。

```xml:MainWindow.xaml
<Window x:Class="WpfApp9.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid>
        <TextBlock Text="HelloWorld" Width="100" Height="50" FontSize="20"></TextBlock>
    </Grid>
</Window>
```

表示結果

![wpf2.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/514262/3727232b-8983-827f-58f0-f1bed0f47ddf.png)

###Button

```xml:MainWindow.xaml
<Window x:Class="WpfApp9.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid>
        <Button Width="50" Height="50" Content="Button"></Button>
    </Grid>
</Window>
```


ボタンを表示させるには```<Button></Button>```タグによって表示させることができる。

###ComboBox
```xml:MainWindow.xaml
<Window x:Class="WpfApp9.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid>
        <ComboBox Width="200" Height="30">
            <ComboBoxItem Content="アメリカ"></ComboBoxItem>
            <ComboBoxItem Content="日本"></ComboBoxItem>
            <ComboBoxItem Content="中国"></ComboBoxItem>
        </ComboBox>
    </Grid>
</Window>
```

実行結果
![wpf4.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/514262/2a2c37cc-447d-2e9a-7662-585d2b964475.png)

ComboBoxはHTMLでいうところの、Selectにあたる。
ただ、選択した時の文字がずれるのでどうしているのか...

###StackPanel
```xml:MainWindow.xaml
<Window x:Class="WpfApp9.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid>
        <StackPanel Orientation="Horizontal" Height="50" VerticalAlignment="Center" HorizontalAlignment="Center">
            <Button Content="Button1"></Button>
            <Button Content="Button2"></Button>
            <Button Content="Button3"></Button>
            <Button Content="Button4"></Button>
        </StackPanel>
    </Grid>
</Window>

```

StackPanelは複数のものを並べて配置することが多い。
Orientationで縦に並べるか、横に並べるかを決める。
Verticalが縦。Horizontalが横。
VerticalAlignment,HorizontalAlignmentの二つは横の位置、縦の位置を定める。

![wpf5.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/514262/9393492b-fac1-a9bc-3522-c8db10029340.png)

###RadioButton

```xml:MainWindow.xaml
<Window x:Class="WpfApp9.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"![wpf6.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/514262/b573bac6-4599-eb24-4376-d5ee7028f94c.png)

        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid>
        <StackPanel>
            <RadioButton Content="英語"></RadioButton>
            <RadioButton Content="日本語"></RadioButton>
        </StackPanel>
    </Grid>
</Window>
```

RadioButtonはその名の通りラジオボタン。英語をチェックすれば日本語のチェックが外れるし、
日本語をチェックすれば英語のチェックが外れる。
```<StackPanel></StackPanel>```がないと表示がだぶってしまい上手く表示されない。

実行結果
![wpf6.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/514262/318473c9-07d4-c14a-edfd-b455dfc0bd39.png)

###TextBox

```xml:MainWindow.xaml
<Window x:Class="WpfApp9.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid>
        <TextBox Height="20" Width="100"></TextBox>
    </Grid>
</Window>
```

TextBoxはHTMLでいうところのinput type="text"にあたる。

実行結果
![wpf7.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/514262/8e4b77c9-4796-6765-247b-2992d6f27321.png)

###DataGrid

画面側

```xml:MainWindow.xaml
<Window x:Class="WpfApp9.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid>
        <DataGrid Width="200" HorizontalAlignment="Left" Name="Items"></DataGrid>
    </Grid>
</Window>
```

コード側

```cs:MainWindow.xaml.cs
using System.Collections.Generic;
using System.Windows;
using System.Windows.Controls;


namespace WpfApp9
{
    /// <summary>
    /// MainWindow.xaml の相互作用ロジック
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
            var list = new List<Fruit>()
            {
                new Fruit(){Name="apple", Number=3, Price=150},
                new Fruit(){Name="banana", Number=5, Price=200},
                new Fruit(){Name="cherry", Number=4, Price=180}
            };
            Items.ItemsSource = list;
        }
    }

    public class Fruit
    {
        public string Name { get; set; }
        public int Number { get; set; }
        public int Price { get; set; }
    }
}

```

実行結果

![wpf8.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/514262/9fdf0a65-ed85-27ad-45a9-b5b116b639ca.png)

DataGridはいろいろと機能がある分単純な表組として使いたい場合はその使える機能をOFFにしていかないといけない。
コード側ではリストを用意してあげて、Xaml側でDataGridに名前をつけてコード側から要素を入れてあげている。
機能の数が色々とあるので、またいつか。



#まとめ

| Xaml| HTML |
|:-:|:-:|
| TextBlock  |ただの文字列??   |
| TextBox  | ```<input type="text"/>```  |
|Button|button|
|ComboBox|select|
|RadioButton|```<input type="radio"/>```|
|CheckBox|checkbox|
|DataGrid|table??|