WPF - How to load text in a text-block into multiple controls upon click

Question

Hi all,

I've this requirement where: For example, a textblock has a name displayed as "Lastname, Firstname" which upon click will load two textbox controls with Firstname's value loaded into its own box and lastname's value into its own box and keep them ready for editing. While I can easily write a bunch of if conditions in my code-behind to achieve this, I'm looking for better ways of avoiding such a solution as there is no WPFism or MVVM treatment to it. Also, there are a bunch of other controls in my screen that will need this sort of a behavior and the code can soon get ugly if i resort to the initial way of solving it by just toggling visibility. Is there a better way to solve this in WPF? Would I be able to group these controls into a custom control and define my control template (but that would mean I'll need to roll such things for all the controls in my screen.)

Any help in that direction would be great.

Thanks Bala

Answer 1

Sounds like you want to get into the wonderful world of DataTemplates

first we'll create a container class for your data

public class Person
{
    public string FirstName {get; set;}
    public string LastName {get; set;}
    public Person(string first, string last)
    {
        FirstName = first;
        LastName = first;
    }
}

Then, in the code behind of your hosting element (probably window). You can declare and ObservableCollection<> of the objects.

//populate me wherever!
public ObservableCollection<Person> People {get;set;}

(dont forget to initialize that somewhere to avoid all kinds of unnecessary exceptions)

Then you can bind the collection to an items collection, i like the ItemsControl

<ItemsControl ItemsSource="{Binding Path=People}"/>

Except this doesn't give the result we want. So while we could override the ToString() of our class to spit out some formatted data, we can do one better by overriding the item template of the items control.

<ItemsControl ItemsSource="{Binding Path=People}">
        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <Button DataContext="{Binding}" Click="Button_Click">
                    <Button.Content>
                        <TextBlock>
                            <TextBlock.Text>
                                <MultiBinding StringFormat="{}{1}, {0}">
                                    <Binding Path="FirstName"/>
                                    <Binding Path="LastName"/>
                                 </MultiBinding>
                             </TextBlock.Text>
                        </TextBlock>
                    </Button.Content>
                </Button>
            </DataTemplate>
        </ItemsControl.ItemTemplate>
    </ItemsControl>

Note that I'm using a multi-binding with a string formatter in order to format the text correctly on the buttons.

Now on the Buttons Click Event handler, you can process an item. As the Sender of the event will be the button, and the DataContext of the button will be the person object it represents and you can do what you wish.

You might also find the ListBox and its SelectedItem Property very useful in your particular case.

Hopefully this is enough to get you started, -Val