Home > WPF > CodeFluent Entities and WPF: Master/Details

CodeFluent Entities and WPF: Master/Details


This one is actually dead easy in WPF thanks to its advanced data-binding mechanism.  In this post, we’ll start from a simple ListBox listing all our contacts, which upon selection of one of its item, will display its details underneath.

Here’s the XAML:

<StackPanel Margin="10">
    <TextBlock FontWeight="bold" Margin="5">Contacts:</TextBlock>
    <ListBox Name="_contactsListBox" />
    
    <TextBlock FontWeight="bold" Margin="5,10,5,5">Details:</TextBlock>
    <StackPanel DataContext="{Binding ElementName=_contactsListBox, Path=SelectedItem}" Margin="5">
        <TextBlock>FirstName:</TextBlock>
        <TextBox Text="{Binding Path=FirstName}" />

        <TextBlock>LastName:</TextBlock>
        <TextBox Text="{Binding Path=LastName}" />
    </StackPanel>
</StackPanel>

As you can see in the code above, we’ve got a ListBox listing our contacts, and underneath a StackPanel containing a couple TextBlocks and TextBoxes which detail the selected contact. This StackPanel is data-bound to the SelectedItem of the Contact ListBox, so selecting a contact will automatically display its details underneath.

Here’s the code-behind (just a single line to load all contacts in our ListBox):

public MasterDetail()
{
    InitializeComponent();
    _contactsListBox.ItemsSource = ContactCollection.LoadAll();
}

Here’s the result:

image

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s