XAML のネイティブビュー

[アーティクル]
03/23/2019

iOS、Android、ユニバーサル Windows プラットフォームのネイティブビューは、Xamarin.Forms XAML ファイルから直接参照できます。プロパティとイベントハンドラーはネイティブビューで設定でき、Xamarin.Forms ビューと連携できます。この記事では、Xamarin.Forms XAML ファイルからネイティブビューを使用する方法を見ていきます。

ネイティブビューを Xamarin.Forms XAML ファイルに埋め込むには:

ネイティブビューを含む名前空間の XAML ファイルに、xmlns 名前空間の宣言を追加します。
XAML ファイルでネイティブビューのインスタンスを作成します。

重要

ネイティブビューを使う XAML ページで、コンパイル済み XAML を無効にする必要があります。これを行うには、XAML ページの分離コードクラスを [XamlCompilation(XamlCompilationOptions.Skip)] 属性で修飾します。 XAML のコンパイルについて詳しくは、「Xamarin.Forms での XAML のコンパイル」をご覧ください。

分離コードファイルからネイティブビューを参照するには、共有アセットプロジェクト (SAP) を使い、プラットフォーム固有のコードを条件付きコンパイルディレクティブでラップする必要があります。詳しくは、「コードからネイティブビューを参照する」をご覧ください。

ネイティブビューを使用する

次のコード例では、Xamarin.Forms の ContentPage に各プラットフォームのネイティブビューを使用する方法を見ていきます。

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
        xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
        xmlns:ios="clr-namespace:UIKit;assembly=Xamarin.iOS;targetPlatform=iOS"
        xmlns:androidWidget="clr-namespace:Android.Widget;assembly=Mono.Android;targetPlatform=Android"
        xmlns:androidLocal="clr-namespace:SimpleColorPicker.Droid;assembly=SimpleColorPicker.Droid;targetPlatform=Android"
        xmlns:win="clr-namespace:Windows.UI.Xaml.Controls;assembly=Windows, Version=255.255.255.255,
            Culture=neutral, PublicKeyToken=null, ContentType=WindowsRuntime;targetPlatform=Windows"
        x:Class="NativeViews.NativeViewDemo">
    <StackLayout Margin="20">
        <ios:UILabel Text="Hello World" TextColor="{x:Static ios:UIColor.Red}" View.HorizontalOptions="Start" />
        <androidWidget:TextView Text="Hello World" x:Arguments="{x:Static androidLocal:MainActivity.Instance}" />
        <win:TextBlock Text="Hello World" />
    </StackLayout>
</ContentPage>

ネイティブビュー名前空間の clr-namespace と assembly を指定するだけでなく、targetPlatform も指定する必要があります。これは、iOS、Android、UWP、Windows (UWP と同等)、macOS、GTK、Tizen、または WPF に設定する必要があります。実行時に、XAML パーサーは、アプリケーションが実行されているプラットフォームと一致しない targetPlatform を持つ XML 名前空間プレフィックスを無視します。

各名前空間宣言を使って、指定した名前空間の任意のクラスまたは構造体を参照できます。たとえば、ios 名前空間宣言を使って、iOS の UIKit 名前空間の任意のクラスまたは構造体を参照できます。ネイティブビューのプロパティは XAML を使って設定できますが、プロパティとオブジェクトの型が一致している必要があります。たとえば、UILabel.TextColor プロパティは、x:Static マークアップ拡張と ios 名前空間を使って UIColor.Red に設定されます。

バインド可能プロパティとアタッチされたバインド可能プロパティは、Class.BindableProperty="value" 構文を使ってネイティブビューで設定することもできます。各ネイティブビューは、Xamarin.Forms.View クラスから派生したプラットフォーム固有の NativeViewWrapper インスタンスにラップされます。ネイティブビューでバインド可能プロパティまたはアタッチされたバインド可能プロパティを設定すると、プロパティ値がラッパーに転送されます。たとえば、ネイティブビューで View.HorizontalOptions="Center" を設定して、中央揃えの水平レイアウトを指定できます。

Note

スタイルで対象にできるのは BindableProperty オブジェクトによってサポートされるプロパティだけなので、ネイティブビューではスタイルを使用できないことに注意してください。

Android ウィジェットコンストラクターでは、通常、引数として Android Context オブジェクトが必要であり、これは MainActivity クラスの静的プロパティを介して使用できます。そのため、XAML で Android ウィジェットを作成するときは、通常、x:Arguments 属性と x:Static マークアップ拡張を使って、Context オブジェクトをウィジェットのコンストラクターに渡す必要があります。詳しくは、「ネイティブビューに引数を渡す」をご覧ください。

Note

.NET Standard ライブラリプロジェクトまたは共有アセットプロジェクト (SAP) では、x:Name を使ってネイティブビューの名前を指定できないことに注意してください。それを行うと、ネイティブ型の変数が生成され、コンパイルエラーが発生します。ただし、SAP が使われている場合は、ネイティブビューを ContentView インスタンスにラップして、分離コードファイルで取得できます。詳しくは、「コードからネイティブビューを参照する」をご覧ください。

ネイティブバインド

データバインディングは、UI とそのデータソースを同期するために使われ、Xamarin.Forms アプリケーションによるデータの表示と操作の方法を簡単にします。ソースオブジェクトで INotifyPropertyChanged インターフェイスが実装されていると、"ソース" オブジェクトでの変更はバインディングフレームワークによって "ターゲット" オブジェクトに自動的にプッシュされ、"ターゲット" オブジェクトでの変更は、必要に応じて、"ソース" オブジェクトにプッシュできます。

ネイティブビューのプロパティでも、データバインディングを使用できます。次のコード例では、ネイティブビューのプロパティを使用するデータバインディングについて見ていきます。

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
        xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
        xmlns:ios="clr-namespace:UIKit;assembly=Xamarin.iOS;targetPlatform=iOS"
        xmlns:androidWidget="clr-namespace:Android.Widget;assembly=Mono.Android;targetPlatform=Android"
        xmlns:androidLocal="clr-namespace:SimpleColorPicker.Droid;assembly=SimpleColorPicker.Droid;targetPlatform=Android"
        xmlns:win="clr-namespace:Windows.UI.Xaml.Controls;assembly=Windows, Version=255.255.255.255,
            Culture=neutral, PublicKeyToken=null, ContentType=WindowsRuntime;targetPlatform=Windows"
        xmlns:local="clr-namespace:NativeSwitch"
        x:Class="NativeSwitch.NativeSwitchPage">
    <StackLayout Margin="20">
        <Label Text="Native Views Demo" FontAttributes="Bold" HorizontalOptions="Center" />
        <Entry Placeholder="This Entry is bound to the native switch" IsEnabled="{Binding IsSwitchOn}" />
        <ios:UISwitch On="{Binding Path=IsSwitchOn, Mode=TwoWay, UpdateSourceEventName=ValueChanged}"
            OnTintColor="{x:Static ios:UIColor.Red}"
            ThumbTintColor="{x:Static ios:UIColor.Blue}" />
        <androidWidget:Switch x:Arguments="{x:Static androidLocal:MainActivity.Instance}"
            Checked="{Binding Path=IsSwitchOn, Mode=TwoWay, UpdateSourceEventName=CheckedChange}"
            Text="Enable Entry?" />
        <win:ToggleSwitch Header="Enable Entry?"
            OffContent="No"
            OnContent="Yes"
            IsOn="{Binding IsSwitchOn, Mode=TwoWay, UpdateSourceEventName=Toggled}" />
    </StackLayout>
</ContentPage>

このページに含まれる Entry の IsEnabled プロパティは、NativeSwitchPageViewModel.IsSwitchOn プロパティにバインドしています。ページの BindingContext は、分離コードファイルで NativeSwitchPageViewModel クラスの新しいインスタンスに設定されており、ViewModel クラスは INotifyPropertyChanged インターフェイスを実装しています。

このページには、各プラットフォームのネイティブスイッチも含まれています。各ネイティブスイッチは、TwoWay バインドを使って、NativeSwitchPageViewModel.IsSwitchOn プロパティの値を更新します。そのため、スイッチがオフのときは Entry は無効であり、スイッチがオンのときは Entry は有効です。次のスクリーンショットは、各プラットフォームでのこの機能を示したものです。

