Xamarin.Forms でも UISegmentedControl を使いたい！

複数の項目を選択するとき iOS では UISegmentedControl をよく使うと思います．

UISegmentedControl – UIKit | Apple Developer Documentation

しかしながら、Xamarin.Forms には UISegmentedControl に対応するコントロールは用意されていません．

Embedding Native Controls into Xamarin.Forms | Xamarin Blog

Embedding Native を使えばネイティブコントロールを配置できますが、Android をどうするか．

Android を自前のカスタムコントロールで実装しようか迷っていたとき、ちょうど良さげなコントロールを見つけました.

iOS(iOS 8.1+)/Android(API 18+) に対応しています．

NuGet Gallery | Segmented Control for Xamarin Forms 1.2.4

NuGet から使えます．

<abstractions:SegmentedControl TintColor="Red"
                               SelectedSegment="{Binding SelectedSegment.Value, Mode=TwoWay}">
    <abstractions:SegmentedControl.Children>
        <abstractions:SegmentedControlOption Text="かばん" />
        <abstractions:SegmentedControlOption Text="サーバル" />
    </abstractions:SegmentedControl.Children>
</abstractions:SegmentedControl>

こんな感じに XAML で書けます．子要素も XAML で書けるのがいいですね．

TintColor=”Red” にするとこのように赤い SegmentedControl も作れます．ただ、この TintColor ですが Android ではバグがあります…

SegmentedControl/SegmentedControlImplementation.cs at master · alexrainman/SegmentedControl · GitHub

IsEnabled の変更通知をしなければ TintColor は変更されないようになっています．IsEnabled = false → IsEnabled = true みたいに変更してあげれば iOS と同じように赤い SegmentControl を作れます．

いちいち IsEnabled を変更するのもめんどくさいのでそのままの色で使うか、Fork して使うなりしたほうがいいかもしれません．

以上です.