[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を使用して開発するのが良いかもしれません。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください