プロジェクトを作成する

Visual Studio を起動して、メニューからファイル＞新規作成＞プロジェクトを選択する。左側のツリーから、 VisualC#＞Cross-Platform＞クロスプラットフォームアプリを選択。

f:id:foohogehoge:20170408130328p:plain:w600

プロジェクト名はサンプルに倣って「TicTacToe」とする。

テンプレートなどの選択

自動で作成されても扱いきれないので、テンプレートは空のアプリを選択。 UIテクノロジは当然Xamarin.Forms。コード共有方法はPCLにしてみた。理由はない。ググった結果を眺めて勘で決めた。

f:id:foohogehoge:20170408141336p:plain:w600

UWPはターゲットプラットフォームの選択ダイアログが出る。デフォルトでいく。

f:id:foohogehoge:20170408141436p:plain:w600

ほかにも「Macが見つからない」的なメッセージが出るがMacはないので無視。

自動生成後

ソリューションエクスプローラーはこんな感じ。

f:id:foohogehoge:20170408141810p:plain:h600

１つ気になったのが、UWPプロジェクトの下にあるMainPage.xaml。

f:id:foohogehoge:20170408142043p:plain:w600

編集しても画面に反映されないので？？？？な感じ。呟いてみたら助けていただいた。ありがとうございます。

@foohogehoge UWP側のはUWPのお作法の為にあるものなので、基本は共通側に手を入れていけば問題ないです
— nuits.jp (@nuits_jp) 2017年4月8日

メイン画面をつくる

(移植可能)の下にあるMainPage.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:TicTacToe"
             x:Class="TicTacToe.MainPage">

    <Label Text="Welcome to Xamarin Forms!" 
           VerticalOptions="Center" 
           HorizontalOptions="Center" />

</ContentPage>

Controls Reference - Xamarinで調べると、Xamarin.Formsでは一番外側の要素はPageになるらしい。初めてのAndroid 第4版のサンプルでは、activity_main.xmlの内側にfragent_main.xmlを配置をしている。 Xamarin.Formsにはフラグメントの概念がなさそうだが、とりあえず見た目だけ真似してみる。

fragent_main.xmlの代わりを作る

メイン画面の子要素として使うビューを作成する。

TicTacTue(移植可能)プロジェクトの下に新規Xamlファイルを作成する。テンプレートがいろいろあるが、先ほどの調査結果からPage的なものは除外して考える。今回は「Forms ContentView Xaml」を選択した。ファイル名は FragmentMain.xaml とする。作成直後はこんな感じになる。

<?xml version="1.0" encoding="UTF-8"?>
<ContentView xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="TicTacToe.FragmentMain">
  <ContentView.Content>
  </ContentView.Content>
</ContentView>

さて、初めてのAndroid 第4版ではLinerLayoutで定義されているが、Xamarin.Formsではどうなるのか調べてみる。 Controls Reference - Xamarinを眺めると、StackLayoutが良さそう。下のように書き換えてみる。

<?xml version="1.0" encoding="UTF-8"?>
<StackLayout 
    xmlns="http://xamarin.com/schemas/2014/forms"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    x:Class="TicTacToe.FragmentMain">
</StackLayout>

と、ここでエラーが発生。

‘FragmentMain’ の partial 宣言では、異なる基底クラスを指定してはいけません。

FragmentMain.xaml.cs の基底クラスも変更しなければならないようだ。基底クラスを ContentView から StackLayout へ変更する。

namespace TicTacToe
{
    public partial class FragmentMain : StackLayout
    {
        public FragmentMain()
        {
            InitializeComponent();
        }
    }
}

あとは、テキストラベルとボタンを配置すればよい。

<?xml version="1.0" encoding="UTF-8"?>
<StackLayout 
    xmlns="http://xamarin.com/schemas/2014/forms"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    x:Class="TicTacToe.FragmentMain">
    <Label
       Text="Tic Tac Toe"
       VerticalOptions="Start"
       HorizontalOptions="Center" />
    <Button
        Text="CONTINUE" />
    <Button
        Text="NEW GAME" />
    <Button
        Text="ABOUT"/>
</StackLayout>

文字列部分はリソースファイルを使う予定だが、とりあえずレイアウトを確認したいので後回しにする。見た目に関する細かいプロパティもとりあえず置いておく。

メイン画面へ組み込んでみる

いきなりでアレだが、こんな感じになる。

<?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:TicTacToe"
             x:Class="TicTacToe.MainPage">

    <Frame VerticalOptions="Center"
           HorizontalOptions="Center">
        <local:FragmentMain />
    </Frame>
</ContentPage>