선택기의 ItemsSource 속성 설정Setting a Picker's ItemsSource Property

샘플 다운로드 샘플 다운로드Download Sample Download the sample

선택기 뷰는 데이터의 목록에서 텍스트 항목을 선택 하는 컨트롤입니다. 이 문서는 ItemsSource 속성을 설정 하 여 데이터를 사용 하 여 선택기를 채우는 방법 및 사용자가 항목 선택에 응답 하는 방법을 설명 합니다.The Picker view is a control for selecting a text item from a list of data. This article explains how to populate a Picker with data by setting the ItemsSource property, and how to respond to item selection by the user.

Xamarin.Forms 2.3.4 향상 되었습니다 합니다 Picker 뷰를 설정 하 여 데이터를 입력 하는 기능을 추가 하 여 해당 ItemsSource 속성 합니다 에서선택한항목을검색하고 SelectedItem 속성입니다.Xamarin.Forms 2.3.4 has enhanced the Picker view by adding the ability to populate it with data by setting its ItemsSource property, and to retrieve the selected item from the SelectedItem property. 선택한 항목에 대 한 텍스트의 색을 설정 하 여 변경할 수 있습니다 또한 합니다 TextColor 속성을를 Color 합니다.In addition, the color of the text for the selected item can be changed by setting the TextColor property to a Color.

데이터를 사용 하 여 선택기 채우기Populating a Picker with data

A Picker 설정 하 여 데이터로 채울 수 있습니다 해당 ItemsSource 속성을는 IList 컬렉션입니다.A Picker can be populated with data by setting its ItemsSource property to an IList collection. 컬렉션의 각 항목의 수 또는 형식에서 파생 해야 object합니다.Each item in the collection must be of, or derived from, type object. 초기화 하 여 XAML에서 항목을 추가할 수는 ItemsSource 속성 항목의 배열:Items can be added in XAML by initializing the ItemsSource property from an array of items:

<Picker x:Name="picker"
        Title="Select a monkey"
        TitleColor="Red">
  <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>

참고

합니다 x:Array 요소에는 Type 배열에 있는 항목의 유형을 나타내는 특성입니다.Note that the x:Array element requires a Type attribute indicating the type of the items in the array.

해당 하는 C# 코드는 다음과 같습니다.The equivalent C# code is shown below:

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");

var picker = new Picker { Title = "Select a monkey", TitleColor = Color.Red };
picker.ItemsSource = monkeyList;

항목 선택에 응답Responding to item selection

A Picker 한 번에 하나씩 선택할 수 있습니다.A Picker supports selection of one item at a time. 사용자가 항목을 선택 합니다 SelectedIndexChanged 이벤트가 발생 합니다 SelectedIndex 속성은 목록에서 선택한 항목의 인덱스를 나타내는 정수를 업데이트 및 SelectedItem 속성은 업데이트 된 object 은 선택한 항목을 나타내는입니다.When a user selects an item, the SelectedIndexChanged event fires, the SelectedIndex property is updated to an integer representing the index of the selected item in the list, and the SelectedItem property is updated to the object representing the selected item. 합니다 SelectedIndex 속성은 사용자가 선택한 항목을 나타내는 0부터 시작 수 있습니다.The SelectedIndex property is a zero-based number indicating the item the user selected. 선택 된 항목이 있는 경우 때 합니다 Picker 먼저 생성 되 고 초기화 하 고, SelectedIndex -1이 됩니다.If no item is selected, which is the case when the Picker is first created and initialized, SelectedIndex will be -1.

참고

항목의 선택 동작을 Picker 플랫폼 전용을 사용 하 여 iOS에서 사용자 지정할 수 있습니다.Item selection behavior in a Picker can be customized on iOS with a platform-specific. 자세한 내용은 선택 항목 선택 제어입니다.For more information, see Controlling Picker Item Selection.

다음 코드 예제에서는 검색 하는 방법을 보여 줍니다.는 SelectedItem 에서 속성 값을 Picker XAML에서:The following code example shows how to retrieve the SelectedItem property value from the Picker in XAML:

<Label Text="{Binding Source={x:Reference picker}, Path=SelectedItem}" />

해당 하는 C# 코드는 다음과 같습니다.The equivalent C# code is shown below:

var monkeyNameLabel = new Label();
monkeyNameLabel.SetBinding(Label.TextProperty, new Binding("SelectedItem", source: picker));

이벤트 처리기 수 또한 될 때 실행 되는 SelectedIndexChanged 이벤트가 발생 합니다.In addition, an event handler can be executed when the SelectedIndexChanged event fires:

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 컬렉션입니다.This method obtains the SelectedIndex property value, and uses the value to retrieve the selected item from the ItemsSource collection. 이 기능적으로 선택한 항목을 검색 하는 SelectedItem 속성입니다.This is functionally equivalent to retrieving the selected item from the SelectedItem property. 각 항목에는 ItemsSource 유형의 컬렉션 이므로 object, 이므로 캐스팅 되어야 합니다는 string 표시에 대 한 합니다.Note that each item in the ItemsSource collection is of type object, and so must be cast to a string for display.

