エクスポート (0) 印刷
すべて展開

方法: Windows Phone 用の初めての Silverlight アプリケーションを作成する

2012/02/09

このトピックでは、Silverlight を使用して基本的な Web ブラウザー アプリケーションを作成する手順を示します。完成した Mini Browser のサンプルは、「Windows Phone のコード サンプル」トピックにあります。

注注:

次の手順は、Visual Studio 2010 Express for Windows Phone 向けです。 Visual Studio 2010 Professional や Visual Studio 2010 Ultimate のアドインを使用している場合は、メニュー コマンドやウィンドウのレイアウトが多少異なる場合があります。

Windows Phone Silverlight アプリケーションを作成する最初の手順として、新しいプロジェクトを作成します。

新しいプロジェクトを作成するには

  1. Windows Phone SDK をダウンロードし、インストールしていることを確認します。詳細については、「Windows Phone SDK のインストール」を参照してください。

  2. Windows のスタート メニューから Visual Studio 2010 Express for Windows Phone を起動します。[登録] ウィンドウが表示される場合、登録するか、一時的に閉じることができます。

  3. 新しいプロジェクトを作成するには、[ファイル]、[新しいプロジェクト] の順にメニュー コマンドを選択します。

  4. [新しいプロジェクト] ウィンドウが表示されます。Visual C# のテンプレートを展開してから、Silverlight for Windows Phone のテンプレートを選択します。

  5. Windows Phone Application テンプレートを選択します。目的のプロジェクトの [名前] を入力します。

    GetStartedNewProject
  6. [OK] をクリックします。Windows Phone の [プラットフォームの選択] ウィンドウが表示されます。[対象の Windows Phone バージョン] の [Windows Phone 7.1] を選択します。

    GetStartedSelectPlatform
  7. [OK] をクリックします。新しプロジェクトが作成され、Visual Studio デザイナー ウィンドウで MainPage.xaml が開きます。

次の手順では、Visual Studio デザイナーを使用してアプリケーションのコントロールをレイアウトします。コントロールを追加した後の最終的なレイアウトは、次のスクリーンショットのようになります。

GetStartedFirstAppLayout

アプリケーションのコントロールを追加するには

  1. アプリケーションのウィンドウ タイトルの名前を変更します。MY APPLICATION テキストを Visual Studio デザイナーで右クリックし、[プロパティ] を選択します。[プロパティ] ウィンドウが右下隅に表示されます。

    GetStartedProperties

  2. [テキスト] プロパティで名前を My First Application に変更します。

  3. page name テキストをデザイナーでクリックします。[テキスト] プロパティを Mini Browser に変更します。

  4. 縦向きおよび横向きの両方のサポートを追加します。XAML コードの最初の行をクリックし、PhoneApplicationPage プロパティが [プロパティ] ウィンドウに表示されるようにします。SupportedOrientation プロパティを PortraitOrLandscape に変更します。

  5. まだ開いていない場合は、Visual Studio で [表示]、[その他のウィンドウ]、[ツールボックス] の順にメニュー コマンドを選択してツールボックスを開きます。

  6. [Windows Phone コントロール] で TextBox コントロールをツールボックスからデザイナー画面にドラッグ アンド ドロップして追加します。TextBoxMini Browser テキストのすぐ下に配置します。上のレイアウト イメージとほぼ同じ幅になるように、マウスを使用してコントロールのサイズを変更します。テキスト ボックスは既定の名前、textBox1 のままにします。

    [プロパティ] ウィンドウで、textBox1 に対して次のプロパティを設定します。

    プロパティ

    Text

    http://www.xbox.com

    Height

    Auto

    Width

    Auto

    HorizontalAlignment

    Stretch

    VerticalAlignment

    このページのトップへ

    これらの設定は、縦向きおよび横向きのどちらのモードでもコントロールが正しくサイズ変更および配置されるようにします。[Go] ボタンを配置できるように、マウスを使用してページの余白を基準としてコントロールの位置を変更します。

  7. Button コントロールを前の手順で追加したテキスト ボックスの右にドラッグ アンド ドロップします。前のイメージとほぼ同じ幅になるようにコントロールのサイズを変更します。ボタンは既定の名前、button1 のままにします。

    [プロパティ] ウィンドウで、button1 に対して次のプロパティを設定します。

    プロパティ

    Content

    Go

    Height

    Auto

    Width

    Auto

    HorizontalAlignment

    Right

    VerticalAlignment

    このページのトップへ

    これらの設定は、縦向きおよび横向きのどちらのモードでもコントロールが正しく配置されるようにします。

  8. Windows Phone の WebBrowser コントロールをツールボックスからドラッグ アンド ドロップしてアプリケーションに追加します。このコントロールを前の手順で追加した 2 つのコントロールの下に配置します。残りの余白いっぱいまで、マウスを使用してコントロールのサイズを変更します。コントロールは既定の名前、webBrowser1 のままにします。

    注注:

    WebBrowser コントロールの詳細については、「Windows Phone の WebBrowser コントロールの概要」および「Windows Phone の WebBrowser コントロールのセキュリティに関するベスト プラクティス」を参照してください。

    [プロパティ] ウィンドウで、webBrowser1 に対して次のプロパティを設定します。

    プロパティ

    Height

    Auto

    Width

    Auto

    HorizontalAlignment

    Stretch

    VerticalAlignment

    Stretch

    これらの設定は、縦向きおよび横向きのどちらのモードでもコントロールが正しくサイズ変更されるようにします。

    これで、レイアウトが完成しました。MainPage.xaml の XAML コードで、コントロールを含むグリッドを見つけます。以下とほぼ同じように表示されます。前の図とまったく同じレイアウトにするには、以下の XAML をコピーして貼り付け、MainPage.xaml ファイルのグリッド レイアウトを置き換えます。

    <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
        <TextBox Height="Auto" HorizontalAlignment="Stretch" Margin="0,0,120,0" Name="textBox1" Text="http://www.xbox.com" VerticalAlignment="Top" />
        <Button Content="Go" Height="Auto" HorizontalAlignment="Right" Name="button1" VerticalAlignment="Top" Width="Auto" />
        <phone:WebBrowser HorizontalAlignment="Stretch" Margin="0,84,0,0" Name="webBrowser1" VerticalAlignment="Stretch" Height="Auto" Width="Auto" />
    </Grid>
    

