初めての Windows Phone プログラミング
更新日: 2011 年 10 月 26 日
Windows Phone のプログラミングは決して難しくはありません。ここでは簡単なアプリケーションの作成についてご紹介します。プログラミングの基本を学びましょう。
プロジェクトを作ってみよう!
まずは、Windows Phone のプロジェクトを作ってみましょう。プロジェクトとは企画、計画といった意味ですが、ここでは、アプリケーションができるまでの一連の流れを設定できます。1 つのプロジェクトで複数のアプリケーションを作成するケースもあります。
では、Visual Studio を起動し、[ファイル] メニューから [新しいプロジェクト] を選択します。
.jpg)
ここでは、使用する言語は Visual C# とします。
左側のペインで [Visual C#] の中にある [Silverlight for Windows Phone] テンプレートを選択します。
右側のペインにプロジェクトが表示されますので、[Windows Phone アプリケーション] を選択しましょう。
続いて画面下部にある、[名前] のところにプログラムの名前を付けましょう。ここでは、Hello World という名前を付けてみます。名前を入力したら OK ボタンを押します。
続いて以下の画面が表示されます。
.jpg)
ここでは、Windows Phone OS のバージョンが指定できます。日本で発売されている Windows Phone のバージョンは、7.5 と表現されていますが、Windows Phone 7.5 の Windows Phone OS バージョンは 7.1 になります。
混乱しやすい部分ですが、Windows Phone のバージョンは 7.5、そのシステムのバージョンは 7.1 ということです。
では [Windows Phone OS 7.1] を選択して OK ボタンを押します。
これでプロジェクトが完成しました。
ページのトップへ
とりあえず動かしてみよう!
以下のような画面が表示されていると思います。
.jpg)
これは、画面表示回りの編集画面です。
左ペインが Windows Phone のデザイン画面、右ペインは左画面の表示を行うための XAML (ザムル) と呼ばれるプログラムです。
とりあえず、何も考えずに実行してみましょう。[デバッグ] メニューから [デバッグ開始] を選択します。
すぐにエミュレーター (Windows Phone Emulator) が起動します。しばらく待っていると以下のような画面が表示されます。エミュレーターが起動しないときは、Visual Studio のツール バーに [Windows Phone Device] という文字が表示されていないか確認します。もし表示されていたときは、その部分を [Windows Phone Emulator (JA)] に変更して、再度実行します。
.jpg)
タイトルが表示されるだけのプログラムですが、正しく実行できましたか?
終了するときは、[デバッグ] メニューから [デバッグ停止] を選択します。
ページのトップへ
タイトルを変更しよう!
プロジェクトを作成した直後は、デザイン画面の中に [マイ アプリケーション]、[ページ名] と書かれたところがあります。
まずは、これを変更してみましょう。
これらのテキストを変えるにはプロパティ ウィンドウを使います。[表示] メニューから [その他のウィンドウ] [プロパティ ウィンドウ] を選択しましょう。
ここで左側のデザイナー画面の [ページ名] と書かれたところをクリックします。すると、プロパティ ウィンドウで、テキストブロック (TextBlock) のプロパティが変更できるようになります。
ここに、[Text] というプロパティがありますので、これを Hello World! に変更します。
.gif)
同様にデザイナー画面上で [マイ アプリケーション] と書かれた部分も Windows Phone Sample に変更します。
この操作は、デザイナー画面上に貼ってある TextBlock というコントロールの Text プロパティを変更したということです。Visual Basic などで、Label や TextBox コントロールの Text プロパティを修正するのと同じです。
これでタイトルの変更は完了です。実行すると以下のように表示されます。
.jpg)
ここで XAML のソースを見てみましょう。
以下の行があると思います。
<TextBlock x:Name="ApplicationTitle" Text="Windows Phone Sample" Style="{StaticResource PhoneTextNormalStyle}"/> <TextBlock x:Name="PageTitle" Text="Hello World!" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
先ほどプロパティで入力した Hello World! と Windows Phone Sample という文字列が書かれているのが確認できますでしょうか?
これは、先ほど行ったプロパティを修正するという行為によって XAML のソースが自動的に修正されたということです。逆に直接 XAML のソースを修正すればプロパティの中身も同時に修正されます。
このことから、プロパティは簡易な XAML 修正ツールとも言えるでしょう。
ページのトップへ
C# のプログラムからテキストボックス (TextBox) を変更してみよう!
ここまでの作業では、XAML を修正することによってテキストを設定しました。
今度は、C# を使ってテキストを変更するプログラムを作ってみます。
さて、画面左側に、ツール ボックスは表示されていますか?
もし、画面上にツール ボックスと書かれたウィンドウがないときは、[表示] メニューから、[その他のウィンドウ] [ツール ボックス] を選択すると、ツール ボックスが表示されます。このウィンドウは自動的に隠れるように設定したり、常に表示するように設定したりすることができます。
表示の設定を切り替えるためには、ツール ボックスの右上にあるピン ボタンをクリックします。
.gif)
では、ツール ボックスから、ボタン (Button) とテキストボックス (TextBox) をドラッグ アンド ドロップで画面に貼り付けてみましょう。
以下のように配置します。
.jpg)
ここで、ボタンが押された時の処理を追加してみましょう。
配置したボタン (Button) をダブルクリックしてください。画面が C# のソース画面に切り替わります。
ソース コードが表示されている部分のすぐ上には、MainPage.xaml.cs と表示されています。MainPage.xaml をクリックするとデザイン画面が表示され、MainPage.xaml.cs をクリックすると C# のソース コードが表示されます。このタブをクリックすることにより、いつでも XAML と C# の編集画面を切り替えることができます。
.gif)
C# のソース コードは、以下のようになっています。
namespace HelloWorld { public partial class MainPage : PhoneApplicationPage { // コンストラクター public MainPage() { InitializeComponent(); } private void button1_Click(object sender, RoutedEventArgs e) { } } }
それでは、ボタンがクリックされたときにテキストボックスのテキストを書き換えるようにプログラムを書いてみましょう。
プログラム中に以下の部分があります。
private void button1_Click(object sender, RoutedEventArgs e) { }
private void button1_Click(object sender, RoutedEventArgs e) { textBox1.Text = "Happy!"; }
ここでは、先ほど貼り付けたテキストボックス (TextBox) のプロパティ [Text] に Happy! という文字列を設定したということです。
では、プログラムを実行してみましょう。
エミュレーターが起動されたとき、画面中央には TextBox と書かれたテキストボックスが配置されています。ここで、ボタンをクリックすると以下のように Happy! に変ります。
.jpg)
ページのトップへ
おわりに
ここでは、ボタンをクリックするとテキストボックスの中身が変更されるという非常にシンプルなプログラムを作ってみました。Visual Studio は、ボタンをダブルクリックしただけでボタンを押したときに呼ばれるメソッド (イベント ハンドラー) が作られるといった、強力な開発支援機能がありますので、短期間で高度なアプリケーション開発が可能です。
もし Windows での Visual C# や Visual Basic での開発経験がありましたら、Windows Phone もほとんど同じように開発することができます。
今回は、テキストボックスとボタンだけを使いましたが、ツール ボックスの中には他にも沢山のコントロールがあります。これらのコントロールを使ったアプリケーションにも挑戦してみてはいかがでしょうか?
ページのトップへ
プログラム全文
<phone:PhoneApplicationPage x:Class="HelloWorld.MainPage" xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="https://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="https://schemas.microsoft.com/expression/blend/2008" xmlns:mc="https://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="Windows Phone Sample" Style="{StaticResource PhoneTextNormalStyle}"/> <TextBlock x:Name="PageTitle" Text="Hello World!" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/> </StackPanel> <!--ContentPanel - 追加コンテンツをここに入力します--> <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0"> <TextBox Height="73" HorizontalAlignment="Left" Margin="53,60,0,0" Name="textBox1" Text="TextBox" VerticalAlignment="Top" Width="339" /> <Button Content="Button" Height="72" HorizontalAlignment="Left" Margin="131,139,0,0" Name="button1" VerticalAlignment="Top" Width="160" Click="button1_Click" /> </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>
using System; using System.Collections.Generic; using System.Linq; using System.Net; using System.Windows; using System.Windows.Controls; using System.Windows.Documents; using System.Windows.Input; using System.Windows.Media; using System.Windows.Media.Animation; using System.Windows.Shapes; using Microsoft.Phone.Controls; namespace HelloWorld { public partial class MainPage : PhoneApplicationPage { // コンストラクター public MainPage() { InitializeComponent(); } private void button1_Click(object sender, RoutedEventArgs e) { textBox1.Text = "Happy!"; } } }
.gif)