はじめに: Visual Studio の操作方法

Microsoft Visual Studio の操作方法

ここでは、前の手順で作った MyApp プロジェクトに戻り、Visual Studio 統合開発環境 (IDE) の操作方法について説明します。

Xcode 開発者であれば、次の図に示す、左側のウィンドウにソース ファイル、中央のウィンドウにエディター (UI またはコード)、コントロールとそのプロパティが右側のウィンドウにそれぞれ表示された既定のビューを見慣れていることと思われます。

Xcode の開発環境

Microsoft Visual Studio もこれに似ています。ただし、既定のビューでは、左側のツールボックスにコントロールが表示されます。ソース ファイルは右側のソリューション エクスプローラーに表示され、プロパティは右側の [プロパティ] に表示されます。レイアウトは次の図をご覧ください。

Visual Studio の開発環境

  ソリューション エクスプローラー ビューの右側の列に一覧表示されるファイルが、3 つのメイン セクション ([MyApp.Windows][MyApp.WindowsPhone][MyApp.Shared]) にどのように分かれて表示されているかに注意してください。このアプリがユニバーサル Windows アプリであるため、これらのセクションが表示されます。ソース ファイルは、必要に応じて、両方のプロジェクトの MyApp.Shared またはプラットフォーム固有のセクションの下に示されます。

Visual Studio 内のウィンドウは配置し直すことができます (ソース ファイルを左側に、コントロールを右側に表示するなど)。たとえば、ツールボックスを画面の左側から右側へ移動するには、[ツールボックス] ウィンドウのタイトル バーを長押しして右側にドラッグし、画面中央に表示されるドロップ ターゲットにドロップします。ツールボックスをドロップしたときにドッキングされる位置を示す陰付きの四角形が表示されます。

IDE を前の図に似た配置にするには、次の操作を行います。

  1. ソリューション エクスプローラーで、[MyApp.Windows] の下にある [MainPage.xaml] を長押し (または右クリック) して開きます。
  2. 左側の [ツールボックス] をタップしてツールボックスを表示します。次の図に示すように、[ツールボックス] ウィンドウのタイトル バーのプッシュピン アイコンをタップして、ツールボックスをピン留めします。
Visual Studio でのツールボックスのピン留め

トップに戻る

コントロールの追加、プロパティの設定、イベントへの応答

次は、MyApp プロジェクトにコントロールをいくつか追加しましょう。ここでは、コントロールのプロパティをいくつか変更した後、コントロールのイベントの 1 つに応答するコードを記述します。

Xcode でコントロールを追加するには、目的の .xib ファイルを開いた後、コントロールを追加します (次の図の [Round Rect Button] (角丸四角形ボタン) と [Label] (ラベル))。Visual Studio では、.xaml ファイルが .xib ファイルに相当します。

Xcode での UI の設計

次に、Visual Studio で同じような操作を行ってみましょう。ツールボックス[Button] コントロールを長押しし、MainPage.xaml ファイルのデザイン サーフェイスにドロップします。次の図に示すように、[TextBlock] コントロールについて同じ操作を行います。

Visual Studio での UI の設計

レイアウトとバインド情報が .xib ファイル内に格納される Xcode とは異なり、Visual Studio では、これらの詳細がリッチで編集可能な宣言型言語で .xaml ファイルに表示されます。Extensible Application Markup Language (XAML) について詳しくは、「XAML の概要」をご覧ください。[デザイン] ウィンドウに表示されているものはすべて [XAML] ウィンドウに定義されています。[XAML] ウィンドウでは必要に応じて細かな調整を行うことができるため、慣れるにつれて速やかにコードを開発できるようになります。ただし、ここでは、[デザイン] ウィンドウと [プロパティ] のみに注目します。

次に、ボタンの内容と名前を変更します。Xcode でボタンの内容を変更するには、次の図に示すように、ボタンのプロパティ ウィンドウで [Title] (タイトル) ボックスの値を変更します。

Xcode のプロパティ ウィンドウ

Visual Studio で同じような操作を行ってみましょう。[デザイン] ウィンドウで、このボタンをタップしてフォーカスを設定します。次に、ボタンの内容を変更するために、[プロパティ] ウィンドウで [内容] ボックスの値を "Button" から "Press Me" に変更します。次に、ボタンの名前を変更するために、次の図に示すように、[名前] ボックスの値を "<名前なし>" から "myButton" に変更します。

