[ストアアプリ][入門] Step16. Borderコントロールを使用する　～RadioButtonをグループ化する～

Windowsアプリケーション

2014.12.11

今回はBorderコントロールを使用して、RadioButtonコントロールをグループ化する方法について見ていきます。

RadiButtonコントロールのグループ化

MainPage.xaml上に配置したすべてのRadioButtonコントロールは、MainPageの上で1つのグループとしてまとめられています。

複数のグループを作りたい場合は、何かしらのコンテナコントロールが必要となります。

このような場合には Gridコントロールや StackPanelコントロールの上に RadioButtonコントロールを配置するのが一般的です。

また、グループが分けられていることを示すために、枠線が必要となることがあります。

そこで、Borederコントロール、パネルコントロール、RadioButtonコントロールを組み合わせてグループ化を行います。

以下は、BorederコントロールのコンテントとしてStackPanelコントロールを配置し、さらにその中にRadioButtononトロールを配置してグループ化をする例です（コントロールの入れ子構造をわかりやすくするためにいくつかのプロパティを省略して掲載しています）。

<Border>
    <StackPanel>
        <RadioButton Content="C#" IsChecked="True"/>
        <RadioButton Content="VB"/>
    </StackPanel>
</Border>

上記のようにすることで、複数のグループを配置することが可能になります。

<Border BorderBrush="White" CornerRadius="5" BorderThickness="1" HorizontalAlignment="Left" Height="71" Margin="36,34,0,0" VerticalAlignment="Top" Width="103">
    <StackPanel>
        <RadioButton Content="C#" IsChecked="True"/>
        <RadioButton Content="VB"/>
    </StackPanel>
</Border>
<Border BorderBrush="White" CornerRadius="5" BorderThickness="1" HorizontalAlignment="Left" Height="71" Margin="176,34,0,0" VerticalAlignment="Top" Width="103">
    <StackPanel>
        <RadioButton Content="男性"/>
        <RadioButton Content="女性" IsChecked="True"/>
    </StackPanel>
</Border>