ネイティブスイッチが無効ネイティブスイッチが有効

ネイティブプロパティが、INotifyPropertyChanged を実装している場合、または iOS でキー値監視 (KVO) をサポートしている場合、または UWP で DependencyProperty である場合は、両方向のバインドが自動的にサポートされます。ただし、多くのネイティブビューでは、プロパティ変更通知はサポートされていません。これらのビューでは、バインド式の一部として UpdateSourceEventName プロパティの値を指定できます。このプロパティには、ターゲットプロパティが変化したときに通知するネイティブビューのイベントの名前を設定する必要があります。その後は、ネイティブスイッチの値が変化すると、ユーザーがスイッチの値を変更したことが Binding クラスに通知されて、NativeSwitchPageViewModel.IsSwitchOn プロパティの値が更新されます。

ネイティブビューに引数を渡す

x:Arguments 属性と x:Static マークアップ拡張を使って、コンストラクター引数をネイティブビューに渡すことができます。さらに、x:FactoryMethod 属性を使ってメソッドの名前を指定し、x:Arguments 属性を使ってその引数を指定すると、ネイティブビューファクトリメソッド (メソッドが定義されているクラスまたは構造体と同じ型のオブジェクトまたは値を返す public static メソッド) を呼び出すことができます。

次のコード例では、両方の手法を見ていきます。

<ContentPage ...
        xmlns:ios="clr-namespace:UIKit;assembly=Xamarin.iOS;targetPlatform=iOS"
        xmlns:androidWidget="clr-namespace:Android.Widget;assembly=Mono.Android;targetPlatform=Android"
        xmlns:androidGraphics="clr-namespace:Android.Graphics;assembly=Mono.Android;targetPlatform=Android"
        xmlns:androidLocal="clr-namespace:SimpleColorPicker.Droid;assembly=SimpleColorPicker.Droid;targetPlatform=Android"
        xmlns:winControls="clr-namespace:Windows.UI.Xaml.Controls;assembly=Windows, Version=255.255.255.255, Culture=neutral, PublicKeyToken=null, ContentType=WindowsRuntime;targetPlatform=Windows"
        xmlns:winMedia="clr-namespace:Windows.UI.Xaml.Media;assembly=Windows, Version=255.255.255.255, Culture=neutral, PublicKeyToken=null, ContentType=WindowsRuntime;targetPlatform=Windows"
        xmlns:winText="clr-namespace:Windows.UI.Text;assembly=Windows, Version=255.255.255.255, Culture=neutral, PublicKeyToken=null, ContentType=WindowsRuntime;targetPlatform=Windows"
        xmlns:winui="clr-namespace:Windows.UI;assembly=Windows, Version=255.255.255.255, Culture=neutral, PublicKeyToken=null, ContentType=WindowsRuntime;targetPlatform=Windows">
        ...
        <ios:UILabel Text="Simple Native Color Picker" View.HorizontalOptions="Center">
            <ios:UILabel.Font>
                <ios:UIFont x:FactoryMethod="FromName">
                    <x:Arguments>
                        <x:String>Papyrus</x:String>
                        <x:Single>24</x:Single>
                    </x:Arguments>
                </ios:UIFont>
            </ios:UILabel.Font>
        </ios:UILabel>
        <androidWidget:TextView x:Arguments="{x:Static androidLocal:MainActivity.Instance}"
                    Text="Simple Native Color Picker"
                    TextSize="24"
                    View.HorizontalOptions="Center">
            <androidWidget:TextView.Typeface>
                <androidGraphics:Typeface x:FactoryMethod="Create">
                    <x:Arguments>
                        <x:String>cursive</x:String>
                        <androidGraphics:TypefaceStyle>Normal</androidGraphics:TypefaceStyle>
                    </x:Arguments>
                </androidGraphics:Typeface>
            </androidWidget:TextView.Typeface>
        </androidWidget:TextView>
        <winControls:TextBlock Text="Simple Native Color Picker"
                    FontSize="20"
                    FontStyle="{x:Static winText:FontStyle.Italic}"
                    View.HorizontalOptions="Center">
            <winControls:TextBlock.FontFamily>
                <winMedia:FontFamily>
                    <x:Arguments>
                        <x:String>Georgia</x:String>
                    </x:Arguments>
                </winMedia:FontFamily>
            </winControls:TextBlock.FontFamily>
        </winControls:TextBlock>
        ...