Visual Studio のボタンの [プロパティ] ウィンドウ

次に、ユーザーによってボタンがタップされたときに TextBlock コントロールの内容を "Hello, World!" に変更するコードを記述します。

Xcode では、次のコードと図に示すように、コードを記述した後でそのコードをコントロールに関連付けることによって、イベントの動作をコントロールに関連付けます。


// Objective-C header.

-(IBAction) buttonPressed: (id) sender;


// Objective-C implementation.

-(IBAction) buttonPressed: (id) sender {

}

Xcode でのボタンとイベントの関連付け

Xcode では、次の図に示すように、イベント コードをコントロールと関連付けることもできます。

Xcode でボタンをイベントと関連付ける別の方法

Visual Studio の操作も似ています。[プロパティ] の右上隅には、稲妻ボタンがあります。このボタンを使うと、次の図に示すように、選んだコントロールに関連付けられているイベントの一覧が表示されます。

Visual Studio でのボタンのイベントの一覧

ボタンのクリック イベントにコードを追加するには、[デザイン] ウィンドウで、まずそのボタンをタップします。続いて、稲妻ボタンをタップし、[Click] ラベルの横のボックスを長押しします。 Visual Studio によってテキスト "myButton_Click" が [Click] ボックスに追加されます。さらに、次のコードに示す対応するイベント ハンドラーが MainPage.xaml.cs ファイルに追加され、表示されます。


private void myButton_Click(object sender, RoutedEventArgs e)
{

}

次に、TextBlock コントロールの名前を変更します。Xcode では、次の図に示すように、次のコードを記述し、コントロールをその定義に関連付けます。


// Objective-C header.

IBOutlet UILabel *myLabel;

Xcode でのラベルと定義の関連付け

Xcode では、次の図に示すように、コードをその定義と関連付けることもできます。

Xcode でラベルをその定義と関連付ける別の方法

Visual Studio では、次の図に示すようにこの操作を行います。

  1. MainPage.xaml ファイルのタブをタップします。
  2. [デザイン] ウィンドウで、[TextBlock] コントロールをタップします。
  3. [プロパティ] ウィンドウで、レンチ ボタンをタップしてプロパティを表示します。
  4. [名前] ボックスで、"<名前なし>" を "myLabel" に変更します。
Visual Studio のラベルの [プロパティ] ウィンドウ

次に、ボタンのクリック イベントにコードを追加してみましょう。このためには、MainPage.xaml.cs ファイルをタップし、次のコードを myButton_Click イベント ハンドラーに追加します。


private void myButton_Click(object sender, RoutedEventArgs e)
{
    // Add the following line of code.    
    myLabel.Text = "Hello, World!";
}

前のコードは、次のように Xcode を使った場合のコードに似ています。


-(IBAction) buttonPressed: (id) sender {
    myLabel.text = @"Hello, World!";
}

最後に、アプリを実行するために、Visual Studio で [MyApp.Windows] が太字になっていることを確認し (これが既定のスタートアップ プロジェクトであることを示します)、[デバッグ] メニュー、[デバッグの開始] の順にタップします (または、単に F5 キーを押します)。アプリが起動されたら、"Press Me" ボタンをタップして、次の図に示すように、ラベルの内容が "TextBlock" から "Hello, World!" に変わることを確かめます。

最初のチュートリアルを実行した結果: Hello、World!

アプリを中止するには、Visual Studio に戻り、[デバッグ] メニュー、[デバッグの停止] の順にタップします (または、単に Shift キーを押しながら F5 キーを押します)。

完全に同じ手順に従って、Windows Phone プロジェクトに対して上記のプロセスを繰り返すことができますが、[MyApp.WindowsPhone] 分岐の下にある [MainPage.xaml] を使ってください。もちろん、アプリの処理がこれですべて網羅されている場合は、[MainPage.xaml] ファイルを [MyApp.Shared] 分岐にドラッグして、既にある [MainPage.xaml][MyApp.WindowsPhone] 分岐から削除できます。これにより、[MainPage.xaml] ファイルが両方のプラットフォーム間で共有されるので、作業が軽減されます。

次の手順

はじめに: コモン コントロール

 

 

表示:
© 2015 Microsoft