CODEWITHSUNDEEP
wpfdata-bindingtextboxlistbox
NewInDevelopment
NewInDevelopment

Reputation: 59

Editable WPF ListBox contains textbox

I want to have dynamic editable listbox in wpf application. I am using textbox inside listbox, and I am binding Observable collection to that listbox. Now, I want to make textbox editable on mouse click. So, user can make change to textbox and save new textbox text.

         <ListBox Name="ListTwo" ItemsSource="{Binding CollectionUrl, Mode=TwoWay}"  >
         <ListBox.ItemTemplate>
            <DataTemplate>
                <TextBox Name="TextBoxList" Text="{Binding Path=urlString}" IsEnabled="False" >
                </TextBox>
            </DataTemplate>

        </ListBox.ItemTemplate>

        </ListBox>

Upvotes: 1

Views: 4773

Answers (2)

Justin Halls
Justin Halls

Reputation: 1

My approach to accessing the text box (which was proving a nightmare) was to use your save button approach and in the Button's Button_Click function I used sender to retrieve the Button's parent, cast to (in your case) Grid. Then you can use that to access the Grid's Children with .Children[0] being your TextBox. Bit of a Kluge because your code has to 'know' the type of the parent and the index of the child TextBox but these will not change. If necessary the purists can iterate through the Children to identify the required child explicitly. Hope this helps someone.

Upvotes: 0

kmatyaszek
kmatyaszek

Reputation: 19296

You should use IsReadOnly property. In the trigger you should check IsFocused property.

In the following example, I changed foreground color to indicate which TextBox is in the edit mode.

Example:

<ListBox Name="ListTwo" ItemsSource="{Binding CollectionUrl, Mode=TwoWay}"  >
    <ListBox.ItemTemplate>
        <DataTemplate>
            <TextBox Name="TextBoxList" Text="{Binding Path=urlString}" MinWidth="100">
                <TextBox.Style>
                    <Style TargetType="TextBox">
                        <Style.Triggers>
                            <Trigger Property="IsFocused" Value="True">
                                <Setter Property="Foreground" Value="Green"/>
                                <Setter Property="IsReadOnly" Value="False" />
                            </Trigger>
                            <Trigger Property="IsFocused" Value="False">
                                <Setter Property="Foreground" Value="Red"/>
                                <Setter Property="IsReadOnly" Value="True" />
                            </Trigger>
                        </Style.Triggers>
                    </Style>
                </TextBox.Style>
            </TextBox>
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>

If you want to allow users save changes after edit value in the TextBox, you can add button and show in the actual editing row:

<ListBox Name="ListTwo" ItemsSource="{Binding CollectionUrl, Mode=TwoWay}"  >
    <ListBox.ItemTemplate>
        <DataTemplate>
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto" />
                    <ColumnDefinition Width="50" />
                </Grid.ColumnDefinitions>
                <TextBox Name="TextBoxList" Text="{Binding Path=urlString}" MinWidth="100">
                    <TextBox.Style>
                        <Style TargetType="TextBox">
                            <Style.Triggers>
                                <Trigger Property="IsFocused" Value="True">
                                    <Setter Property="Foreground" Value="Green"/>
                                    <Setter Property="IsReadOnly" Value="False" />
                                </Trigger>
                                <Trigger Property="IsFocused" Value="False">
                                    <Setter Property="Foreground" Value="Red"/>
                                    <Setter Property="IsReadOnly" Value="True" />
                                </Trigger>
                            </Style.Triggers>
                        </Style>
                    </TextBox.Style>
                </TextBox>
                <Button Content="Save" Grid.Column="1" Command="{Binding SaveChanges}">
                    <Button.Style>
                        <Style TargetType="Button">
                            <Setter Property="Visibility" Value="Collapsed" />
                            <Style.Triggers>
                                <DataTrigger Binding="{Binding ElementName=TextBoxList, Path=IsFocused}" Value="True">
                                    <Setter Property="Visibility" Value="Visible" />
                                </DataTrigger>
                            </Style.Triggers>
                        </Style>
                    </Button.Style>
                </Button>
            </Grid>
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>

Upvotes: 1

Related Questions