WPF Еditable Textbox in a Listbox

Question

I'm new to wpf, but even so I thought this is a trivial problem. So i have а listbox with 4 columns: file names, textbox, checkbox and a button. The buttons are working fine, but for some reason i can't use the textboxes - can't click them or write inside them. Here is my xaml:

<ListBox Name="lbDocxFiles" HorizontalContentAlignment="Stretch" Margin="10,0" Grid.ColumnSpan="2" Grid.Row="2" SelectionChanged="lbDocxFiles_SelectionChanged">
        <ListBox.ItemTemplate>
            <DataTemplate>
                <Grid Margin="0,2">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*" />
                        <ColumnDefinition Width="30" />
                        <ColumnDefinition Width="70" />
                        <ColumnDefinition Width="50" />
                    </Grid.ColumnDefinitions>
                    <CheckBox x:Name="checkBox" Grid.Column="3" Content="" HorizontalAlignment="Center" VerticalAlignment="Center"/>
                    <TextBox  x:Name="tbNodeID" IsReadOnly="False" AcceptsReturn="True" IsEnabled="True" Focusable="True"  TextWrapping="Wrap" HorizontalAlignment="Right" Height="25" Width="90" Text="" VerticalAlignment="Center" Grid.ColumnSpan="1">
                        <TextBox.Style>
                            <Style TargetType="{x:Type TextBox}">
                                <Style.Triggers>
                                    <Trigger Property="IsFocused" Value="True">
                                        <Setter Property="IsReadOnly" Value="False" />
                                    </Trigger>
                                </Style.Triggers>
                            </Style>
                        </TextBox.Style>

                    </TextBox>
                    <Button Grid.Column="2" Width="70" Height="25" Content="UPLOAD" Click="btnUpload_Click" Background="#FF70ECD5" BorderThickness="0" Foreground="White" />
                    <TextBlock Grid.Column="0" Text="{Binding fileTitle}"/>

                </Grid>
            </DataTemplate>
        </ListBox.ItemTemplate>

I guess i'm doing something wrong, but can't find out why the texboxes are not editable. Any help will be appreciated! Thanks in advance!

Ayyappan Subramanian · Accepted Answer · 2016-01-29 16:15:31Z

Refer the below code. It should work. There some UI layout issue.

<ListBox x:Name="lbDocxFiles" HorizontalContentAlignment="Stretch"  >
        <ListBox.ItemTemplate>
            <DataTemplate>
                <Grid >
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*" />
                        <ColumnDefinition Width="90" />
                        <ColumnDefinition Width="70" />
                        <ColumnDefinition Width="50" />
                    </Grid.ColumnDefinitions>
                    <CheckBox x:Name="checkBox" Grid.Column="3" Content="Tets" HorizontalAlignment="Center" VerticalAlignment="Center"/>
                    <TextBox  x:Name="tbNodeID" IsReadOnly="False" AcceptsReturn="True" 
                              IsEnabled="True" Focusable="True"  TextWrapping="Wrap" HorizontalAlignment="Right" 
                              Height="25" Width="90" Text="" VerticalAlignment="Center" Grid.Column="1">
                        <TextBox.Style>
                            <Style TargetType="{x:Type TextBox}">
                                <Style.Triggers>
                                    <Trigger Property="IsFocused" Value="True">                                            
                                        <Setter Property="IsReadOnly" Value="False" />
                                    </Trigger>
                                    <Trigger Property="IsFocused" Value="False">                                           
                                        <Setter Property="IsReadOnly" Value="True" />
                                    </Trigger>
                                </Style.Triggers>
                            </Style>
                        </TextBox.Style>
                    </TextBox>
                    <Button Grid.Column="2" Width="70" Height="25" Content="UPLOAD" 
                            Background="#FF70ECD5" BorderThickness="0" Foreground="White" />
                    <TextBlock Grid.Column="0" Text="{Binding MyProperty}"/>
                </Grid>
            </DataTemplate>
        </ListBox.ItemTemplate>
    </ListBox>

  public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();
        ObservableCollection<MyModel> lst = new ObservableCollection<MyModel>();
        lst.Add(new MyModel() { MyProperty = "Hi" });
        lbDocxFiles.ItemsSource = lst;
    }
}

class MyModel
{
    private string myVar;

    public string MyProperty
    {
        get { return myVar; }
        set { myVar = value; }
    }

}

That doesn't work either. :( I don't know why, but for some reason the textboxes doesn't correspond at all - I think i can't really focus it and that's why the triggers doesn't work. It feels like there is some layer above the textbox and that's why i can't click in it... Thanks for your answer tho!

zstefanova · Accepted Answer · 2016-02-01 09:09:40Z

So i found a solution here that works. We set the FocusManager.FocusedElement property in style trigger:

 <Window.Resources>
    <Style x:Key="{x:Type ListBoxItem}" TargetType="{x:Type ListBoxItem}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type ListBoxItem}">
                    <StackPanel FocusManager.FocusedElement="{Binding ElementName=MyTextBox}" Orientation="Horizontal">
                        <Grid Margin="0,2">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="*" />
                                <ColumnDefinition Width="100" />
                                <ColumnDefinition Width="100" />
                                <ColumnDefinition Width="30" />
                            </Grid.ColumnDefinitions>

                            <TextBlock Text="{Binding fileTitle}" Grid.Column="0" />
                            <TextBox Name="tbNodeID" Text="{Binding Details}" Height="25" Width="90" HorizontalAlignment="Right"  Grid.Column="2" />
                            <Button Grid.Column="1" Width="70" Height="25" HorizontalAlignment="Right" Content="UPLOAD" Click="btnUpload_Click" Background="#FF70ECD5" BorderThickness="0" Foreground="White" />
                            <CheckBox x:Name="checkBox" Grid.Column="3" Content="" HorizontalAlignment="Right" VerticalAlignment="Center"/>
                        </Grid>
                    </StackPanel>
                    <ControlTemplate.Triggers>
                        <Trigger Property="Selector.IsSelected" Value="True">
                            <Setter TargetName="tbNodeID" Property="FocusManager.FocusedElement" Value="{Binding ElementName=tbNodeID}" />
                        </Trigger>
                        <Trigger Property="IsKeyboardFocused" Value="True">
                            <Setter TargetName="tbNodeID" Property="FocusManager.FocusedElement" Value="{Binding ElementName=tbNodeID}" />
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

</Window.Resources>

<Grid>

    <ListBox Name="myLB" SelectedIndex="{Binding MySelectedIndex}">

    </ListBox> </Grid>

This not only makes my textbox editable, but also focus it when item from the listbox is clicked.

Collectives™ on Stack Overflow

WPF Еditable Textbox in a Listbox

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related