</ContentPage>

UIFont.FromName ファクトリメソッドは、iOS で、UILabel.Font プロパティを新しい UIFont に設定するために使われます。 UIFont の名前とサイズは、x:Arguments 属性の子であるメソッド引数で指定します。

Typeface.Create ファクトリメソッドは、Android で、TextView.Typeface プロパティを新しい Typeface に設定するために使われます。 Typeface ファミリの名前とスタイルは、x:Arguments 属性の子であるメソッド引数で指定します。

FontFamily コンストラクターは、ユニバーサル Windows プラットフォーム (UWP) で、TextBlock.FontFamily プロパティを新しい FontFamily に設定するために使われます。 FontFamily の名前は、x:Arguments 属性の子であるメソッド引数で指定します。

Note

引数は、コンストラクターまたはファクトリメソッドで必要な型と一致する必要があります。

次のスクリーンショットは、ファクトリメソッドとコンストラクターの引数を指定して、異なるネイティブビューでフォントを設定した結果を示したものです。

ネイティブビューでフォントを設定する

XAML で引数を渡す方法について詳しくは、「XAML での引数の受け渡し」をご覧ください。

コードからネイティブビューを参照する

x:Name 属性でネイティブビューの名前を指定することはできませんが、ネイティブビューが x:Name 属性値を指定する ContentView の子である場合は、XAML ファイルで宣言されているネイティブビューインスタンスを、共有アクセスプロジェクトの分離コードファイルから取得できます。その後、分離コードファイルの条件付きコンパイルディレクティブ内で、次のようにする必要があります。

ContentView.Content プロパティの値を取得して、プラットフォーム固有の NativeViewWrapper 型にキャストします。
NativeViewWrapper.NativeElement プロパティを取得して、ネイティブビュー型にキャストします。

その後、ネイティブビューでネイティブ API を呼び出して、目的の操作を実行できます。この方法では、異なるプラットフォームの複数の XAML ネイティブビューを同じ ContentView の子にできるという利点もあります。次のコード例は、この手法を示したものです。

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
        xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
        xmlns:ios="clr-namespace:UIKit;assembly=Xamarin.iOS;targetPlatform=iOS"
        xmlns:androidWidget="clr-namespace:Android.Widget;assembly=Mono.Android;targetPlatform=Android"
        xmlns:androidLocal="clr-namespace:SimpleColorPicker.Droid;assembly=SimpleColorPicker.Droid;targetPlatform=Android"
        xmlns:winControls="clr-namespace:Windows.UI.Xaml.Controls;assembly=Windows, Version=255.255.255.255,
            Culture=neutral, PublicKeyToken=null, ContentType=WindowsRuntime;targetPlatform=Windows"
        xmlns:local="clr-namespace:NativeViewInsideContentView"
        x:Class="NativeViewInsideContentView.NativeViewInsideContentViewPage">
    <StackLayout Margin="20">
        <ContentView x:Name="contentViewTextParent" HorizontalOptions="Center" VerticalOptions="CenterAndExpand">
            <ios:UILabel Text="Text in a UILabel" TextColor="{x:Static ios:UIColor.Red}" />
            <androidWidget:TextView x:Arguments="{x:Static androidLocal:MainActivity.Instance}"
                Text="Text in a TextView" />
              <winControls:TextBlock Text="Text in a TextBlock" />
        </ContentView>
        <ContentView x:Name="contentViewButtonParent" HorizontalOptions="Center" VerticalOptions="EndAndExpand">
            <ios:UIButton TouchUpInside="OnButtonTap" View.HorizontalOptions="Center" View.VerticalOptions="Center" />
            <androidWidget:Button x:Arguments="{x:Static androidLocal:MainActivity.Instance}"
                Text="Scale and Rotate Text"
                Click="OnButtonTap" />
            <winControls:Button Content="Scale and Rotate Text" />
        </ContentView>
    </StackLayout>
</ContentPage>

