Dynamic stack of ComboBoxes trying to add new items

Question

I have an Items control bound to a observable collection of TaskActivity objects.

<ItemsControl ItemsSource="{Binding TasksActivities, UpdateSourceTrigger=PropertyChanged}" Margin="20, 0, 20, 20">
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <Grid Margin="2, 0, 2, 0">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width= "*" />
                    <ColumnDefinition Width= "*" />
                    <ColumnDefinition Width= "*" />
                    <ColumnDefinition Width= "70"/>
                </Grid.ColumnDefinitions>

                <ComboBox x:Name="test" IsEditable="True" ItemsSource="{Binding Source={StaticResource Locator}, Path=Main.AvailableActivities, Mode=TwoWay}" SelectedValue="{Binding ActivityId}" Text="{Binding Name, UpdateSourceTrigger=LostFocus}" SelectedValuePath="Key" DisplayMemberPath="Value" HorizontalAlignment="Stretch" Grid.Column="0">
                </ComboBox>
                <TextBox Text="{Binding Length}" Grid.Column="1" />
                <TextBox Text="{Binding Comment}" Grid.Column="2" />

                <Button Height="24" Content="Remove" HorizontalAlignment="Right" Margin="10, 0, 10, 0" Style="{StaticResource LinkButton}" Grid.Column="3">
                    <i:Interaction.Triggers>
                        <i:EventTrigger EventName="Click">
                            <cmd:EventToCommand Command="{Binding Source={StaticResource Locator}, Path=Main.DeleteActivityCommand, Mode=OneWay}" CommandParameter="{Binding Name}"/>
                        </i:EventTrigger>
                    </i:Interaction.Triggers>
                </Button>
            </Grid>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

When a value is typed in the combobox that is doesn't exist and focus is lost, I want to have a prompt appear asking if they want to add add that value to the AvailableActivities list (which is just a Dictionary). Right now the border just goes red, and while it does update the "Name" property of the object inside the OC, it's not real because it can't set the ActivityId since it doesn't actually exist in the list of AvailableActivities.

I've tried an EventToCommand for SelectionChanged and LostFocus, but when a new value is entered, the value I'm returned is 'null' so I can't add it.

Normally I could just bind the text value to a property on the VM and just do it all there, but since it's a property inside a ObservableCollection of TaskActivity objects I'm not sure that's possible.

Any suggestions for achieving this functionality?

Answer 1

First make the ComboBox.Text a two-way binding so that the view model property gets updated:

Text="{Binding Path=Name, UpdateSourceTrigger=LostFocus, Mode=TwoWay}"

With that in place, add a command to the ComboBox's LostFocus event:

<ComboBox>
    <i:Interaction.Triggers>
        <i:EventTrigger EventName="LostFocus">
            <cmd:EventToCommand Command="{Binding Source={StaticResource Locator}, 
                                                  Path=Main.AddNewActivityCommand}" 
                                CommandParameter="{Binding ElementName=test,Path=Text}"
            />
        </i:EventTrigger>
    </i:Interaction.Triggers>
</ComboBox>

And finally, the "AddNewActivityCommand" should just add the new item (in the "Name" property) to the "AvailableActivities" collection.