こんにちは。エクセルソフトの田淵です。
日本マイクロソフトの大型有償技術イベント de:code 2016 の DEV-023 でお見せした、ちょっと頑張った Xamarin.Forms アプリの解説です。2016/5/28(土)の .NETラボ でも同様のデモをご紹介しました。
レポジトリはこちらです。
カメラアプリ
PCL プロジェクトから簡単に各プラットフォームのネイティブ API を呼び出す Xamarin Plugin が公開されています。（Xamarin Component と名前を変えたがっている気がする）
今回は上記 Xamarin.Plugins の中から Xamarin エバンジェリストの @JamesMontemagno さん作の Media Plugin を使用してカメラアプリを作成しました。詳しくはリンクの Readme をご覧ください。
NuGet で Xam.Plugin.Media で検索すると出てきます。写真、ビデオが簡単に PCL から扱える優れものです。
PreviewerSample アプリ
Xamarin.Forms Previewer を使用して XAML の機能詰め込んだサンプルアプリをご紹介しました。
Xamarin.Forms Previewer は 2016年5月末時点では Mac の Xamarin Studio Alpha 版でしか使えませんが、Xamarin.Forms のコントロールを見ながら XAML が書ける素晴らしい機能です。そしてなんと DataBinding も表示してくれます。表示するのに少しコツがいりますが、そちらについては以下のエントリーに記載しました。
WPF/UWP の XAML に比べるとずいぶん機能が貧弱だとは思うのですが、以下のいくつかの機能をピックアップしてご紹介しました。
Data Binding
Xamarin.Forms では Bindable なコントロールのプロパティに {Binding XXX} を指定することで Data Binding が可能です。XXX のプロパティは ViewModel 側で INotifyPropertyChanged インターフェースを実装してあげれば自動的に PropertyChange 時に OnPropertyChanged が呼び出され View が更新されます。その他 Message Center などもサポートされています。
ドキュメントは
をご覧ください。
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］というスタイルを定義して TextColor と FontSize を指定しています。
ドキュメントは
などをご覧ください。
また、Device クラスにある OnPlatform や OnIdiom などを使うと簡単に設定を振り分けられます。
ドキュメントは こちら をご参照ください。
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 をご覧ください。
Behavior のドキュメントは
日本語の情報は Build Insider をご覧ください。
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}"/>
ドキュメントは
をご覧ください。
日本語の情報は Xamarin.Forms マンこと @ticktackmobile もエントリー挙げてくださっているのでご覧ください。
その他小テク
Grid
Grid で頑張るとそれなりの見た目にできるかと。
古の HTML の Table テクニックじゃないですが、Grid の RowSpacing と ColumnSpacing を 1 にして中に ContentView を用意すれば 1px 的な枠を作れたりしますｗ
をご覧ください。
BoxView
例えば Custom Rendering してグラデーションを指定できるようにするとかなり使い勝手が上がりそうです。今回のように区切りなどにも使えます。
続きはその２で。
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 も販売してますし、日本で売っていない海外のソフトウェア、開発ツールなどを弊社経由で日本円で購入頂くことも可能です。ご興味あれば 弊社ページ を覗いてみてください。
以上です。
