Windows PhoneでTextBlockとButton

Windows Phoneで表示してあるTextBlockの文字列を、Buttonを使って変更するアプリを作ります。

1. TextBlockを配置
まず、ツールボックスにある『TextBlock』をデザインビューにクリック＆ドロップします。

TextBlockに表示されている文字列は次の手順で変更できます。

TextButtonをクリックして、プロパティウィンドウを開く
CommonタブのTextタグにある文字列を変更すれば反映されます

文字列の大きさは

TextButtonをクリックして、プロパティウィンドウを開く
Textタブの文字列の形式の横にある数値を変更すれば反映されます

デザインビューにTextBlockを追加することで、XAMLビューに次のようなコードが追加されます

<TextBlock Height="Auto" HorizontalAlignment="Left" Margin="43,91,0,0" Name="textBlock1" Text="This is TextBlock" VerticalAlignment="Top" FontSize="40" />

ここで１回エミュレータを起動してみます。

ちゃんとエミュレータの画面に、先ほど設定したTextBlockが表示されています！

2. Buttonを配置
さきほどと同じ要領で、今度は『Button』を配置します。

Buttonに表示されている文字列は次の手順で変更できます。

TextButtonをクリックして、プロパティウィンドウを開く
CommonタブのContentタグにある文字列を変更すれば反映されます

文字列の大きさは、TextBlockと同じです。

ここでも１回エミュレータを起動してみます。

ちゃんとエミュレータの画面に、Buttonが表示されています！

3. Buttonのイベントハンドラを作成してコードを追加
次に、先ほど作ったButtonにイベントハンドラを作成して、TextBlockへ反映するようにします。

まず、先ほど作成したButtonをダブルクリックします。

そうすると、『MainPage.xaml.cs』ファイルが開きます。

すると、次のメソッドが自動生成されています。

private void button1_Click(object sender, RoutedEventArgs e)
{

}

このメソッド名は、プロパティウィンドウの『Events』で決定しています。

このメソッドに次のコードを追記します。

private void button1_Click(object sender, RoutedEventArgs e)
{
    textBlock1.Text = "Helloworld!";
}

4. エミュレータで実行
最後に、Buttonを押した時に、TextBlockが変更されるか、エミュレータで確認します。

みごとに「Helloworld!」と表示されました！

次回は、今更ですがエミュレータからビルドまでの一連の流れについてやります。