読者です 読者をやめる 読者になる 読者になる

Xamarin 日本語情報

Xamarin(ザマリン) の代理店だったエクセルソフト田淵のブログです。主に Xamarin に関するエントリーをアップしていきます。(なるべく正しい有益な情報を掲載していきたいと考えていますが、このブログのエントリーは所属組織の公式見解ではありませんのでご注意ください)

de:code 2016 DEV-023 サンプルアプリ解説 - その1(View を頑張る)

Xamarin Xamarin.Forms

こんにちは。エクセルソフトの田淵です。

日本マイクロソフトの大型有償技術イベント de:code 2016 の DEV-023 でお見せした、ちょっと頑張った Xamarin.Forms アプリの解説です。2016/5/28(土)の .NETラボ でも同様のデモをご紹介しました。

レポジトリはこちらです。

github.com

カメラアプリ

PCL プロジェクトから簡単に各プラットフォームのネイティブ API を呼び出す Xamarin Plugin が公開されています。(Xamarin Component と名前を変えたがっている気がする)

github.com

今回は上記 Xamarin.Plugins の中から Xamarin エバンジェリスト@JamesMontemagno さん作の Media Plugin を使用してカメラアプリを作成しました。詳しくはリンクの Readme をご覧ください。

NuGet で Xam.Plugin.Media で検索すると出てきます。写真、ビデオが簡単に PCL から扱える優れものです。

PreviewerSample アプリ

f:id:ytabuchi:20160528012809p:plain:w450

Xamarin.Forms Previewer を使用して XAML の機能詰め込んだサンプルアプリをご紹介しました。

Xamarin.Forms Previewer は 2016年5月末時点では Mac の Xamarin Studio Alpha 版でしか使えませんが、Xamarin.Forms のコントロールを見ながら XAML が書ける素晴らしい機能です。そしてなんと DataBinding も表示してくれます。表示するのに少しコツがいりますが、そちらについては以下のエントリーに記載しました。

ytabuchi.hatenablog.com

WPF/UWP の XAML に比べるとずいぶん機能が貧弱だとは思うのですが、以下のいくつかの機能をピックアップしてご紹介しました。

Data Binding

Xamarin.Forms では Bindable なコントロールのプロパティに {Binding XXX} を指定することで Data Binding が可能です。XXX のプロパティは ViewModel 側で INotifyPropertyChanged インターフェースを実装してあげれば自動的に PropertyChange 時に OnPropertyChanged が呼び出され View が更新されます。その他 Message Center などもサポートされています。

ドキュメントは

developer.xamarin.com

をご覧ください。

Mvvm 的な開発をしたい方は Xamarin.Forms と一緒に Prism for Xamarin.Forms@okazuki さんの Reactive Property を使用したりもできます。

Resource, Style

Page やグローバルの App.xaml(標準では App.cs なので手動で作る)で各コントロールのスタイルを設定できます。

<ResourceDictionary>
  <Style x:Key="nameStyle" 
         TargetType="Label">
    <Setter Property="TextColor">
      <Setter.Value>
        <OnPlatform x:TypeArguments="Color"
                    iOS="#B765B8"
                    Android="#3498DB"/>
      </Setter.Value>
    </Setter>
    <Setter Property="FontSize"
            Value="20"/>
  </Style>
</ResourceDictionary>

などと定義して、<Label Text="{Binding Name}" Style="{StaticResource nameStyle}"/> という感じで呼び出します。この例では、[Label]用に[nameStyle]というスタイルを定義して TextColorFontSize を指定しています。

ドキュメントは

developer.xamarin.com

などをご覧ください。

また、Device クラスにある OnPlatformOnIdiom などを使うと簡単に設定を振り分けられます。

ドキュメントは こちら をご参照ください。

Trigger, Behavior

Trigger, Behavior も使用できます。

<Button Text="Click me!">
    <Button.Triggers>
        <DataTrigger TargetType="Button"
                     Binding="{Binding Source={x:Reference entry}, Path=Text.Length}" 
                     Value="0">
            <Setter Property="IsEnabled" 
                    Value="False"/>
        </DataTrigger>
    </Button.Triggers>
</Button>

<Entry x:Name="entry" 
       Text="{Binding FilterNumber}">
    <Entry.Behaviors>
        <local:NumericValidationBehavior/>
    </Entry.Behaviors>
</Entry>

この例では DataTrigger の対象を x:Reference で直接[Entry]コントロールの entry を参照しています。条件に合った時だけ Setter でプロパティが設定されます。

Befavior は別途クラスを用意します。Attached Behavior にする場合は Bindable Property を持つ Static Behavior を用意するようです。

