Xamarin.Forms でユーザーコントロール的な View を作る

前回で Shared プロジェクトだとアセンブリ構成が微妙になるので PCL プロジェクトで作り直し

Xamarin.Forms のサンプルだと Page の XAML しかないですが、もしかしたらユーザーコントロール的な View が作れるのかもしれないので、試してみました

f:id:matatabi_ux:20140914195136p:plain

まずは Xamarin のアイテムテンプレート「Forms Xaml Page」を選び TopPage.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:view="clr-namespace:XamarinSample.Views;assembly=XamarinSample"
             xmlns:vm="clr-namespace:XamarinSample.ViewModels;assembly=XamarinSample"
             x:Class="XamarinSample.Views.TopPage">
    <ContentPage.BindingContext>
        <vm:TopPageViewModel/>
    </ContentPage.BindingContext>
    <view:ArcStepper />
</ContentPage>

こんな感じに記述（TopPageViewModel は一般的な ViewModel です）

さらに App.cs を修正

namespace XamarinSample
{
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Text;

    using Xamarin.Forms;
    using XamarinSample.Views;

    /// <summary>
    /// アプリケーション共通クラス
    /// </summary>
    public class App
    {
        /// <summary>
        /// 初期画面の取得
        /// </summary>
        /// <returns>初期画面</returns>
        public static Page GetMainPage()
        {
            return new TopPage();
        }
    }
}

ここからがお試し・・・Xamarin のアイテムテンプレート「Forms Xaml Page」を選び ArcStepper.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="XamarinSample.Views.ArcStepper">
    <Label Text="{Binding TimerValue, StringFormat='{0:h\\:mm\\:ss}'}" VerticalOptions="Center" HorizontalOptions="Center" />
</ContentView>