M2: XAML Controls

このセクションでは、インタフェースに簡単なXAML Controlを追加する方法について説明します.この例では、Grid、TextBlock、Button、およびStackPanelコントロールを使用します.XAML自身のすべてのコントロールが宣言されているWindows.UI.Xaml.Controlsこのクラスライブラリでは、MSDN 1に行って様々なXAMLコントロールの使用を詳しく知ることができます.
感謝祭のカードプログラムを実現し、そのインタフェースはテキスト表示コントロールTextBlockと、2つのボタンコントロールButtonから構成されています.Button 1は、お祝いのメッセージを取得するために使用され、Button 2は、現在のお祝いのメッセージをメールで友人に送信するために使用されます.
前の章の内容が完了していることを確認してください.Grid Controlに2行の宣言を追加します.

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <Grid.RowDefinitions>
        <RowDefinition Height="*"/>
        <RowDefinition Height="Auto"/>
    </Grid.RowDefinitions>

</Grid>

ページに、新たにTextBlock Controlを追加し、Gridの最初の行に位置付けします.プロパティを次のように設定します.

<TextBlock x:Name="tbMessage" Text="Hello, Click to Start..." Grid.Row="0"/>

ページに、新たに2つButton Controlを追加し、Gridの2行目に位置付けします.プロパティを次のように設定します.

<Button x:Name="btnSendMail" Content="Send to Friend" Grid.Row="1" />
<Button x:Name="btnGetMessage" Content="Get a Wishes" Grid.Row="1" />

可視化インタフェースに切り替えると、ステップ2で2つのButtonが重なっていることがわかり、2つのButtonが並んでいるように、3番目のコントロールStackPanel Controlを追加し、StackPanelを使用して2つのButtonを包みます.修正後のコードは次のとおりです.

<StackPanel Orientation="Horizontal" Grid.Row="1" Padding="4">
    <Button x:Name="btnSendMail" Content="Send to Friend" Grid.Row="1"/>
    <Button x:Name="btnGetMessage" Content="Get a Wishes" Grid.Row="1"/>
</StackPanel>

まず、祝福語を得るプログラムロジックを実現しましょう.tbGetMessage Buttonのプロパティで、クリックイベントGetMessage_Clickを追加します.変更したコードは次のとおりです.

<Button x:Name="btnGetMessage" Content="Get a Wishes" Grid.Row="1" Click="GetMessage_Click"/>

そして、マウスでGetMessage_Clickのいずれかをクリックし、キーボードでF 12キーを押してCode Behindコードに入ります.MainPage.xaml.csファイルにおいて、GetMessage_Clickメソッドにおいて、実現プログラムロジックは以下の通りである.

文字列変数strを定義します.

strの値をTextBlockのText属性に付与する.

コードは次のとおりです.

private void GetMessage_Click(object sender, RoutedEventArgs e)
{
    string str = "Happy Thanksgiving!";
    tbMessage.Text = str;
}