WPF MVVM Combobox binding

Question

I have created a combo box and im binding in MVVM pattern, but my properties are not binding to the view, I'm confused with itemsource and selectvalue . What changes can I make to view.xaml ? I'm guessing the remainder of the code in my model and view model are perfect.

This is my Model

namespace screensaver.Models {
    class ConfigurationModel {
        public int _resolution;

        private ObservableCollection < ConfigurationModel > Resolution {
            get {
                return Resolution;
            }
            set {
                Resolution = value;
            }
        }

        public ConfigurationModel() {
            Resolution = new ObservableCollection < ConfigurationModel > () {
                new ConfigurationModel() {
                    _resolution = 360 * 720
                },
                new ConfigurationModel() {
                    _resolution = 720 * 1080
                },
                new ConfigurationModel() {
                    _resolution = 1080 * 2060
                }
            };
        }
    }
}

This is my ViewModel

namespace screensaver.ViewModels {
    class ConfigurationViewModel {
        private ObservableCollection < ConfigurationModel > _resolution;

        public ObservableCollection < ConfigurationModel > Resolution {
            get {
                return Resolution;
            }
            set {
                Resolution = value;
            }
        }

    }
}

This is my View xaml code

<Window x:Class="screensaver.Views.ConfigurationWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:ViewModels="clr-namespace:screensaver.ViewModels" Title="ConfigurationWindow"
Height="1000" Width="500">
    <Grid>
        <Label Content="Display" HorizontalAlignment="Left" Margin="7,12,0,0" VerticalAlignment="Top" />
        <ComboBox HorizontalAlignment="Left" Margin="322,14,0,0" VerticalAlignment="Top" Width="120" />
        <ComboBox ItemsSource="{Binding Resolution}" SelectedItem="{Binding 
       Resolution, Mode=TwoWay}" DisplayMemberPath="{Binding Resolution}" HorizontalAlignment="Left" Margin="74,13,0,0" VerticalAlignment="Top" Width="120" />
        <Label Content="Resolution" HorizontalAlignment="Left" Margin="250,13,0,0" VerticalAlignment="Top" />
        <Button Content="Save" HorizontalAlignment="Left" Margin="80,362,0,0" VerticalAlignment="Top" Width="75" />
        <Button Content="Close" HorizontalAlignment="Left" Margin="350,360,0,0" VerticalAlignment="Top" Width="75" />
        <Label Content="Height" HorizontalAlignment="Left" Margin="72,178,0,0" VerticalAlignment="Top" />
        <TextBox HorizontalAlignment="Left" Height="23" Margin="140,181,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Width="120" />
        <Label Content="Width" HorizontalAlignment="Left" Margin="290,175,0,0" VerticalAlignment="Top" />
        <TextBox HorizontalAlignment="Left" Height="23" Margin="346,179,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Width="120" />
        <Label Content="Top" HorizontalAlignment="Left" Margin="76,253,0,0" VerticalAlignment="Top" />
        <TextBox HorizontalAlignment="Left" Height="23" Margin="140,255,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Width="120" />
        <Label Content="Left" HorizontalAlignment="Left" Margin="292,250,0,0" VerticalAlignment="Top" />
        <TextBox HorizontalAlignment="Left" Height="23" Margin="349,252,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Width="120" />
    </Grid>
</Window>

Answer 1

There are some problems with your code.

First fix your property Resolution in ViewModel to prevent a StackOverflowException. Use your field _resolution in get and set.

    private ObservableCollection < ConfigurationModel > Resolution {
        get {
            return _resolution;
        }
        set {
            _resolution = value;
        }
    }

Similar problem in your Model. Here you can use an auto-property

    private ObservableCollection<ConfigurationModel> Resolution
    {
        get;
        set;
    }

Maybe you should also exchange the ObservableCollection by a List<>. But this is not necessary. The field _resolution can be removed and the type of Resolution poperty changed to ObservableCollection< string >.

    private ObservableCollection<string> Resolution
    {
        get;
        set;
    }

Your constructor can then be changed to

    public ConfigurationModel()
    {
        Resolution = new ObservableCollection<string>() {
            "360 * 720",
            "720 * 1080",
            "1080 * 2060"
        };
    }