public class NumericValidationBehavior : Behavior<Entry>
{
    protected override void OnAttachedTo(Entry entry)
    {
        entry.TextChanged += OnEntryTextChanged;
        base.OnAttachedTo(entry);
    }

    protected override void OnDetachingFrom(Entry entry)
    {
        entry.TextChanged -= OnEntryTextChanged;
        base.OnDetachingFrom(entry);
    }

    void OnEntryTextChanged(object sender, TextChangedEventArgs args)
    {
        double result;
        bool isValid = double.TryParse(args.NewTextValue, out result);
        ((Entry)sender).TextColor = isValid ? Color.Default : Color.Red;
    }
}

Trigger のドキュメントは こちら

日本語の情報は Build Insider をご覧ください。

www.buildinsider.net

Behavior のドキュメントは

developer.xamarin.com

日本語の情報は Build Insider をご覧ください。

www.buildinsider.net

DataTemplate Selector

Xamarin.Forms 2.1 から DataTemplateSelector が使えるようになりました。主に今回のサンプルのように ListView で使用することになるかと思います。

ResourceDictionary に定義とセレクターを指定して、

<ResourceDictionary>
  <!-- DataTemplate定義-->
  <DataTemplate x:Key="youngPersonTemplate">
    <ViewCell>
      <StackLayout Orientation="Horizontal"
                   Spacing="10">
        <BoxView Color="Lime"
                 WidthRequest="4"/>
        <Label Text="{Binding Name}"
               VerticalTextAlignment="Center"/>
      </StackLayout>
    </ViewCell>
  </DataTemplate>
  <DataTemplate x:Key="oldPersonTemplate">
    <ViewCell>
      <StackLayout Orientation="Horizontal"
                   Spacing="10">
        <BoxView Color="Red"
                 WidthRequest="4"/>
        <Label Text="{Binding Name}"
               VerticalTextAlignment="Center"/>
      </StackLayout>
    </ViewCell>
  </DataTemplate>
  <!-- Selector指定 -->
  <local:PersonDataTemplateSelector x:Key="personDataTemplateSelector"
                                    YoungTemplate="{StaticResource youngPersonTemplate}"
                                    OldTemplate="{StaticResource oldPersonTemplate}"/>
</ResourceDictionary>

コードビハインドでセレクターの条件を指定して、

public class PersonDataTemplateSelector : DataTemplateSelector
{
    public DataTemplate YoungTemplate { get; set; }
    public DataTemplate OldTemplate { get; set; }

    protected override DataTemplate OnSelectTemplate(object item, BindableObject container)
    {
        return ((Person)item).Age <= 40 ? Youngemplate : OldTemplate;
    }
}

実際の ListView の ItemTemplate にセレクターを指定します。

<ListView ItemsSource="{Binding}"
          ItemTemplate="{StaticResource personDataTemplateSelector}"/>

ドキュメントは

developer.xamarin.com

をご覧ください。

日本語の情報は Xamarin.Forms マンこと @ticktackmobile もエントリー挙げてくださっているのでご覧ください。

ticktack.hatenablog.jp

その他小テク

Grid

Grid で頑張るとそれなりの見た目にできるかと。

古の HTML の Table テクニックじゃないですが、Grid の RowSpacingColumnSpacing を 1 にして中に ContentView を用意すれば 1px 的な枠を作れたりしますw

www.syntaxismyui.com

をご覧ください。

BoxView

例えば Custom Rendering してグラデーションを指定できるようにするとかなり使い勝手が上がりそうです。今回のように区切りなどにも使えます。

続きはその2で。

http://ytabuchi.hatenablog.com/entry/dev-023-2ytabuchi.hatenablog.com

Xamarin 気になった方は

是非 ダウンロード して触ってみてください。Visual Studio 2015 をご利用の方は Update 2 にアップデートする際にカスタムインストールで Xamarin を追加しましょう。 学習用リソースJXUG リンクページ に参考資料を纏めてますので併せてどうぞ。

Xamarin の情報が欲しい方はこのブログも購読いただいたり、私のTwitterアカウントをフォローいただいたりすると嬉しいです。

私が所属している エクセルソフト の宣伝を少しさせてください。弊社は開発者向けの様々なソフトウェアを扱っています。おなじみの ReSharper (JetBrains)、 や Atlassian の JIRA, Confluence、Office/PDF ファイルを .NET/Java で操作するライブラリ Aspose(アスポーズ)Windows アプリ、Web ページ、iOS/Android アプリの UI テストができる TestComplete などお勧めです(^^) また、Visual Studio Professional/Enterprise with MSDN も販売してますし、日本で売っていない海外のソフトウェア、開発ツールなどを弊社経由で日本円で購入頂くことも可能です。ご興味あれば 弊社ページ を覗いてみてください。

以上です。