data binding - WPF ComboBox bind itemssource to different datacontext in MVVM

Question

I have a user control that has its datacontext set to a view model called EmployeeList_VM. I then have a ContentControl within that user-control that has its datacontect set to a public property (EmployeeSelection) of the view model. The ContentControl's datacontext is the same as the selected item binding of a listbox within the same user control.

I want to have a combobox (of an observblecollection called EmployeeStatus) within the ContentControl bind its selecteditem to a property of the EmployeeSelection datacontext of the ContentControl. I want the itemssource of the combobox to bind to a public property EmployeeStatus of the "parent" viewmodel EmployeeList_VM.

I can get a list of the employees status to appear wihtin the combobox. I can not get it to bind to the idStatus property of the EmployeeSelection.

Here is What I have so far (some code removed for readability):

<UserControl x:Class="FTC.View.EmployeeListView"
            xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
            xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
            xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
            xmlns:local="clr-namespace:FTC_Application"
            xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity"
            xmlns:cmd="http://www.galasoft.ch/mvvmlight"
            mc:Ignorable="d" 
            DataContext="{Binding EmployeeList_VM, Source={StaticResource Locator}}"
            d:DesignHeight="900" d:DesignWidth="1000">

        <Expander x:Name="DetailExpander" Grid.Column="2" Header="employee detail" Style="{DynamicResource ExpanderStyle_FTC}" IsExpanded="True" Padding="8,0,0,10" >
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto"/>
                    <ColumnDefinition Width="*"/>
                </Grid.ColumnDefinitions>
                <StackPanel Orientation="Vertical" HorizontalAlignment="Left" >
                    <Button Content="" Style="{DynamicResource ButtonSave}" Command="{Binding SaveCommand}" ToolTip="Save Changes" Margin="0,0,10,10"/>
                    <Button Content="" Style="{DynamicResource ButtonUndo}" Command="{Binding UndoCommand}" ToolTip="Undo Changes" Margin="0,0,10,10"/>
                </StackPanel>
                <ScrollViewer Grid.Column="1" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
                    <ContentControl DataContext="{Binding Path=EmployeeSelection, Mode=TwoWay}" >
                            <!-- FTC SETTINGS GRID CONTENT-->
                            <Grid Grid.ColumnSpan="6" Grid.Row="1">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="30"/>
                                    <ColumnDefinition Width="*"/>
                                    <ColumnDefinition Width="*"/>
                                    <ColumnDefinition Width="*"/>
                                    <ColumnDefinition Width="*"/>
                                </Grid.ColumnDefinitions>
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="Auto"/>
                                    <RowDefinition Height="Auto"/>
                                    <RowDefinition Height="Auto"/>
                                </Grid.RowDefinitions>

                                <TextBlock x:Name="SettingsHeading" Text="FTC Settings" Style="{StaticResource FTC_DetailHeading}" Grid.ColumnSpan="5"/>

                                <TextBlock Text="Status" Style="{StaticResource FTC_DetailLabelSub}" Grid.Column="1" Grid.ColumnSpan="2" Grid.Row="1"/>
                                <ComboBox Grid.Column="1" Grid.ColumnSpan="2" Grid.Row="2"
                                          Margin="5,5,16,5" Height="37"
                                          ItemsSource="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type UserControl}},Path=DataContext.EmployeeStatus}"
                                          SelectedItem="{Binding idStatus, Mode=TwoWay}"
                                          SelectedValuePath="idStatus"
                                          DisplayMemberPath="chrCode" FontSize="18"/>

                           </Grid>
                    </ContentControl>
                </ScrollViewer>
            </Grid>
        </Expander>
</UserControl>

I even tried the following change (I named the ContentControl DetailControl) for the selected item of the combobox:

SelectedItem="{Binding ElementName=DetailControl, Path=DataContext.idStatus}"

Can someone please help me get the selected item binding hooked up properly. The combobox displays all the right items, but they do not bind to the EmployeeSelection.idStatus.

Thanks in advance.

Answer 1

so here is what worked for me, hope it can help someone else

<ComboBox Name="cbStatus" Grid.Column="1" Grid.ColumnSpan="2" Grid.Row="2"
                                          Style="{StaticResource FTC_DetailComboBox}"
                                          ItemsSource="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type UserControl}},Path=DataContext.EmployeeStatus}"
                                          SelectedItem="{Binding ElementName=DetailControl, Path=DataContext.employee_status}"
                                          SelectedValuePath="idStatus"
                                          SelectedValue="{Binding idStatus, Mode=TwoWay, ValidatesOnDataErrors=True}"
                                          DisplayMemberPath="chrCode"/>