Binding the Value of a ComboBox

Question

Binding the Value of a ComboBox

Navigation

#1 by (4 votes)

6

My problem is that I am trying to bind between a ComboBox and a property type string in viewModel, but I can not 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 SelectedItem and SelectedValue , SelectedIndex but only throw me the index of ComboBoxItem selected. I tried to do a Converter but I did not manage to get the expected result.

What I want to do is that when the user selects an item of ComboBox the value Content of the item is assigned to the property of type string OResultado of my viewModel.

c# xaml uwp binding mvvm

asked by Edwin V 14.01.2016 в 01:39

source

1 answer

How can I know from and to where I'm browsing with ngRoute? Read files with python, problem getting value with .readline ()

score 4 · Accepted Answer

In this case there are several ways to do it, but the way that less work brings is populating the ComboBox dynamically instead of with static values.

This is achieved by creating the list of options in ViewModel and doing Binding with ItemsSource of ComboBox .

viewmodel

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

Additionally, I performed the lazy initialization trick with the call to the properties to be able to create the instance of viewmodel from xaml

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 xaml as DataContext

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

and then make the binding of ItemsSource with ListaOpciones that is the property exposed in the ViewModel, once then assign SelectedItem to make binding with OResultado in TwoWay 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 namespace of the viewmodel (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 Everything!

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

Binding the Value of a ComboBox

1 answer

viewmodel

XAML

XAML video course especially chapters 5,7,8