この手順は、[Go] ボタンを実行するためのコードを追加します。

コードを追加するには

  1. 追加した [Go] ボタンのコントロールをダブルクリックし、ボタン クリック イベントのイベント ハンドラーを追加します。次のような MainPage.xaml.cs ファイルが表示されます。

    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 MiniBrowser
    {
        public partial class MainPage : PhoneApplicationPage
        {
            // Constructor
            public MainPage()
            {
                InitializeComponent();
            }
    
    
            private void button1_Click(object sender, RoutedEventArgs e)
            {
    
            }
        }
    }
    
    
    
  2. [Go] ボタンをダブルクリックすると、button1_Click イベント ハンドラーを含めるために XAML も更新されます。

    <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
        <TextBox Height="Auto" HorizontalAlignment="Stretch" Margin="0,0,120,0" Name="textBox1" Text="http://www.xbox.com" VerticalAlignment="Top" />
        <Button Content="Go" Height="Auto" HorizontalAlignment="Right" Name="button1" VerticalAlignment="Top" Width="Auto" Click="button1_Click" />
        <phone:WebBrowser HorizontalAlignment="Stretch" Margin="0,84,0,0" Name="webBrowser1" VerticalAlignment="Stretch" Height="Auto" Width="Auto" />
    </Grid>
    
    
    
  3. MainPage.xaml.csbutton1_Click イベント ハンドラーを以下のコード行で置き換えます。このコードはテキスト ボックスに入力された URL を取得し、webBrowser1 コントロールでそのページまで移動します。

    private void button1_Click(object sender, RoutedEventArgs e)
    {
        string site = textBox1.Text;    
        webBrowser1.Navigate(new Uri(site, UriKind.Absolute));
    }
    

アプリケーションが完成しました。この手順では、アプリケーションのビルド、実行、およびデバッグを行います。

重要な注重要な注:

アプリケーションをテストする前に、デスクトップ コンピューターがインターネットに接続されていることを確認します。

アプリケーションをビルドしてデバッグするには

  1. [デバッグ]、[ソリューションのビルド] の順にメニュー コマンドを選択してソリューションをビルドします。プロジェクトのビルドは、[エラー一覧] ウィンドウにはエラーが表示されずに行われる必要があります。[エラー一覧] ウィンドウをまだ開いていない場合は、[表示]、[その他のウィンドウ]、[エラー一覧] の順にメニュー コマンドを選択して開きます。エラーがある場合、前述の手順を確認してエラーしを修正し、ソリューションをもう一度ビルドします。

  2. 標準のツール バーで、アプリケーションの展開対象を [Windows Phone Emulator] に設定します。

    エミュレーターを選択している標準ツールバー上のターゲット

  3. [デバッグ]、[デバッグ開始] の順にメニュー コマンドを選択してアプリケーションを実行します。これによってエミュレーター ウィンドウが開き、アプリケーションが起動します。

  4. アプリケーションをテストするには、[Go] ボタンをクリックし、ブラウザー ウィンドウが指定された Web サイトに移動することを確認します。

    注注:

    インターネット接続の速度およびデスクトップの CPU によっては、Web サイトがエミュレーターに読み込まれるまでに数分かかる場合があります。

  5. エミュレーターの回転コントロールのいずれかを押します。

    左回転ボタン または右回転ボタン

    エミュレーターが横向きのモードに回転します。コントロールのサイズは、横向きの画面フォーマットに収まるように変更されます。

    GetStartedFirstAppRunningGetStartedFirstAppRunningLandscape
  6. コードにデバッグ ブレークポイントを設定するには、コードの目的の行にカーソルを置き、[デバッグ]、[ブレークポイントの設定/解除] の順にメニュー コマンドを選択します。

  7. デバッグを停止するには、[デバッグ]、[デバッグの停止] メニュー コマンドを選択します。

これで、最初の Windows Phone Silverlight アプリケーションが完成しました。Silverlight 開発の詳細については、Silverlight のドキュメントを参照してください。

表示:
© 2014 Microsoft