ボタンを使う – CH3COOH(酢酸)の実験室

処理開始のトリガーとなるボタンは、Windows Phone SDKにてButtonコントロールという形で提供されています。Buttonコントロールの基本の基本についてご紹介したいと思います。

Visual Studioでボタンを配置する

Buttonコントロールは、Visual Studioのデザイナーから配置が可能です。ツールボックスを開くと、Windows Phone SDKで提供される標準コントロールがWindows Phone コントロールとして並んでいます。

Buttonを選択してドラッグしたまま、配置したい場所でドロップします。

Visual Studioのデザイナで配置すると、自動的にbutton1という名前が割り当てられます。この割り当てられたコントロール名button1を使って情報の設定や取得を行うことが出来ます。例えばボタンのContentプロパティに「ボタン」と入れることで配置時には「Button」だったテキストが「ボタン」に変わります。
button1の数字の部分ですが、以降は新しくボタンを配置する度にコントロール名のbutton1の「1」の部分がインクリメントされていきます。

XAMLでボタンを配置する

ツールボックスからドラッグアンドドロップでの配置を使わない場合、XAMLを直接編集する事が可能です。デザインモードからXAMLモードへ切り替えます。

XAMLが表示されると思います。Buttonコントロールを追加する場合は以下の定義を追加します。

<Button Content="Button" Height="72" Width="160" />

前述のVisual Studioのデザイナで配置した場合と同様に、MainPage.xamlのContentPanel上に表示した場合のXAMLは下記の通りです。

<phone:PhoneApplicationPage 
    x:Class="ButtonTest.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="Portrait" Orientation="Portrait"
    shell:SystemTray.IsVisible="True">
 
    <!--LayoutRoot は、すべてのページ コンテンツが配置されるルート グリッドです-->
    <Grid x:Name="LayoutRoot" Background="Transparent">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
 
        <!--TitlePanel は、アプリケーション名とページ タイトルを格納します-->
        <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
            <TextBlock x:Name="ApplicationTitle" Text="SOFTBUILD" Style="{StaticResource PhoneTextNormalStyle}"/>
            <TextBlock x:Name="PageTitle" Text="button test" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
        </StackPanel>
 
        <!--ContentPanel - 追加コンテンツをここに入力します-->
        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
            <Button Content="Button" Height="72" HorizontalAlignment="Left" Margin="139,40,0,0" Name="button1" VerticalAlignment="Top" Width="160" />
        </Grid>
    </Grid>
 
    <!--ApplicationBar の使用法を示すサンプル コード-->
    <!--<phone:PhoneApplicationPage.ApplicationBar>
        <shell:ApplicationBar IsVisible="True" IsMenuEnabled="True">
            <shell:ApplicationBarIconButton IconUri="/Images/appbar_button1.png" Text="Button 1"/>
            <shell:ApplicationBarIconButton IconUri="/Images/appbar_button2.png" Text="Button 2"/>
            <shell:ApplicationBar.MenuItems>
                <shell:ApplicationBarMenuItem Text="MenuItem 1"/>
                <shell:ApplicationBarMenuItem Text="MenuItem 2"/>
            </shell:ApplicationBar.MenuItems>
        </shell:ApplicationBar>
    </phone:PhoneApplicationPage.ApplicationBar>-->
 
</phone:PhoneApplicationPage>

ボタンが押された時の動作を定義する

ユーザーによってボタンが押された時の動作を定義しましょう。Buttonコントロールは押される(クリックされる)とClickイベントを発生させます。イベントタブを選択して表示を切り替えます。

Buttonコントロールでサポートしているイベント一覧が表示されます。Clickイベントをダブルクリックしてください。

自動でC#のソースファイルに切り替わり、下記のようなコードが追加されたのが確認出来ましたでしょうか。

private void button1_Click(object sender, RoutedEventArgs e) {
 
}

これがbutton1のClickイベントハンドラとなり、Clickイベントが発生する度に処理が実行されます。

このように1つの画面をUIのデザインを定義するXAMLとイベント処理などを記載するC#のプログラムコードに分離することを「コードビハインド」と呼びます。

ここでは例としてボタンが押されると、ボタンのテキストを変更するように変更してみましょう。ButtonコントロールはContentControlクラスを継承しているので、Contentプロパティに文字列を設定するとテキスト部分が変更します。

private void button1_Click(object sender, RoutedEventArgs e) {
    button1.Content = "Clicked!";
}

Visual Studioのツールバーの[デバッグ]から[デバッグ開始]を選択します。アプリケーションが実行されますので、ボタンを押したときにボタンの表示が変わることを確認してください。