くうと徒然なるままに

モバイルアプリを作りながらバックエンドも作っています。

Xamarin.Forms 2.3.4 で追加された Bindable Picker を RxPRop で使ってみた (長濱 ねるちゃんはいいぞ)

Xamarin.Forms 2.3.4 で Picker の Item Source が Bindable になりました。

ソース

blog.xamarin.com

しかし、ネットでググっても、 ReactiveProrpety で 利用しているサンプルがなかったため、自分で書いてみました。

ソース

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:BindablePickerTest"
             xmlns:viewmodel="clr-namespace:BindablePickerTest.ViewModel;assembly=BindablePickerTest"
             BindingContext="{Binding Source={x:Static viewmodel:DesignTimeViewModel.MainPageViewModel}}"
             x:Class="BindablePickerTest.MainPage">
    <StackLayout 
        Padding="20,20,20,20">
        <Picker HeightRequest="40"
                Title="欅坂46 で一番かわいいのは?"
                ItemsSource="{Binding KEYAKIMember}"
                ItemDisplayBinding="{Binding Name}"
                SelectedItem="{Binding FavoriteMember.Value, Mode=OneWayToSource}"/>
        <Label Text="{Binding FavoriteMember.Value.Name, StringFormat='{0} かわいいよね( ˘ω˘ )'}" />

    </StackLayout>
</ContentPage>

MainPageViewModel.cs

using Reactive.Bindings;

namespace BindablePickerTest.ViewModel
{
    public class MainPageViewModel
    {
        public ReactiveCollection<MemberInfomation> KEYAKIMember { get; set; } = new ReactiveCollection<MemberInfomation>();

        public ReactiveProperty<MemberInfomation> FavoriteMember { get; set; } = new ReactiveProperty<MemberInfomation>();
        
        public MainPageViewModel()
        {

            KEYAKIMember.Add(new MemberInfomation { Name = "長濱 ねる" });
            KEYAKIMember.Add(new MemberInfomation { Name = "渡邊 りさ" });
            KEYAKIMember.Add(new MemberInfomation { Name = "菅井さま" });
            KEYAKIMember.Add(new MemberInfomation { Name = "今泉 佑唯" });
        }
    }
    public class MemberInfomation
    {
        public string Name { get; set; }
    }
}

動作動画

https://goo.gl/bQC0hi

解説

ソースの通りな感じです。まぁ、 Xaml ファイルでインテリセンスが利くように小細工してるぐらいでしょうか

blog.nuits.jp

ハマったポイント

Reactive Proprety を利用すると、 バインディングするときのパスで、 .Value を追加しなければいけないのに気づけず、ハマっていました。

参考サイト

ticktack.hatenablog.jp