Picker
.NET マルチプラットフォーム アプリ UI (.NET MAUI) Picker には、ユーザーが項目を選択できる項目の短い一覧が表示されます。
Picker は次の特性を定義します。
CharacterSpacingの型doubleを指定します。これは、〘〘で表示される項目の文字間の間隔です Picker。FontAttributesの型FontAttributes。既定値は ですFontAtributes.None。FontAutoScalingEnabledは、オペレーティング システムで設定されたスケーリング設定をテキストが優先するかどうかを決定する型boolです。 このプロパティの既定値はtrueです。FontFamilyの型string。既定値は ですnull。FontSizeの型double。既定値は -1.0 です。HorizontalTextAlignment型のTextAlignment、 によって表示される Pickerテキストの水平方向の配置です。ItemsSource型IListの場合、表示する項目のソース リスト (既定値nullは .SelectedIndexの型int、選択した項目のインデックス。既定値は -1 です。SelectedItemの種類object、選択した項目。既定値は 〗 ですnull。TextColorの種類 Color、テキストの表示に使用される色。TextTransformは、テキストの大文字と小文字を変換するかどうかを定義する型TextTransformです。Titleの型string。既定値は ですnull。TitleColorの種類 Color、テキストの表示に使用されるTitle色。VerticalTextAlignment型のTextAlignment、 によって表示される Pickerテキストの垂直方向の配置です。
すべてのプロパティはオブジェクトによって BindableProperty サポートされます。つまり、オブジェクトはスタイルを設定でき、プロパティはデータ バインディングのターゲットにすることができます。 SelectedIndexプロパティにはSelectedItem既定のBindingMode.TwoWayバインド モードがあります。つまり、Model-View-ViewModel (MVVM) パターンを使用するアプリケーションのデータ バインディングのターゲットにすることができます。 フォントプロパティの設定については、「フォント」を参照してください。
A Picker は、最初に表示されるときにデータを表示しません。 代わりに、次の iOS スクリーンショットに示すように、プロパティ Title の値がプレースホルダーとして表示されます。
ゲイン フォーカスが Picker 設定されると、そのデータが表示され、ユーザーは項目を選択できます。
ユーザーが Picker 項目を SelectedIndexChanged 選択すると、イベントが発生します。 次の項目を選択すると、選択した項目が次のように Picker表示されます。
データを設定 Picker する方法は 2 つあります。
- 表示する
ItemsSourceデータにプロパティを設定します。 これは、データを追加するための推奨される手法です Picker。 詳細については、「ItemsSource プロパティの設定」を参照してください。 - コレクションに表示するデータを
Items追加します。 詳細については、「Items コレクションにデータを追加する」を参照してください。
ItemsSource プロパティを設定する
A Picker には、その ItemsSource プロパティをコレクションに設定することで、データを IList 設定できます。 コレクション内の各項目は、型 objectである必要があります。または、型から派生する必要があります。 項目の配列からプロパティを ItemsSource 初期化することで、XAML で項目を追加できます。
<Picker x:Name="picker"
Title="Select a monkey">
<Picker.ItemsSource>
<x:Array Type="{x:Type x:String}">
<x:String>Baboon</x:String>
<x:String>Capuchin Monkey</x:String>
<x:String>Blue Monkey</x:String>
<x:String>Squirrel Monkey</x:String>
<x:String>Golden Lion Tamarin</x:String>
<x:String>Howler Monkey</x:String>
<x:String>Japanese Macaque</x:String>
</x:Array>
</Picker.ItemsSource>
</Picker>
Note
要素には x:Array 、配列内の Type 項目の型を示す属性が必要です。
同等の C# コードを次に示します。
var monkeyList = new List<string>();
monkeyList.Add("Baboon");
monkeyList.Add("Capuchin Monkey");
monkeyList.Add("Blue Monkey");
monkeyList.Add("Squirrel Monkey");
monkeyList.Add("Golden Lion Tamarin");
monkeyList.Add("Howler Monkey");
monkeyList.Add("Japanese Macaque");
Picker picker = new Picker { Title = "Select a monkey" };
picker.ItemsSource = monkeyList;
項目の選択に応答する
A は Picker 、一度に 1 つの項目の選択をサポートします。 ユーザーが項目を選択すると、イベントが SelectedIndexChanged 発生し、 SelectedIndex リスト内の選択した項目のインデックスを表す整数にプロパティが更新され SelectedItem 、プロパティは選択した項目を表す項目に object 更新されます。 SelectedIndexこのプロパティは、ユーザーが選択した項目を示す 0 から始まる番号です。 項目が選択されていない場合 (最初に Picker 作成および初期化されたときの場合)、 SelectedIndex -1 になります。
次の XAML の例は、次からプロパティ値を取得する SelectedItem 方法を Picker示しています。
<Label Text="{Binding Source={x:Reference picker}, Path=SelectedItem}" />
同等の C# コードを次に示します。
Label monkeyNameLabel = new Label();
monkeyNameLabel.SetBinding(Label.TextProperty, new Binding("SelectedItem", source: picker));
さらに、イベントが発生したときにイベント ハンドラーを SelectedIndexChanged 実行できます。
void OnPickerSelectedIndexChanged(object sender, EventArgs e)
{
var picker = (Picker)sender;
int selectedIndex = picker.SelectedIndex;
if (selectedIndex != -1)
{
monkeyNameLabel.Text = (string)picker.ItemsSource[selectedIndex];
}
}
この例では、イベント ハンドラーはプロパティ値を SelectedIndex 取得し、その値を使用してコレクションから選択した項目を ItemsSource 取得します。 これは、プロパティから選択した項目を取得することと機能的に SelectedItem 同等です。 コレクション内の ItemsSource 各項目は型 objectであるため、表示用にキャスト string する必要があります。
Note
A Picker は、プロパティSelectedItemを設定することで、特定の項目をSelectedIndex表示するように初期化できます。 ただし、これらのプロパティは、コレクションの初期化後に設定する ItemsSource 必要があります。
データ バインディングを使用してピッカーにデータを設定する
データ バインディングを使用してプロパティをコレクションにバインドItemsSourceすることで、A Picker にデータをIList設定することもできます。 XAML では、これはマークアップ拡張機能を使用して Binding 実現されます。
<Picker Title="Select a monkey"
ItemsSource="{Binding Monkeys}"
ItemDisplayBinding="{Binding Name}" />
これに相当する C# コードを次に示します。
Picker picker = new Picker { Title = "Select a monkey" };
picker.SetBinding(Picker.ItemsSourceProperty, "Monkeys");
picker.ItemDisplayBinding = new Binding("Name");
この例では、プロパティ データが ItemsSource バインディング コンテキストのプロパティに Monkeys バインドされ、コレクションが IList<Monkey> 返されます。 次のコード例は、4 つのプロパティを Monkey 含むクラスを示しています。
public class Monkey
{
public string Name { get; set; }
public string Location { get; set; }
public string Details { get; set; }
public string ImageUrl { get; set; }
}
オブジェクトのリストにバインドする場合は、 Picker 各オブジェクトから表示するプロパティを指定する必要があります。 これは、各オブジェクトの ItemDisplayBinding 必須プロパティにプロパティを設定することで実現されます。 上記のコード例では、 Picker 各 Monkey.Name プロパティ値を表示するように設定されています。
項目の選択に応答する
データ バインディングを使用して、オブジェクトが変更されたときにプロパティ値を SelectedItem 設定できます。
<Picker Title="Select a monkey"
ItemsSource="{Binding Monkeys}"
ItemDisplayBinding="{Binding Name}"
SelectedItem="{Binding SelectedMonkey}" />
<Label Text="{Binding SelectedMonkey.Name}" ... />
<Label Text="{Binding SelectedMonkey.Location}" ... />
<Image Source="{Binding SelectedMonkey.ImageUrl}" ... />
<Label Text="{Binding SelectedMonkey.Details}" ... />
同等の C# コードを次に示します。
Picker picker = new Picker { Title = "Select a monkey" };
picker.SetBinding(Picker.ItemsSourceProperty, "Monkeys");
picker.SetBinding(Picker.SelectedItemProperty, "SelectedMonkey");
picker.ItemDisplayBinding = new Binding("Name");
Label nameLabel = new Label { ... };
nameLabel.SetBinding(Label.TextProperty, "SelectedMonkey.Name");
Label locationLabel = new Label { ... };
locationLabel.SetBinding(Label.TextProperty, "SelectedMonkey.Location");
Image image = new Image { ... };
image.SetBinding(Image.SourceProperty, "SelectedMonkey.ImageUrl");
Label detailsLabel = new Label();
detailsLabel.SetBinding(Label.TextProperty, "SelectedMonkey.Details");
プロパティ データは SelectedItem 、バインディング コンテキストのプロパティ ( SelectedMonkey 型 Monkey) にバインドされます。 したがって、ユーザーがアイテム Pickerを選択すると、 SelectedMonkey プロパティは選択した Monkey オブジェクトに設定されます。 SelectedMonkeyオブジェクト データは、ユーザー インターフェイスでビューによってLabelImage表示されます。
Note
プロパティとSelectedIndexプロパティはSelectedItem両方とも、既定で双方向バインディングをサポートします。
Items コレクションにデータを追加する
データを設定する Picker 別のプロセスとして、表示するデータを読み取り専用 Items コレクション (型) に追加します IList<string>。 コレクション内の各項目は型 stringである必要があります。 項目の一覧x:Stringを使用してプロパティをItems初期化することで、XAML で項目を追加できます。
<Picker Title="Select a monkey">
<Picker.Items>
<x:String>Baboon</x:String>
<x:String>Capuchin Monkey</x:String>
<x:String>Blue Monkey</x:String>
<x:String>Squirrel Monkey</x:String>
<x:String>Golden Lion Tamarin</x:String>
<x:String>Howler Monkey</x:String>
<x:String>Japanese Macaque</x:String>
</Picker.Items>
</Picker>
同等の C# コードを次に示します。
Picker picker = new Picker { Title = "Select a monkey" };
picker.Items.Add("Baboon");
picker.Items.Add("Capuchin Monkey");
picker.Items.Add("Blue Monkey");
picker.Items.Add("Squirrel Monkey");
picker.Items.Add("Golden Lion Tamarin");
picker.Items.Add("Howler Monkey");
picker.Items.Add("Japanese Macaque");
メソッドを使用してデータを Items.Add 追加するだけでなく、メソッドを使用 Items.Insert してデータをコレクションに挿入することもできます。
項目の選択に応答する
A は Picker 、一度に 1 つの項目の選択をサポートします。 ユーザーが項目を選択すると、イベントが SelectedIndexChanged 発生し SelectedIndex 、プロパティはリスト内の選択した項目のインデックスを表す整数に更新されます。 SelectedIndexこのプロパティは、ユーザーが選択した項目を示す 0 から始まる番号です。 項目が選択されていない場合 (最初に Picker 作成および初期化されたときの場合)、 SelectedIndex -1 になります。
次のコード例は、イベントが OnPickerSelectedIndexChanged 発生したときに実行されるイベント ハンドラー メソッドを SelectedIndexChanged 示しています。
void OnPickerSelectedIndexChanged(object sender, EventArgs e)
{
var picker = (Picker)sender;
int selectedIndex = picker.SelectedIndex;
if (selectedIndex != -1)
{
monkeyNameLabel.Text = picker.Items[selectedIndex];
}
}
このメソッドはプロパティ値を SelectedIndex 取得し、その値を使用してコレクションから選択した項目を Items 取得します。 コレクション内の Items 各項目は a stringであるため、キャストを必要とせずに a Label で表示できます。
Note
プロパティを設定することで、特定の項目を表示するように A Picker を SelectedIndex 初期化できます。 ただし、コレクションの初期化後に SelectedIndex プロパティを設定する Items 必要があります。
.NET MAUI feedback
フィードバック
フィードバックの送信と表示