C# how to edit item's name in listbox (WPF)

Question

0.00/5 (No votes)

See more:

I have textbox and button in the left side,i need to write new name for selected item in listbox, and after clicking on Save button my selected item's title must change.What should i write in Save button click?This is screenshot ` WPF[^]

This is my all code`

public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();
        DataContext = this;
    }

    public ObservableCollection<MyPicture> MyPictures { get; }
        = new ObservableCollection<MyPicture>();

    private void Button_Click(object sender, RoutedEventArgs e)
    {
        OpenFileDialog op = new OpenFileDialog()
        {
            Title = "Select picture(s)",
            Filter = "All supported graphics|" +
                        "*.jpg;*.jpeg;*.png|" +
                        "JPEG (*.jpg;*.jpeg)|" +
                        "*.jpg;*.jpeg|" +
                        "Portable Network Graphic (*.png)" +
                        "|*.png",
            InitialDirectory = Environment.GetFolderPath(
                Environment.SpecialFolder.MyPictures),
            Multiselect = true
        };

        if (op.ShowDialog() == true)
        {
            paste(op.FileNames.Select(f => new MyPicture
            {
                Url = new Uri(f, UriKind.Absolute),
                Title = System.IO.Path.GetFileName(f)
            }));
        }
    }

    private void paste(IEnumerable<MyPicture> newPictures)
    {
        
        foreach (var item in newPictures)
        {
            MyPictures.Add(item);
        }
    }
}

public class MyPicture
{
    public Uri Url { get; set; } 
    public string Title { get; set; }
}

What I have tried:

I have written like this, but it's not working.

private void savebutton_Click(object sender, RoutedEventArgs e)
        {
            lb.SelectedItem= textBox.Text;
        }

Posted 3-Apr-18 0:32am

Suren97

Updated 3-Apr-18 2:08am

v4

Add a Solution

2 solutions

Solution 1

SelectedItem returns an object, not an instance of MyPicture. What you need to do is convert the selected object into MyPicture and then assign the text to the value. Something like this:

C#

private void UpdateTitle()
{
  if (lb.SelectedItem == null) return;
  MyPicture picture = lb.SelectedItem as MyPicture;
  if (picture != null)
  {
    picture.Title = textBox.Text;
  }
}

Posted 3-Apr-18 0:45am

Pete O'Hanlon

Comments

Suren97 3-Apr-18 6:51am

I tried like this, but it's not change again :(

Pete O'Hanlon 3-Apr-18 6:54am

Did you put any breakpoints in your code and debug it to see what's happening?

Suren97 3-Apr-18 6:57am

which breakpoint?

Pete O'Hanlon 3-Apr-18 7:03am

In your code, did you add a breakpoint on the point that you are testing that SelectedItem is not null and then step over each line, looking to see what the values are? You do know how to debug don't you?

Suren97 3-Apr-18 7:15am

yes i added, but it's not change selected item's title

Pete O'Hanlon 3-Apr-18 7:24am

Did you step over each line and check what it was doing? Did you ensure that the conversion of SelectedItem to MyPicture actually worked?

Oh, one more thing, if you are expecting to see the value updated back in the UI, you are going to have to raise a PropertyChanged event in the Title when you change it.

Suren97 3-Apr-18 7:28am

How can i use PropertyChanged event?

Pete O'Hanlon 3-Apr-18 7:31am

Seriously? You're doing WPF and you don't know about PropertyChanged? Your MyPicture class needs to implement INotifyPropertyChanged; this has a PropertyChanged event. In the setter for your title, you are going to have to raise the event. Have a search around the web for ViewModelBase implementations to get an idea about how to structure this.

Suren97 3-Apr-18 7:42am

yes I'm begginner in WPF, can you help me please?

Graeme_Grant 3-Apr-18 8:10am

Pete, this is an extra question on top of the original question asked here: C# how to load images into listbox next to each other, WPF (openfiledialog)[^]

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Graeme_Grant · Accepted Answer · 2018-04-03T02:10:00

Change you Listbox.ItemTemplate as follows:

XML

<ListBox.ItemTemplate>
    <DataTemplate>
        <Grid MaxWidth="200" Margin="10">
            <Grid.RowDefinitions>
                <RowDefinition/>
                <RowDefinition Height="Auto"/>
            </Grid.RowDefinitions>
            <Image Source="{Binding Url}" />
            <TextBlock MouseDown="txtblk_MouseDown" Grid.Row="1"
                        Text="{Binding Title}" />
            <TextBox LostFocus="txtbox_LostFocus"  Grid.Row="1"
                        Text="{Binding Title, Mode=TwoWay}"
                        Visibility="Collapsed" />
        </Grid>
    </DataTemplate>
</ListBox.ItemTemplate>

and add the following code to your code-behind:

C#

private void txtblk_MouseDown(object sender, System.Windows.Input.MouseButtonEventArgs e)
{
    TextBox txt = (TextBox)((Grid)((TextBlock)sender).Parent).Children[2];
    txt.Visibility = Visibility.Visible;
    ((TextBlock)sender).Visibility = Visibility.Collapsed;
}

private void txtbox_LostFocus(object sender, RoutedEventArgs e)
{
    TextBlock tb = (TextBlock)((Grid)((TextBox)sender).Parent).Children[1];
    tb.Visibility = Visibility.Visible;
    ((TextBox)sender).Visibility = Visibility.Collapsed;
}

For the changed to be reflected using data binding, you need to change the MyPicture class as follows:

C#

public class MyPicture : ObservableBase
{
    public Uri Url { get; set; } // filename of image

    private string title;
    public string Title
    {
        get { return title; }
        set { Set(ref title, value); }
    }
}

and add the following class to support the INotifyPropertyChanged interface:

C#

public abstract class ObservableBase : INotifyPropertyChanged
{
    public void Set<TValue>(ref TValue field, TValue newValue, [CallerMemberName] string propertyName = "")
    {
        if (EqualityComparer<TValue>.Default.Equals(field, default(TValue)) || !field.Equals(newValue))
        {
            field = newValue;
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
        }
    }

    public event PropertyChangedEventHandler PropertyChanged;
}

The INotifyPropertyChanged interface notifies the data binding system there is a change when the PropertyChanged event is raised. I've wrapped this up in a base class making the usage very simple. You can see this in the Title property Set method of the MyPicture class.

To use, click on the Picture's title text and you will be able to edit it. Once you click outside the editing TextBox, the changes will automatically be applied.