Setting a property in VM from current row in observable collection

Question

All -

I am trying to set public property in VM based on the current item in Observable collection (which is also in VM). So essentially - I want to set shadecolor as Blue or Pink based on the row I am (see sample code below). Also see image of what the end result will look like.

Can somebody please suggest - how I can achieve this - am really stuck with this problem

See sample code below:

Model.cs

public class Model
{
    public Employee empdetails { get; set; }
}

public class Employee
{
    public string fname { get; set; }
    public string lname { get; set; }
    public Enum gender { get; set; }
}

public enum gender
{
    Male,
    Female
}

ViewModel.cs

public class ViewModel
{
    public ObservableCollection<Model> employees {get; set;}
    public myCommand NextCommand { get; set; }
    private Color _shadecolor;

    public Color shadecolor
    {
        get
        {
            return _shadecolor;
        }
        set
        {
            _shadecolor = value;
        }
    }

    public ViewModel()
    {
        employees = new ObservableCollection<Model>()
        {
            #region Populating Emp 1
            new Model()
            {
                empdetails = new Employee()
                {
                    fname = "John",
                    lname = "Smith",
                    gender = gender.Male
                }
            },
            #endregion

            #region Populating Emp 2
            new Model()
            {
                empdetails = new Employee()
                {
                    fname = "Robert",
                    lname = "Ally",
                    gender = gender.Female
                }
            },
            #endregion
        };

        NextCommand = new myCommand(myNextCommandExecute, myCanNextCommandExecute);
    }

    private void myNextCommandExecute(object parameter)
    {

    }

    private bool myCanNextCommandExecute(object parameter)
    {
        return true;
    }
}

View.xaml

<Window x:Class="WpfApplication1.View"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="View" Height="500" Width="500"  WindowStyle="None" AllowsTransparency="True" Background="Transparent">
<Border VerticalAlignment="Top" HorizontalAlignment="Left" BorderBrush="Silver" BorderThickness="2" CornerRadius="15">
    <Border.Background>
        <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.511,0.957">
            <GradientStop Color="LightGray" Offset="0.55" />
            <GradientStop Color="{Binding shadecolor}" Offset="1.3" />
        </LinearGradientBrush>
    </Border.Background>
    <Grid Width="300" Height="300" Margin="3">
        <StackPanel VerticalAlignment="Top" >
            <TextBlock Text="{Binding Path=employees/empdetails.fname}" />
            <Button Command="{Binding NextCommand}" Content="Next" Width="100"></Button>
        </StackPanel>
    </Grid>
</Border>
</Window>

Answer 1

I believe what you want is to bind SelectedItem={Binding SelectedItem} where Selected item is on the view model as well, exposed as an observable property.

public Model SelectedItem
{
   ...
}

I'm not totally sure what you are trying to achieve here though as you don't have anything in your XAML deriving from Selector, therefore there is no concept of a selected item here.

Answer 2

Why not use a ValueConverter?

<GradientStop Color="{Binding Path=gender, Converter={StaticResource GenderToColorConverter}" Offset="1.3" />

Then inside your value converter:

If value == Gender.Male return blue; 
return pink;

Technically, I think you return a Brush, but don't quote me on that.

Here's some sample code:

    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();

            this.DataContext = new ViewModel(GetTestEmployees());
        }

        static IEnumerable<Employee> GetTestEmployees()
        {
            return new[]
            {
                new Employee()
                {
                    FirstName = "Tom",
                    LastName = "Selleck",
                    Gender = Gender.Male
                },
                new Employee()
                {
                    FirstName = "Pat",
                    LastName = "Sajak",
                    Gender = Gender.Male,
                },
                new Employee()
                {
                    FirstName = "Mae",
                    LastName = "West",
                    Gender = Gender.Female
                }
            };
        }
    }

    public class ViewModel : INotifyPropertyChanged
    {
        public ViewModel(IEnumerable<Employee> employees)
        {
            _employees = new ObservableCollection<Employee>(employees);
            SelectedEmployee = employees.First();
        }

        ObservableCollection<Employee> _employees;
        public ObservableCollection<Employee> Employees
        {
            get { return _employees; }
        }

        Employee _selectedEmployee;
        public Employee SelectedEmployee 
        {
            get { return _selectedEmployee; }
            set
            {
                _selectedEmployee = value;
                RaisePropertyChangedEvent("SelectedEmployee");
            }
        }

        public void Next()
        {
            var curr = Employees.IndexOf(_selectedEmployee);

            if (curr == -1) throw new ArgumentOutOfRangeException();

            var next  = (curr + 1) % Employees.Count;

            SelectedEmployee = Employees[next];
        }

        ICommand _nextCommand;
        public ICommand NextCommand
        {
            get
            {
                if (_nextCommand == null)
                    _nextCommand = new NextCommand(this);

                return _nextCommand;
            }
        }

        public event PropertyChangedEventHandler PropertyChanged;

        protected void RaisePropertyChangedEvent(string propertyName)
        {
            if (PropertyChanged != null)
                PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
        }
    }

    public class NextCommand : ICommand
    {
        ViewModel _viewModel;

        public NextCommand(ViewModel viewModel)
        {
            _viewModel = viewModel;
        }

        public bool CanExecute(object parameter)
        {
            //throw new NotImplementedException();

            return true;
        }

        public event EventHandler CanExecuteChanged;

        public void Execute(object parameter)
        {
            //throw new NotImplementedException();

            _viewModel.Next();
        }
    }

    public class Employee
    {
        public string FirstName { get; set; }
        public string LastName { get; set; }
        public Gender Gender { get; set; }
    }

    public enum Gender
    {
        Male,
        Female
    }

    public class GenderToColorConverter : IValueConverter
    {

        public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            var gender = (Gender)value;

            if (gender == Gender.Male)
            {
                return Colors.Blue;
            }

            return Colors.Pink;
        }

        public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            throw new NotImplementedException();


}
}