上の例で、各プラットフォームのネイティブビューは ContentView コントロールの子であり、コードビハインドで ContentView を取得するには x:Name 属性の値が使われています。

public partial class NativeViewInsideContentViewPage : ContentPage
{
    public NativeViewInsideContentViewPage()
    {
        InitializeComponent();

#if __IOS__
        var wrapper = (Xamarin.Forms.Platform.iOS.NativeViewWrapper)contentViewButtonParent.Content;
        var button = (UIKit.UIButton)wrapper.NativeView;
        button.SetTitle("Scale and Rotate Text", UIKit.UIControlState.Normal);
        button.SetTitleColor(UIKit.UIColor.Black, UIKit.UIControlState.Normal);
#endif
#if __ANDROID__
        var wrapper = (Xamarin.Forms.Platform.Android.NativeViewWrapper)contentViewTextParent.Content;
        var textView = (Android.Widget.TextView)wrapper.NativeView;
        textView.SetTextColor(Android.Graphics.Color.Red);
#endif
#if WINDOWS_UWP
        var textWrapper = (Xamarin.Forms.Platform.UWP.NativeViewWrapper)contentViewTextParent.Content;
        var textBlock = (Windows.UI.Xaml.Controls.TextBlock)textWrapper.NativeElement;
        textBlock.Foreground = new Windows.UI.Xaml.Media.SolidColorBrush(Windows.UI.Colors.Red);
        var buttonWrapper = (Xamarin.Forms.Platform.UWP.NativeViewWrapper)contentViewButtonParent.Content;
        var button = (Windows.UI.Xaml.Controls.Button)buttonWrapper.NativeElement;
        button.Click += (sender, args) => OnButtonTap(sender, EventArgs.Empty);
#endif
    }

    async void OnButtonTap(object sender, EventArgs e)
    {
        contentViewButtonParent.Content.IsEnabled = false;
        contentViewTextParent.Content.ScaleTo(2, 2000);
        await contentViewTextParent.Content.RotateTo(360, 2000);
        contentViewTextParent.Content.ScaleTo(1, 2000);
        await contentViewTextParent.Content.RelRotateTo(360, 2000);
        contentViewButtonParent.Content.IsEnabled = true;
    }
}

ContentView.Content プロパティにアクセスして、ラップされたネイティブビューをプラットフォーム固有の NativeViewWrapper インスタンスとして取得します。その後、NativeViewWrapper.NativeElement プロパティにアクセスして、ネイティブビューをネイティブ型として取得します。それから、ネイティブビューの API を呼び出して、必要な操作を実行します。

各ネイティブボタンはタッチイベントへの応答で EventHandler デリゲートを使うため、iOS と Android のネイティブボタンは同じ OnButtonTap イベントハンドラーを共有します。一方、ユニバーサル Windows プラットフォーム (UWP) は別の RoutedEventHandler を使い、それによって、この例では、OnButtonTap イベントハンドラーが使われます。したがって、ネイティブボタンがクリックされると、OnButtonTap イベントハンドラーが実行して、contentViewTextParent という名前の ContentView に含まれるネイティブコントロールの拡大縮小と回転を行います。次のスクリーンショットは、各プラットフォームでこれが行われているのを示したものです。

ネイティブコントロールを含む ContentView

ネイティブビューをサブクラス化する

iOS と Android の多くのネイティブビューは、コントロールを設定するためにプロパティではなくメソッドを使っているため、XAML でのインスタンス化に適していません。この問題の解決策は、プロパティを使ってコントロールを設定し、プラットフォームに依存しないイベントを使用する、いっそう XAML で使いやすい API が定義されているラッパーで、ネイティブビューをサブクラス化することです。その後は、ラップされたネイティブビューを、共有アセットプロジェクト (SAP) に配置して条件付きコンパイルディレクティブで囲んだり、プラットフォーム固有のプロジェクトに配置して、.NET Standard ライブラリプロジェクトの XAML から参照したりできます。

