前回は新規でプロジェクトを作成したので、今回はコントロールを配置して実行をしてみたいと思います。
はじめに、ソリューションエクスプローラーで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を使用して開発するのが良いかもしれません。
コメント