참고

A Picker 설정 하 여 특정 항목을 표시 하도록 초기화 합니다 SelectedIndex 또는 SelectedItem 속성입니다.A Picker can be initialized to display a specific item by setting the SelectedIndex or SelectedItem properties. 그러나 초기화 한 후 이러한 속성 설정 해야 합니다 ItemsSource 컬렉션입니다.However, these properties must be set after initializing the ItemsSource collection.

데이터 바인딩을 사용 하 여 선택기를 데이터로 채우기Populating a Picker with data using data binding

A Picker 채울 수 있습니다도 데이터 바인딩할 데이터 바인딩을 사용 하 여 해당 ItemsSource 속성을는 IList 컬렉션입니다.A Picker can be also populated with data by using data binding to bind its ItemsSource property to an IList collection. XAML에서이 통해 합니다 Binding 태그 확장:In XAML this is achieved with the Binding markup extension:

<Picker Title="Select a monkey"
        TitleColor="Red"
        ItemsSource="{Binding Monkeys}"
        ItemDisplayBinding="{Binding Name}" />

해당 하는 C# 코드는 다음과 같습니다.The equivalent C# code is shown below:

var picker = new Picker { Title = "Select a monkey", TitleColor = Color.Red };
picker.SetBinding(Picker.ItemsSourceProperty, "Monkeys");
picker.ItemDisplayBinding = new Binding("Name");

ItemsSource 속성 데이터를 바인딩하는 Monkeys 반환 하는 연결 된 뷰 모델의 속성을 IList<Monkey> 컬렉션.The ItemsSource property data binds to the Monkeys property of the connected view model, which returns an IList<Monkey> collection. 다음 코드 예제는 Monkey 네 가지 속성을 포함 하는 클래스:The following code example shows the Monkey class, which contains four properties:

public class Monkey
{
  public string Name { get; set; }
  public string Location { get; set; }
  public string Details { get; set; }
  public string ImageUrl { get; set; }
}

개체의 목록에 바인딩할 때 합니다 Picker 각 개체에서 표시할 속성을 알 수 있어야 합니다.When binding to a list of objects, the Picker must be told which property to display from each object. 설정 하 여 이렇게 합니다 ItemDisplayBinding 필요한 속성에 각 개체의 속성입니다.This is achieved by setting the ItemDisplayBinding property to the required property from each object. 위의 코드 예제에는 Picker 각 표시 하도록 설정 된 Monkey.Name 속성 값입니다.In the code examples above, the Picker is set to display each Monkey.Name property value.

항목 선택에 응답Responding to item selection

데이터 바인딩 개체를 설정 하려면 사용할 수는 SelectedItem 속성 값 변경 시:Data binding can be used to set an object to the SelectedItem property value when it changes:

<Picker Title="Select a monkey"
        TitleColor="Red"
        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# 코드는 다음과 같습니다.The equivalent C# code is shown below:

var picker = new Picker { Title = "Select a monkey", TitleColor = Color.Red };
picker.SetBinding(Picker.ItemsSourceProperty, "Monkeys");
picker.SetBinding(Picker.SelectedItemProperty, "SelectedMonkey");
picker.ItemDisplayBinding = new Binding("Name");

var nameLabel = new Label { ... };
nameLabel.SetBinding(Label.TextProperty, "SelectedMonkey.Name");

var locationLabel = new Label { ... };
locationLabel.SetBinding(Label.TextProperty, "SelectedMonkey.Location");

var image = new Image { ... };
image.SetBinding(Image.SourceProperty, "SelectedMonkey.ImageUrl");

var detailsLabel = new Label();
detailsLabel.SetBinding(Label.TextProperty, "SelectedMonkey.Details");

합니다 SelectedItem 속성 데이터를 바인딩하는 SelectedMonkey 형식인 연결 된 뷰 모델의 속성 Monkey합니다.The SelectedItem property data binds to the SelectedMonkey property of the connected view model, which is of type Monkey. 사용자 항목에서를 선택 하는 경우에 따라서 합니다 Picker SelectedMonkey 속성이 설정 됩니다 하 여 선택한 Monkey 개체입니다.Therefore, when the user selects an item in the Picker, the SelectedMonkey property will be set to the selected Monkey object. 합니다 SelectedMonkey 개체 데이터에서 사용자 인터페이스에 표시 됩니다 Label 하 고 Image 뷰:The SelectedMonkey object data is displayed in the user interface by Label and Image views:

참고

SelectedItem 하 고 SelectedIndex 속성 둘 다 기본적으로 양방향 바인딩을 지원 합니다.Note that the SelectedItem and SelectedIndex properties both support two-way bindings by default.