[FOROS] Mostrar y Obtener varios valores en un ComboBox / ListBox

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