Hola a todos!
Este post es una especie de “autoresumen” sobre como Mostrar varios valores al mismo tiempo en un item de un combobox (o cualquier otro control de listas) y poder obtenerlos en los eventos selectionchanged, he visto que hay gente en los foros de MSDN no sabe muy bien como usar las datatemplates y los databinding para hacer esto de forma sencilla.
Vamos a partir de una aplicación WPF con un combo, le añadimos una nueva clase que se llame ComboItem y que contenga tres propiedades públicas: Id, Nombre y Apellido:
public class ComboItem { public ComboItem() { } public int Id { get; set; } public string Nombre { get; set; } public string Apellidos { get; set; } }
Ahora, en la clase window donde tenemos nuestro combo, vamos a crear una lista de la clase ComboItem y rellenar algunos datos para poder verlos en el combo:
public partial class MainWindow : Window { //Lista que actuará como itemssource de nuestro combo. List<ComboItem> datos = new List<ComboItem>(); public MainWindow() { InitializeComponent(); //Datos de prueba. datos.Add(new ComboItem() { Id = 1, Nombre = "Pepito", Apellidos = "Grillo" }); datos.Add(new ComboItem() { Id = 2, Nombre = "Juan", Apellidos = "Cosa" }); datos.Add(new ComboItem() { Id = 3, Nombre = "Yeray", Apellidos = "Julián" }); //Establecemos el itemssource del combo a nuestra lista. comboBox1.ItemsSource = datos; } }
Si ejecutamos ahora, veremos que efectivamente tenemos 3 items en el combo, pero nos muestra el tipo de objeto, no los datos. Esto es así por que todavía nos queda por indicarle a WPF la forma en la que queremos que los muestre, aquí entran en juego las DataTemplates, vamos a hacer una DataTemplate que nos muestre nombre y apellidos, en xaml, dentro del TAG del ComboBox vamos a crear un ItemTemplate y dentro de este un DataTemplate:
<ComboBox Height="23" HorizontalAlignment="Left" Margin="212,116,0,0" Name="comboBox1" VerticalAlignment="Top" Width="120"> <ComboBox.ItemTemplate> <DataTemplate> <StackPanel Orientation="Horizontal"> <TextBlock Text="Nombre: "></TextBlock> <TextBlock Text="{Binding Path=Nombre}" Width="80"></TextBlock> <TextBlock Text="Apellidos: "></TextBlock> <TextBlock Text="{Binding Path=Apellidos}" Width="80"></TextBlock> </StackPanel> </DataTemplate> </ComboBox.ItemTemplate> </ComboBox>
Como podéis ver, un DataTemplate simplemente indica a WPF como componer la apariencia de un item y dentro de los textblock estamos enlazando el texto a la propiedad de nuestra clase que queremos que muestre.
Si ejecutamos de nuevo, veremos que ya salen correctamente los datos, y ahora… ¿Que pasa cuando queremos recuperar el item seleccionado? Pues como la DataTemplate solo es visual, realmente en el Selectionchanged vamos a obtener una referencia a un Item de la clase ComboItem que creamos con todos sus valores, es la gran ventaja de este sistema, aunque solo muestro Nombre y Apellidos, como en mi clase tengo un ID, al recuperar el item seleccionado puedo acceder a ese ID:
private void comboBox1_SelectionChanged(object sender, SelectionChangedEventArgs e) { ComboItem elemento = (ComboItem)e.AddedItems[0]; MessageBox.Show("Has seleccionado el Item ID:" + elemento.Id.ToString()); }
De esta forma si ejecutamos, y seleccionamos un item, obtendremos un messagebox con el Id de ese Item.
Espero que os haya sido de utilidad este mini artículo sobre databinding y datatemplates, os dejo el código del ejemplo para que juguéis con el…
Un saludo y Happy Coding