Picker

.NET 다중 플랫폼 앱 UI(.NET MAUI) Picker 는 사용자가 항목을 선택할 수 있는 항목의 짧은 목록을 표시합니다.

Picker는 다음 속성을 정의합니다.

• CharacterSpacing형식 double의 < a0/a0>는 에 의해 표시되는 항목의 문자 사이의 간격입니다 Picker.
• FontAttributes 형식 FontAttributes의 기본값은 .입니다 FontAtributes.None.
• FontAutoScalingEnabled- 텍스트가 운영 체제에서 설정된 크기 조정 기본 설정을 준수하는지 여부를 결정하는 형식 bool입니다. 이 속성의 기본값은 true입니다.
• FontFamily 형식 string의 기본값은 .입니다 null.
• FontSize 형식 double의 기본값은 -1.0입니다.
• HorizontalTextAlignment형식 TextAlignment의 < a0/a0>은 .에 의해 Picker표시되는 텍스트의 가로 맞춤입니다.
• ItemsSource 형식 IList, 표시할 항목의 원본 목록이며 기본값은 .입니다 null.
• SelectedIndex 의 형식 int이며, 선택한 항목의 인덱스이며 기본값은 -1입니다.
• SelectedItem 의 형식 object이며, 선택한 항목은 기본적으로 .로 설정 null됩니다.
• ItemDisplayBinding형식 BindingBase의 복합 개체인 경우 ItemSource 항목 목록의 각 개체에 대해 표시할 속성을 선택합니다. 자세한 내용은 데이터 바인딩을 사용하여 선택기를 데이터로 채우기를 참조하세요.
• TextColor 형식 Color, 텍스트를 표시하는 데 사용되는 색입니다.
• TextTransform텍스트의 대/소문자를 변환할지 여부를 정의하는 형식 TextTransform의 입니다.
• Title 형식 string의 기본값은 .입니다 null.
• TitleColor 형식 Color, 텍스트를 표시하는 데 사용되는 색입니다 Title .
• VerticalTextAlignment형식 TextAlignment의 < a0/>은 .에 의해 Picker표시되는 텍스트의 세로 맞춤입니다.

예외를 제외하고 ItemDisplayBinding모든 속성은 개체에 의해 BindableProperty 지원됩니다. 즉, 스타일을 지정할 수 있으며 속성은 데이터 바인딩의 대상이 될 수 있습니다. 및 SelectedItem 속성에는 SelectedIndex 기본 바인딩 모드BindingMode.TwoWay가 있습니다. 즉, MVVM(Model-View-ViewModel) 패턴을 사용하는 애플리케이션에서 데이터 바인딩의 대상이 될 수 있습니다. 글꼴 속성 설정에 대한 자세한 내용은 글꼴을 참조 하세요.

A Picker 는 처음 표시될 때 데이터를 표시하지 않습니다. 대신 다음 iOS 스크린샷과 같이 해당 Title 속성의 값이 자리 표시자로 표시됩니다.

포커스가 Picker 오면 해당 데이터가 표시되고 사용자가 항목을 선택할 수 있습니다.

Picker 사용자가 항목을 선택하면 이벤트가 발생 SelectedIndexChanged 합니다. 선택한 항목은 다음과 같이 표시됩니다 Picker.

데이터로 채우는 Picker 두 가지 기술이 있습니다.

• 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>

참고 항목

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 한 번에 하나의 항목을 선택할 수 있습니다. 사용자가 항목을 SelectedIndexChanged 선택하면 이벤트가 발생하며, SelectedIndex 속성은 목록에서 선택한 항목의 인덱스를 나타내는 정수로 업데이트되고 SelectedItem 속성은 선택한 항목을 나타내는 값으로 object 업데이트됩니다. 속성은 SelectedIndex 사용자가 선택한 항목을 나타내는 0부터 시작하는 숫자입니다. 항목을 선택하지 않은 경우(처음 만들어지고 초기화된 SelectedIndex 경우Picker)는 -1이 됩니다.

참고 항목

플랫폼별 iOS에서 Picker 항목 선택 동작을 사용자 지정할 수 있습니다. 자세한 내용은 iOS에서 선택 항목 선택을 참조하세요.

다음 XAML 예제에서는 다음에서 Picker속성 값을 검색 SelectedItem 하는 방법을 보여줍니다.

<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 캐스팅해야 합니다.

참고 항목

또는 속성을 설정하여 특정 항목을 표시하도록 A Picker 를 초기화할 SelectedIndexSelectedItem 수 있습니다. 그러나 컬렉션을 초기화 ItemsSource 한 후에는 이러한 속성을 설정해야 합니다.

데이터 바인딩을 사용하여 선택기를 데이터로 채우기

또한 데이터 Picker 바인딩을 사용하여 해당 ItemsSource 속성을 컬렉션에 바인딩하여 데이터로 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> 바인딩됩니다. 다음 코드 예제에서는 네 가지 속성을 포함하는 클래스를 보여 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 속성 데이터는 바인딩 컨텍스트의 속성(형식Monkey)에 바인딩 SelectedMonkey 됩니다. 따라서 사용자가 항목을 Picker선택하면 속성이 SelectedMonkey 선택한 Monkey 개체로 설정됩니다. SelectedMonkey 개체 데이터는 사용자 인터페이스 및 Image 뷰에 의해 Label 표시됩니다.

참고 항목

및 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 한 번에 하나의 항목을 선택할 수 있습니다. 사용자가 항목을 SelectedIndexChanged 선택하면 이벤트가 발생하며 SelectedIndex 속성이 목록에서 선택한 항목의 인덱스를 나타내는 정수로 업데이트됩니다. 속성은 SelectedIndex 사용자가 선택한 항목을 나타내는 0부터 시작하는 숫자입니다. 항목을 선택하지 않은 경우(처음 만들어지고 초기화된 SelectedIndex 경우Picker)는 -1이 됩니다.

참고 항목

플랫폼별 iOS에서 Picker 항목 선택 동작을 사용자 지정할 수 있습니다. 자세한 내용은 iOS에서 선택 항목 선택을 참조하세요.

다음 코드 예제에서는 이벤트가 발생할 때 실행되는 이벤트 처리기 메서드를 SelectedIndexChanged 보여 OnPickerSelectedIndexChanged 줍니다.

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이므로 캐스트 없이도 Label 표시할 수 있습니다.

참고 항목

속성을 설정하여 특정 항목을 표시하도록 A Picker 를 초기화할 SelectedIndex 수 있습니다. 그러나 컬렉션을 초기화 Items 한 SelectedIndex 후 속성을 설정해야 합니다.