次のコード例では、サブクラス化されたネイティブビューを使用する Xamarin.Forms ページを見ていきます。

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
        xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
        xmlns:ios="clr-namespace:UIKit;assembly=Xamarin.iOS;targetPlatform=iOS"
        xmlns:iosLocal="clr-namespace:SubclassedNativeControls.iOS;assembly=SubclassedNativeControls.iOS;targetPlatform=iOS"
        xmlns:android="clr-namespace:Android.Widget;assembly=Mono.Android;targetPlatform=Android"
        xmlns:androidLocal="clr-namespace:SimpleColorPicker.Droid;assembly=SimpleColorPicker.Droid;targetPlatform=Android"
        xmlns:androidLocal="clr-namespace:SubclassedNativeControls.Droid;assembly=SubclassedNativeControls.Droid;targetPlatform=Android"
        xmlns:winControls="clr-namespace:Windows.UI.Xaml.Controls;assembly=Windows, Version=255.255.255.255,
            Culture=neutral, PublicKeyToken=null, ContentType=WindowsRuntime;targetPlatform=Windows"
        xmlns:local="clr-namespace:SubclassedNativeControls"
        x:Class="SubclassedNativeControls.SubclassedNativeControlsPage">
    <StackLayout Margin="20">
        <Label Text="Subclassed Native Views Demo" FontAttributes="Bold" HorizontalOptions="Center" />
        <StackLayout Orientation="Horizontal">
          <Label Text="You have chosen:" />
          <Label Text="{Binding SelectedFruit}" />      
        </StackLayout>
        <iosLocal:MyUIPickerView ItemsSource="{Binding Fruits}"
            SelectedItem="{Binding SelectedFruit, Mode=TwoWay, UpdateSourceEventName=SelectedItemChanged}" />
        <androidLocal:MySpinner x:Arguments="{x:Static androidLocal:MainActivity.Instance}"
            ItemsSource="{Binding Fruits}"
            SelectedObject="{Binding SelectedFruit, Mode=TwoWay, UpdateSourceEventName=ItemSelected}" />
        <winControls:ComboBox ItemsSource="{Binding Fruits}"
            SelectedItem="{Binding SelectedFruit, Mode=TwoWay, UpdateSourceEventName=SelectionChanged}" />
    </StackLayout>
</ContentPage>

このページには、ユーザーがネイティブコントロールで選んだフルーツを表示する Label が含まれます。 Label は、SubclassedNativeControlsPageViewModel.SelectedFruit プロパティにバインドしています。ページの BindingContext は、分離コードファイルで SubclassedNativeControlsPageViewModel クラスの新しいインスタンスに設定されており、ViewModel クラスは INotifyPropertyChanged インターフェイスを実装しています。

このページには、各プラットフォームのネイティブピッカービューも含まれています。各ネイティブビューでは、SubclassedNativeControlsPageViewModel.Fruits コレクションにバインドされた ItemSource プロパティを使って、果物のコレクションを表示します。これにより、次のスクリーンショットで示すように、ユーザーは果物を選ぶことができます。

サブクラス化されたネイティブビュー

iOS と Android のネイティブピッカーは、メソッドを使ってコントロールを設定します。そのため、これらのピッカーは、XAML に対応するように、サブクラス化してプロパティを公開する必要があります。ユニバーサル Windows プラットフォーム (UWP) では、ComboBox は既に XAML に対応しているため、サブクラス化する必要はありません。

iOS

iOS の実装では、UIPickerView ビューがサブクラス化されて、XAML から簡単に使用できるプロパティとイベントが公開されます。

public class MyUIPickerView : UIPickerView
{
    public event EventHandler<EventArgs> SelectedItemChanged;

    public MyUIPickerView()
    {
        var model = new PickerModel();
        model.ItemChanged += (sender, e) =>
        {
            if (SelectedItemChanged != null)
            {
                SelectedItemChanged.Invoke(this, e);
            }
        };
        Model = model;
    }

    public IList<string> ItemsSource
    {
        get
        {
            var pickerModel = Model as PickerModel;
            return (pickerModel != null) ? pickerModel.Items : null;
        }
        set
        {
            var model = Model as PickerModel;
            if (model != null)
            {
                model.Items = value;
            }
        }
    }

    public string SelectedItem
    {
        get { return (Model as PickerModel).SelectedItem; }
        set { }
    }
}

