Home / Questions / 2519
Accepted
Edwin V
Asked: 2020-01-14 16:39:41 +0800 CST 2020-01-14 16:39:41 +0800 CST

Bind the Value of a ComboBox

  • 772

My problem is that I'm trying to bind between a ComboBoxproperty type and a stringviewModel, but I can't do it

<ComboBox HorizontalAlignment="Stretch"
          SelectedItem="{Binding Path=OResultado, Mode=TwoWay}">
    <ComboBoxItem Content="Anomalia"/>
    <ComboBoxItem Content="Retiro"/>
    <ComboBoxItem Content="Retiro con Anomalia"/>
    <ComboBoxItem Content="Conforme"/>
</ComboBox>

I tried with SelectedItemand SelectedValue, SelectedIndexbut it returns only the index of the ComboBoxItemselected one. I tried to do a Converterbut I couldn't get it to return the expected result.

What I want to do is that when the user selects an item from ComboBox the item's value Contentis assigned to the type property string OResultadoof my viewModel.

c#

1 Answers

  1. Best Answer

    In this case there are several ways to do it, but the easiest way is to populate the ComboBox dynamically instead of with static values.

    This is achieved by creating the list of options in the ViewModeland doing Bindingwith the ItemsSourcedel ComboBox.

    view model

    you can get BindableBase here: Apps, Binding, INotifyPropertyChanged and BindableBase | XAML | C# , I have set the value of OResultado= "Conforme".

    Additionally, I have performed the trick of lazy initialization with the call to the properties to be able to create the instance of viewmodelfrom thexaml

    using App3.Util;
using System.Collections.ObjectModel;

namespace App3.ViewModels
{
    public class MainAppVM : BindableBase
    {
        private bool _initialized = false;
        private object _lockject = new object();

        public ObservableCollection<string> _listaOpciones;
        public ObservableCollection<string> ListaOpciones
        {
            get
            {   Initialize();
                return _listaOpciones;}
            set { SetProperty(ref _listaOpciones, value); }
        }

        private string _oResultado;
        public string OResultado
        {
            get
            {   Initialize();
                return _oResultado; }
            set { SetProperty(ref _oResultado, value); }
        }


        public void Initialize()
        {
            lock (_lockject)
            {
                if (!_initialized)
                {
                    _initialized = true;
                    _listaOpciones = new ObservableCollection<string>();
                    _listaOpciones.Add("Anomalia");
                    _listaOpciones.Add("Retiro");
                    _listaOpciones.Add("Retiro con Anomalia");
                    _listaOpciones.Add("Conforme");

                    _oResultado = "Conforme";
                }
            }
        }
    }
}

    XAML

    already having the viewModel then you add it in your xamlasDataContext

    <Page.DataContext>
    <vm:MainAppVM/>
</Page.DataContext>

    and then do binding of the ItemsSourcecon ListaOpcionesthat is the property exposed in the ViewModel, at once then you assign SelectedItemto do binding with OResultadoinTwoWay Mode

    <ComboBox x:Name="combo" HorizontalAlignment="Stretch" VerticalAlignment="Center"
                          ItemsSource="{Binding ListaOpciones}"
                          SelectedItem="{Binding OResultado,  Mode=TwoWay}" >
</ComboBox>

    Remember to add the reference to the viewmodel's namespace (line 5 ).

    <Page
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:App3"
    xmlns:vm="using:App3.ViewModels"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    x:Class="App3.MainPage"
    mc:Ignorable="d">
    <Page.DataContext>
        <vm:MainAppVM/>
    </Page.DataContext>
    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
            <ComboBox x:Name="combo" HorizontalAlignment="Stretch" VerticalAlignment="Center"
                          ItemsSource="{Binding ListaOpciones}"
                          SelectedItem="{Binding OResultado,  Mode=TwoWay}" >
            </ComboBox>
        </StackPanel>
    </Grid>
</Page>

    This is all!

    And as I always tell you, you have to learn Binding, I recommend the

    XAML video course especially chapters 5,7,8

    • 4