And here's the corresponding markup:

<Window x:Class="WpfApplication1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:loc="clr-namespace:WpfApplication1"
        Title="MainWindow" Height="350" Width="525">
    <Window.Resources>
        <loc:GenderToColorConverter x:Key="GenderToColorConverter"/>
    </Window.Resources>
    <Grid>
        <ListBox ItemsSource="{Binding Employees}"
                      SelectedItem="{Binding SelectedEmployee}">
            <ListBox.Template>
                <ControlTemplate TargetType="ListBox">
                    <Grid>
                        <ContentControl DataContext="{TemplateBinding SelectedItem}">
                            <StackPanel >
                                <StackPanel.Background>
                                    <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.511,0.957">
                                        <GradientStop Color="LightGray" Offset="0.55" />
                                        <GradientStop Color="{Binding Path=Gender, Converter={StaticResource GenderToColorConverter}}" Offset="1.3" />
                                    </LinearGradientBrush>
                                </StackPanel.Background>
                                <TextBox Text="{Binding FirstName}"/>
                                <TextBox Text="{Binding LastName}"/>
                            </StackPanel>
                        </ContentControl>
                    </Grid>
                </ControlTemplate>
            </ListBox.Template>

        </ListBox>

        <Button VerticalAlignment="Bottom" HorizontalAlignment="Center" Content="Next" Command="{Binding NextCommand}"/>
    </Grid>
</Window>

Answer 3

I was able to implement this (fully working) solution using the approach Firoso has mentioned (leveraging the best practice too by Josh of keeping UI logic out of VM).

Posting the full code snippet/image for benefit of others.

Model

public class Model : CommonBase
{
    public Employee empdetails { get; set; }
}

public class Employee : CommonBase
{
    private string _fname;
    public string fname 
    {
        get
        {
            return _fname;
        }

        set
        {
            _fname = value;
            OnPropertyChanged("fname");
        }
    }
    public string lname { get; set; }
    private Enum _gender;
    public Enum gender
    {
        get
        {
            return _gender;
        }
        set
        {
            _gender = value;
            OnPropertyChanged("gender");
        }
    }
}

public enum gender
{
    Male,
    Female
}

ViewModel

public class ViewModel
{
    public Model employees { get; set; }
    public myCommand NextCommand { get; set; }

    public ViewModel()
    {
        employees = new Model()
        {
            empdetails = new Employee()
            {
                fname = "John",
                lname = "Doe",
                gender = gender.Male
            }
        };

        NextCommand = new myCommand(myNextCommandExecute, myCanNextCommandExecute);
    }

    private void myNextCommandExecute(object parameter)
    {
        employees.empdetails.fname = "Ally";
        employees.empdetails.lname = "Smith";
        employees.empdetails.gender = gender.Female;
    }

    private bool myCanNextCommandExecute(object parameter)
    {
        return true;
    }
}

View

<Window x:Class="WpfApplication1.View"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:loc="clr-namespace:WpfApplication1"
    Title="View" Height="500" Width="500"  WindowStyle="None" AllowsTransparency="True" Background="Transparent">
<Window.Resources>
    <loc:GendertoColorConverter x:Key="GendertoColorConverter"/>
</Window.Resources>
<Border VerticalAlignment="Top" HorizontalAlignment="Left" BorderBrush="Silver" BorderThickness="2" CornerRadius="15">
    <Border.Background>
        <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.511,0.957">
            <GradientStop Color="LightGray" Offset="0.55" />
            <GradientStop Color="{Binding Path=employees.empdetails.gender, Converter={StaticResource GendertoColorConverter}}" Offset="1.3" />
        </LinearGradientBrush>
    </Border.Background>
    <Grid Width="300" Height="300" Margin="3">
        <StackPanel VerticalAlignment="Top" >
            <TextBlock Text="{Binding Path=employees.empdetails.fname}" />
            <Button Command="{Binding NextCommand}" Content="Next" Width="100"></Button>
        </StackPanel>
    </Grid>
</Border>