MasterDetails Custom Control - WPF

Question

I want to create a reusable custom WPF control that will do the following:

I want it to expose Property of MasterContent and property of ExpandedDetails. When I run the application I want it to display the deatails of only The MasterControl the same as data grid does. When I click on an item, I want it to expand and show the details of ExpandedDetails.

I will give an example: Suppose I have a customer class and it has Orders Property.

When the Control is shown, it will display:

(Ok, I still can't post images, but I think it is clear from the explanation)

Now, suppose each row can be selected. If I select Row number 2, row 2 will exapnd and show the orders of Person describes in that row. The expanding part will be shown between rows 2 and 3. When I click on it again, the order detais will disapear so there is no gap between row 2 and 3.

In my case, Master Content Property will be the persons details without the orders, and the ExpandedDetails will be the Orders by themselves.

Can you please direct me to how to start implementing this or give me some good reading material. I'm familiar with The master Details Pattern: I know how select Person and then show his orders in some seperated DataGrid, but how do I implement this as a reusable control, especailly the expanding part. Thanks!

score 1 · Accepted Answer · answered Jun 18 '14 at 08:47

As far as I can interpret what you need, you might not even need a Custom Control for this. You can take a look at this CodeProject article, it will give you a sample of how to use RowDetailTemplate and how to use it in context of a DataGrid. That way you can have a DataGrid to show your main data, and use the RowDetails to display something entirely different, yet dependent on the selection in your main DataGrid.

If you look for it in that project, it looks roughly like this:

<DataGrid Name="dataGrid1"                
    RowDetailsTemplate="{StaticResource RowDetailTemplate}" >
    <DataGrid.RowHeaderTemplate>
        <DataTemplate>
            <ToggleButton x:Name="RowHeaderToggleButton"
                Click="ToggleButton_Click"
                Cursor="Hand" />
        </DataTemplate>
    </DataGrid.RowHeaderTemplate>
</DataGrid>

Thank you, from the introduction it looks exactly as what I'm looking for. :) — Cod Fish, Jun 18 '14 at 08:55

score 0 · Answer 2 · edited May 23 '17 at 11:57

I don't exactly understand what you mean behind the

Property of MasterContent and property of ExpandedDetails

You mean that your Control will have those Properties in code, or "Properties" as what they are supposed to show? Because in the first case you will have to set the ExpandedDetails on any change of focus - i think that's not what you really mean.

Usually such behaviour(as it was already answered) does not require any specific control - you could just use container control(LisBox etc.) with custom data templates.

And in such template you could either use some expanding container like Expander or implement your own triggers on datatemplate(here are some examples WPF Trigger for IsSelected in a DataTemplate for ListBox items).

With such triggers you could even implement some lazy UI initialization of the ExpandedDetails(with Visibility the controls will be in the UI tree for each of your Orders). Just don't bother yourself with such intricacies until your project will really need it. There are better ways to reduce performance problems(like already embedded UI Virtualization - Virtualizing an ItemsControl?).

MasterDetails Custom Control - WPF

2 Answers2