MyUIPickerView クラスは、ItemsSource と SelectedItem プロパティ、および SelectedItemChanged イベントを公開します。 UIPickerView には基になる UIPickerViewModel データモデルが必要であり、それは MyUIPickerView のプロパティとイベントによってアクセスされます。 UIPickerViewModel データモデルは、PickerModel クラスによって提供されます。

class PickerModel : UIPickerViewModel
{
    int selectedIndex = 0;
    public event EventHandler<EventArgs> ItemChanged;
    public IList<string> Items { get; set; }

    public string SelectedItem
    {
        get
        {
            return Items != null && selectedIndex >= 0 && selectedIndex < Items.Count ? Items[selectedIndex] : null;
        }
    }

    public override nint GetRowsInComponent(UIPickerView pickerView, nint component)
    {
        return Items != null ? Items.Count : 0;
    }

    public override string GetTitle(UIPickerView pickerView, nint row, nint component)
    {
        return Items != null && Items.Count > row ? Items[(int)row] : null;
    }

    public override nint GetComponentCount(UIPickerView pickerView)
    {
        return 1;
    }

    public override void Selected(UIPickerView pickerView, nint row, nint component)
    {
        selectedIndex = (int)row;
        if (ItemChanged != null)
        {
            ItemChanged.Invoke(this, new EventArgs());
        }
    }
}

PickerModel クラスは、Items プロパティを介して、MyUIPickerView クラスに基になるストレージを提供します。 MyUIPickerView で選択項目が変化するたびに、Selected メソッドが実行され、それにより選ばれたインデックスが更新されて、ItemChanged イベントが生成されます。これにより、SelectedItem プロパティは常に、ユーザーが選んだ最後の項目を返します。さらに、PickerModel クラスは、MyUIPickerView インスタンスのセットアップに使われるメソッドをオーバーライドします。

Android

Android の実装では、Spinner ビューがサブクラス化されて、XAML から簡単に使用できるプロパティとイベントが公開されます。

class MySpinner : Spinner
{
    ArrayAdapter adapter;
    IList<string> items;

    public IList<string> ItemsSource
    {
        get { return items; }
        set
        {
            if (items != value)
            {
                items = value;
                adapter.Clear();

                foreach (string str in items)
                {
                    adapter.Add(str);
                }
            }
        }
    }

    public string SelectedObject
    {
        get { return (string)GetItemAtPosition(SelectedItemPosition); }
        set
        {
            if (items != null)
            {
                int index = items.IndexOf(value);
                if (index != -1)
                {
                    SetSelection(index);
                }
            }
        }
    }

    public MySpinner(Context context) : base(context)
    {
        ItemSelected += OnBindableSpinnerItemSelected;

        adapter = new ArrayAdapter(context, Android.Resource.Layout.SimpleSpinnerItem);
        adapter.SetDropDownViewResource(Android.Resource.Layout.SimpleSpinnerDropDownItem);
        Adapter = adapter;
    }

    void OnBindableSpinnerItemSelected(object sender, ItemSelectedEventArgs args)
    {
        SelectedObject = (string)GetItemAtPosition(args.Position);
    }
}

MySpinner クラスは、ItemsSource と SelectedObject プロパティ、および ItemSelected イベントを公開します。 MySpinner クラスによって表示される項目は、ビューに関連付けられた Adapter によって提供され、ItemsSource プロパティが最初に設定されたときに、項目が Adapter に設定されます。 MySpinner クラスで選択項目が変わるたびに、OnBindableSpinnerItemSelected イベントハンドラーによって SelectedObject プロパティが更新されます。

次の方法で共有

XAML のネイティブビュー

ネイティブビューを使用する

ネイティブバインド

ネイティブビューに引数を渡す

コードからネイティブビューを参照する

ネイティブビューをサブクラス化する

iOS

Android

その他のリソース

次の方法で共有

XAML のネイティブ ビュー

ネイティブ ビューを使用する

ネイティブ バインド

ネイティブ ビューに引数を渡す

コードからネイティブ ビューを参照する

ネイティブ ビューをサブクラス化する

iOS

Android

関連リンク

その他のリソース

XAML のネイティブビュー

ネイティブビューを使用する

ネイティブバインド

ネイティブビューに引数を渡す

コードからネイティブビューを参照する

ネイティブビューをサブクラス化する