Configuración de la propiedad ItemsSource de un selector
La vista Selector es un control para seleccionar un elemento de texto de una lista de datos. En este artículo se explica cómo rellenar un Selector con datos estableciendo la propiedad ItemsSource y cómo responder a la selección de elementos por parte del usuario.
Xamarin.Forms 2.3.4 ha mejorado la vista Picker agregando la capacidad de rellenarla con datos estableciendo su propiedad ItemsSource y para recuperar el elemento seleccionado de la propiedad SelectedItem. Además, el color del texto del elemento seleccionado se puede cambiar estableciendo la propiedad TextColor en Color.
Rellenando de un selector con datos
Picker se puede rellenar con datos estableciendo su propiedad ItemsSource en una colección IList. Cada elemento de la colección debe ser de object o derivado de este tipo. Se agregan elementos en XAML mediante la inicialización de la propiedad ItemsSource a partir de una matriz de elementos.
<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>
Nota:
Tenga en cuenta que el elemento x:Array requiere un atributo Type que indica el tipo de los elementos de la matriz.
El código de C# equivalente se muestra a continuación:
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;
Respondiendo a la selección de elementos
Picker admite la selección de un elemento a la vez. Cuando un usuario selecciona un elemento, el evento SelectedIndexChanged se desencadena, la propiedad SelectedIndex se actualiza a un entero que representa el índice del elemento seleccionado en la lista, y la propiedad SelectedItem se actualiza al elemento object que representa el elemento seleccionado. La propiedad SelectedIndex es un número de base cero que indica el elemento seleccionado por el usuario. Si no se selecciona ningún elemento, que es el caso cuando Picker se crea e inicializa por primera vez, SelectedIndex será -1.
Nota:
El comportamiento de selección de elementos en Picker se puede personalizar en iOS con un elementos específico de la plataforma. Para más información, consulte Control de la selección de elementos del selector.
En el ejemplo de código siguiente se muestra cómo recuperar el valor de propiedad SelectedItem de Picker en XAML:
<Label Text="{Binding Source={x:Reference picker}, Path=SelectedItem}" />
El código de C# equivalente se muestra a continuación:
var monkeyNameLabel = new Label();
monkeyNameLabel.SetBinding(Label.TextProperty, new Binding("SelectedItem", source: picker));
Además, se puede ejecutar un controlador de eventos cuando se desencadena el evento SelectedIndexChanged:
void OnPickerSelectedIndexChanged(object sender, EventArgs e)
{
var picker = (Picker)sender;
int selectedIndex = picker.SelectedIndex;
if (selectedIndex != -1)
{
monkeyNameLabel.Text = (string)picker.ItemsSource[selectedIndex];
}
}
Este método obtiene el valor de propiedad SelectedIndex y usa el valor para recuperar el elemento seleccionado de la colección ItemsSource. Esto es funcionalmente equivalente a recuperar el elemento seleccionado de la propiedad SelectedItem. Tenga en cuenta que todos los elementos de la colección ItemsSource son de tipo object y, por tanto, debe convertirse en string para mostrarlos.
Nota:
Picker se puede inicializar para mostrar un elemento específico estableciendo las propiedades SelectedIndex o SelectedItem. Sin embargo, estas propiedades deben establecerse después de inicializar la colección ItemsSource.
Rellenar un selector con datos mediante un enlace de datos
También Picker se puede rellenar con datos mediante el enlace de datos para vincular su propiedad ItemsSource a una colección IList. En XAML, esto se consigue mediante la extensión de marcado Binding:
<Picker Title="Select a monkey"
TitleColor="Red"
ItemsSource="{Binding Monkeys}"
ItemDisplayBinding="{Binding Name}" />
El código de C# equivalente se muestra a continuación:
var picker = new Picker { Title = "Select a monkey", TitleColor = Color.Red };
picker.SetBinding(Picker.ItemsSourceProperty, "Monkeys");
picker.ItemDisplayBinding = new Binding("Name");
Los datos de la propiedad ItemsSource se enlazan a la propiedad Monkeys del modelo de vista conectado, que devuelve una colección IList<Monkey>. En el ejemplo de código siguiente se muestra la clase Monkey, que contiene cuatro propiedades:
public class Monkey
{
public string Name { get; set; }
public string Location { get; set; }
public string Details { get; set; }
public string ImageUrl { get; set; }
}
Al enlazar a una lista de objetos, se debe indicar a Picker qué propiedad se va a mostrar de cada objeto. Esto se logra estableciendo la propiedad ItemDisplayBinding en la propiedad necesaria de cada objeto. En los ejemplos de código anteriores, Picker se establece para mostrar cada valor de propiedad Monkey.Name.
Respondiendo a la selección de elementos
El enlace de datos se puede usar para establecer un objeto en el valor de propiedad SelectedItem cuando cambia:
<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}" ... />
El código de C# equivalente se muestra a continuación:
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");
Los datos de propiedad SelectedItem se enlazan a la propiedad SelectedMonkey del modelo de vista conectado, que es de tipo Monkey. Por lo tanto, cuando el usuario selecciona un elemento en Picker, la propiedad SelectedMonkey se establecerá en el objeto Monkey seleccionado. Los datos del objeto SelectedMonkey se muestran en la interfaz de usuario mediante las vistas Label y Image:
Nota:
Tenga en cuenta que las propiedades SelectedItem y SelectedIndex admiten enlaces bidireccionales de forma predeterminada.