[Visual Studio for Mac] 画面にコントロールを配置する

前回は新規でプロジェクトを作成したので、今回はコントロールを配置して実行をしてみたいと思います。

はじめに、ソリューションエクスプローラーでXAMLファイルをダブルクリックして開きます。プロジェクト名.xaml というファイルがメイン画面のファイルです。

ファイルを開くと、左側にはXAMLコードが、右側にはそのプレビュー画面が表示されます。XAMLコードを編集するとプレビュー画面に反映されるので、自分が記述したXAMLがどのような見え方をするのかを、確認しながらデザインをすることができます。

またプレビュー画面の上にあるDevicesでPhoneを選ぶと携帯用、Tabletを選択するとタブレット用のプレビュー画面になります。また、PlatformでiOSやAndroidデバイスに切り替えてプレビューをみることができるので、それぞれのプラットフォームでどのように見えるかを確認することができます。このあたりはXamarin Studioを使用していた方にとっては、操作方法は変わらないため違和感なく使用可能でしょう。

とりあえず、なにも変更せずにiOSアプリとして実行をしてみましょう。

IDEの上にある右向きの▲ボタンをクリックすると、シミュレータが起動して作成したアプリの動作を確認することができます。

このとき、プロジェクト名.iOSを選択して実行するとiOSのエミュレーターが、プロジェクト名.Androidを選択するとAndoroidのエミュレーターを起動することができます。

また、iOSでもAndroidでも、起動するエミュレーターは変更することができるので、様々なデバイスを想定して動作確認をすることができます。

iOSのエミュレーターを起動すると以下のようになります。

続いて、XAMLの編集方法を確認していきましょう。

メイン画面のXAMLファイルは以下のようになっています。

<?xml version="1.0" encoding="utf-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:local="clr-namespace:MyFirstApp" x:Class="MyFirstApp.MyFirstAppPage">
	<Label Text="Welcome to Xamarin Forms!" VerticalOptions="Center" HorizontalOptions="Center" />
</ContentPage>

初期のXAMLは<Label>が1つ配置されていて、テキストに「Welcolme to Xamarin Forms!」が表示されるようになっています。

本サイトでは、これまでにXamarin.Formsで使用可能なコントロールを紹介してきていますので、それらを参考にして画面をデザインしてください。

今回は、StackLayoutを配置して、LabelとButtonを以下のように配置してみます。

<?xml version="1.0" encoding="utf-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:local="clr-namespace:MyFirstApp" x:Class="MyFirstApp.MyFirstAppPage">
	<StackLayout Margin="10,30,10,10">
		<Label x:Name="lblText" Text="Welcome to Xamarin Forms!" VerticalOptions="Center" HorizontalOptions="Center" />
		<Button x:Name="button" Text="Click Me!" />
	</StackLayout>

</ContentPage>

XAMLを編集すると、リアルタイムでプレビュー画面が変更されていくことがわかります。

こうしてVisual Studio for Macを使用してみると、Xamarin Studioと同様であることがわかります。

WindowsのVisual StudioでもXamarin.Formsのプロジェクトを作成可能ですが、さくさく感があるのはMac版のVisual Studioです。

もし、Winodwsをターゲットにしないのであれば、Visual Studio for Macを使用して開発するのが良いかもしれません。

[Visual Studio for Mac] 新規プロジェクトを作成する

Visual Studio for Macが発表されて、だいぶ時間が経ちました。

しかし、まだ正規版ではないためまだ更新が行われることと思います。

Visual Studio for Macはなんぞやというと、今後 Xamarin Studioに取って代わる製品のことです。

残念ながら Windows アプリの開発はできないのですが、WinodwsユーザーでVisual Studioを使用していた方にとっては、MacにもVisual Studioがやってきたということでワクワクすること間違いナシの製品です。

今回、Preview版を入れてみたので、早速使ってみることとします。

まず、Visual Studio for Macを起動してみます。デザインは以下の通りです。

Visual Studioのアイコンイメージもあって格好良い外観です。

参考までに、現行のXamarin Studioは以下の通りです。これはこれで、格好が良いです。

再び Visual Studio for Macに戻って新規プロジェクトの作成をしてみます。

IDE上にある[New Project]ボタンをクリックするか、メニューの[ファイル]-[新しいソリューション]を選択すると、以下のように「新しいプロジェクト」のダイアログが表示されます。

※[ファイル]-[新しいソリューション]を選択するのに、ダイアログタイトルが「新しいプロジェクト」というのは違和感があります。

作成可能なアプリは、Xamarin.Forms, iOSアプリ、Androidアプリ、Mac用アプリなどがあります。

Windows版Visual Studioの場合、Xamarin Formsを使用すると、UWP、iOS, Androidアプリを作ることができますが、残念ながらMac版ではUWPアプリを作成することはできません。

今回はXamarin.Formsの「Forms App」を選択してみます。

App Nameには作成するアプリタイトルを、Organization Identifierには任意のユニークな名前(通常は、自身の持つURLを逆順で記述したもの)を入力します。

Target Platformはどのデバイス用アプリを作成するかを選択します。iOSとAndroidの両方をターゲットにする場合は、両方チェックします。

Shared Codeは今回はデフォルトのままとしました。

「Use Xaml for user interface files」は、画面デザインをXamlで行う場合にチェックをします。

入力が完了したら、右下の[次へ]ボタンをクリックします。続いて新しいプロジェクトの構成画面が表示されますが、ここではデフォルトのままで[作成]ボタンをクリックしました。

しばらくすると、IDEは以下のようになります。

右側にはソリューションエクスプローラーが、左側にはツールボックスが表示されます。

次回、XAMLを使用して、画面のデザインを行ってみたいと思います。