XAML101:カラーバー

# 見本
![SMPTE_COLOR_BAR_75.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/67318/534b7806-cf82-0fb7-7bc7-4aa8f7bf9186.png)
これをXAMLで実現したい

# 使用する属性
- RowDefinitions
- ColumnDefinitions
- Background

# 考察
上中下の３段に分かれている
１段目：黒を除くデジタル７色　暗い色？
２段目：青・黒・紫・黒・水・灰？
３段目：６分割に見えるがちょっと違う感じ

# XAML(STEP1)
まずは3段に分ける
```step1.xaml
<Page
    x:Class="UWPApp1.UI.GridColorBar"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:UWPApp1.UI"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="8* "/>
            <RowDefinition Height="1*" />
            <RowDefinition Height="3*" />
        </Grid.RowDefinitions>

    </Grid>
</Page>
```
# 結果(STEP1)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/67318/8770ee31-4b17-797c-778b-db8ae5e32550.png)

# XAML(STEP2)
上中段を等幅で７つに分ける
下段も同様に分け、グリッドの背景色
```step2.xaml
<Page
    x:Class="UWPApp1.UI.GridColorBar"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:UWPApp1.UI"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="66* "/>
            <RowDefinition Height="10*" />
            <RowDefinition  Height="24*" />
        </Grid.RowDefinitions>
        <Grid Grid.Row="0">
            <Grid.ColumnDefinitions>
                <ColumnDefinition />
                <ColumnDefinition />
                <ColumnDefinition />
                <ColumnDefinition />
                <ColumnDefinition />
                <ColumnDefinition />
                <ColumnDefinition />
            </Grid.ColumnDefinitions>
            <Grid Grid.Column="0" Background="#FFB4B4B4"></Grid>
            <Grid Grid.Column="1" Background="#FFB4B40C"></Grid>
            <Grid Grid.Column="2" Background="#FF0DB4B4"></Grid>
            <Grid Grid.Column="3" Background="#FF0DB40C"></Grid>
            <Grid Grid.Column="4" Background="#FFB410B4"></Grid>
            <Grid Grid.Column="5" Background="#FFB40F0E"></Grid>
            <Grid Grid.Column="6" Background="#FF0F0FB4"></Grid>
        </Grid>
        <Grid Grid.Row="1">
            <Grid.ColumnDefinitions>
                <ColumnDefinition />
                <ColumnDefinition />
                <ColumnDefinition />
                <ColumnDefinition />
                <ColumnDefinition />
                <ColumnDefinition />
                <ColumnDefinition />
            </Grid.ColumnDefinitions>
            <Grid Grid.Column="0" Background="#FF0F0FB4"></Grid>
            <Grid Grid.Column="1" Background="#FF101010"></Grid>
            <Grid Grid.Column="2" Background="#FFB410B4"></Grid>
            <Grid Grid.Column="3" Background="#FF101010"></Grid>
            <Grid Grid.Column="4" Background="#FF0DB4B4"></Grid>
            <Grid Grid.Column="5" Background="#FF101010"></Grid>
            <Grid Grid.Column="6" Background="#FFB4B4B4"></Grid>

        </Grid>
        <Grid Grid.Row="2" >
            <Grid.ColumnDefinitions>
                <ColumnDefinition  Width="3*" />
                <ColumnDefinition  Width="3*" />
                <ColumnDefinition  Width="3*" />
                <ColumnDefinition  Width="3*" />
                <ColumnDefinition  Width="1*" />
                <ColumnDefinition  Width="1*" />
                <ColumnDefinition  Width="1*" />
                <ColumnDefinition  Width="3*" />
            </Grid.ColumnDefinitions>
            <Grid Grid.Column="0" Background="#FF081D42"></Grid>
            <Grid Grid.Column="1" Background="#FFEBEBEB"></Grid>
            <Grid Grid.Column="2" Background="#FF2C005C"></Grid>
            <Grid Grid.Column="3" Background="#FF101010"></Grid>
            <Grid Grid.Column="4" Background="#FF070707"></Grid>
            <Grid Grid.Column="5" Background="#FF101010"></Grid>
            <Grid Grid.Column="6" Background="#FF181818"></Grid>
            <Grid Grid.Column="7" Background="#FF101010"></Grid>
        </Grid>
    </Grid>
</Page>
```

# 結果(STEP2)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/67318/7caa0629-94ae-a33c-ea24-1fe27736047c.png)