There is also missing the link from Model to ViewModel. Something like that:

    private readonly ConfigurationModel _model;

    public ConfigurationViewModel()
    {
        _model = new ConfigurationModel();
    }

And then you have to use it, so you have to change your property

    public ObservableCollection<string> Resolution
    {
        get
        {
            return _model.Resolution;
        }
        set
        {
            _model.Resolution = value;
        }
    }

Therefore you have to change the modifier in the Model from private to public.

    public ObservableCollection<string> Resolution
    {
        get;
        set;
    }

Now you can remove the field _resolution from ViewModel.

DisplayMemberPath have to be removed from the View. And you have to set the DataContext properly.

<Window.DataContext>
    <ViewModels:ConfigurationViewModel />
</Window.DataContext>

So far you have that result:

The SelectedItem in the View have to bind to another property in the ViewModel.

public string SelectedResolution { get; set; }

SelectedItem="{Binding SelectedResolution, Mode=TwoWay}"

This should be a good starting point to go further on. You can change the string in the ObservableCollection to an own type with more properties. Then you need to set the DisplayMemberPath again.

Here is the final code.

Model:

using System.Collections.ObjectModel;

namespace screensaver.Models
{
    class ConfigurationModel
    {
        public ObservableCollection<string> Resolution
        {
            get;
            set;
        }

        public ConfigurationModel()
        {
            Resolution = new ObservableCollection<string>() {
                "360 * 720",
                "720 * 1080",
                "1080 * 2060"
            };
        }
    }
}

ViewModel:

using screensaver.Models;
using System.Collections.ObjectModel;

namespace screensaver.ViewModels
{
    class ConfigurationViewModel
    {
        private readonly ConfigurationModel _model;

        public ConfigurationViewModel()
        {
            _model = new ConfigurationModel();
        }

        public ObservableCollection<string> Resolution
        {
            get { return _model.Resolution; }
            set { _model.Resolution = value; }
        }

        public string SelectedResolution { get; set; }

    }
}

View:

<Window x:Class="screensaver.Views.ConfigurationWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:ViewModels="clr-namespace:screensaver.ViewModels" Title="ConfigurationWindow"
Height="1000" Width="500">
<Window.DataContext>
    <ViewModels:ConfigurationViewModel />
</Window.DataContext>
<Grid>
    <Label Content="Display" HorizontalAlignment="Left" Margin="7,12,0,0" VerticalAlignment="Top" />
    <ComboBox HorizontalAlignment="Left" Margin="322,14,0,0" VerticalAlignment="Top" Width="120" />
    <ComboBox ItemsSource="{Binding Resolution}" SelectedItem="{Binding SelectedResolution, Mode=TwoWay}" HorizontalAlignment="Left" Margin="74,13,0,0" VerticalAlignment="Top" Width="120" />
    <Label Content="Resolution" HorizontalAlignment="Left" Margin="250,13,0,0" VerticalAlignment="Top" />
    <Button Content="Save" HorizontalAlignment="Left" Margin="80,362,0,0" VerticalAlignment="Top" Width="75" />
    <Button Content="Close" HorizontalAlignment="Left" Margin="350,360,0,0" VerticalAlignment="Top" Width="75" />
    <Label Content="Height" HorizontalAlignment="Left" Margin="72,178,0,0" VerticalAlignment="Top" />
    <TextBox HorizontalAlignment="Left" Height="23" Margin="140,181,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Width="120" />
    <Label Content="Width" HorizontalAlignment="Left" Margin="290,175,0,0" VerticalAlignment="Top" />
    <TextBox HorizontalAlignment="Left" Height="23" Margin="346,179,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Width="120" />
    <Label Content="Top" HorizontalAlignment="Left" Margin="76,253,0,0" VerticalAlignment="Top" />
    <TextBox HorizontalAlignment="Left" Height="23" Margin="140,255,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Width="120" />
    <Label Content="Left" HorizontalAlignment="Left" Margin="292,250,0,0" VerticalAlignment="Top" />
    <TextBox HorizontalAlignment="Left" Height="23" Margin="349,252,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Width="120" />
</Grid>
</Window>