WPF ListBox自定义项

Question

I want to have a "Custom" item inside a ListBox, so that the user can enter custom values apart from the preset selectable values.

Here's my XAML code:

        <ListBox SelectedValue="{Binding SomeValue}"
                 SelectedValuePath="Tag"
                 Style="{StaticResource HorizontalRadioButtonList}">
            <!-- style from http://stackoverflow.com/a/4120034/1813487 -->
            <ListBoxItem Tag="10" 
                     Content="10"/>
            <ListBoxItem Tag="20" 
                     Content="20"/>
            <ListBoxItem Tag="30" 
                     Content="30"/>
            <ListBoxItem x:Name="CustomListBoxItem">
                <TextBox Text="{Binding ElementName=CustomListBoxItem, 
                                        Mode=OneWayToSource, 
                                        UpdateSourceTrigger=PropertyChanged, 
                                        Path=Tag}"/>
            </ListBoxItem>
        </ListBox>
        <TextBlock Text="{Binding SomeValue}"/>

How to make SomeValue update as soon as the user enters something in the TextBox? Currently the ListBox does not detect that the Tag changed, and does not update SomeValue.

Answer 1

I think you can achieve that using a behavior attached to the TextBox, where you sign the TextChanged event and everytime it is triggered you could set the ListBoxItem's tag to the TextBox's text.

I did something similar to that, but using Microsoft.Expression.Interactivity:

<ListBoxItem x:Name="UniqueValue" Tag="40">
    <TextBox x:Name="TextBox" Text="40">
        <i:Interaction.Triggers>
            <i:EventTrigger EventName="TextChanged">
                <ei:ChangePropertyAction PropertyName="Tag"
                                                             TargetObject="{Binding ElementName=UniqueValue}"
                                                             Value="{Binding Text,
                                                                             ElementName=TextBox}" />

                <ei:ChangePropertyAction PropertyName="SomeValue"
                                                             TargetObject="{Binding}"
                                                             Value="{Binding Text,
                                                                             ElementName=TextBox,
                                                                             Converter={StaticResource StringToIntConverter}}" />
            </i:EventTrigger>
        </i:Interaction.Triggers>
    </TextBox>
</ListBoxItem>

Basically, everytime the text is changed, the property Tag will have its value set to the written text, and after that (to keep the selection of the ListBoxItem) the viewmodel's property SomeValue has its value set the same text.

Namespaces:

    xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions"
    xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"

Assemblies required:

System.Windows.Interactivity
Microsoft.Expression.Interactions

Answer 2

Here's how I did it, it's not the perfect solution either:

XAML:

<ListBox SelectedValue="{Binding SomeValue}"
             SelectedValuePath="Tag"
             Style="{StaticResource HorizontalRadioButtonList}"
             x:Name="CustomListBox">
        <!-- ...items... -->
        <ListBoxItem x:Name="CustomListBoxItem">
            <TextBox Text="{Binding ElementName=CustomListBoxItem, 
                                    Mode=OneWayToSource, 
                                    UpdateSourceTrigger=PropertyChanged, 
                                    Path=Tag}"
                     TextChanged="UpdateCustomValue"
                     x:Name="CustomTextBox"/>
        </ListBoxItem>
    </ListBox>
    <TextBlock Text="{Binding SomeValue}"/>

Code:

private void UpdateUniqueValue(object sender, TextChangedEventArgs e)
{
    var listBox = sender == CustomTextBox? CustomListBox: null;
    if (listBox != null)
    {
        var textBox = (TextBox) sender;
        try // so that invalid values are not allowed
        {
            listBox.SelectedValue = textBox.Text;
        }
        catch
        {
            textBox.Text = listBox.SelectedValue.ToString();
        }
    }
}

It is a workaround and does not take into account validators either, but at least does not allow invalid values to be entered.