Windows Phoneでボタンを使う

「Windows Phone Advent Calendar "ひとり" 2011」第21日目です。 (遅延実行中です)

基本に振り返って今日はButtonコントロールについておさらいしてみましょう。

デスクトップWindowsと同様にユーザーが押すことで処理を動作させるトリガーとなるものです。デスクトップWindowsでは立体感のあるものが多いですが、Windows Phoneでの標準的なボタンはとてもシンプルな形状です。

処理開始のトリガーとなるボタンは、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コントロールを追加する場合は以下の定義を追加します。

|xml|

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

|xml| <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イベントを発生させます。イベントタブを選択して表示を切り替えます。