What would be a clever design for layered panels ?

Question

Hi there

I would like to design a light "members listing/editing" app in one and only window.

My guess was that the best and simplest way to achieve this would be to have the "listing" part (mostly a datagridview and some search stuff) on a panel, and the "editing" (new member or modify member) on another, each panel hiding the other depending on what User wants to do. That's what I have to end up with, visually speaking.

I've thought of many ways to design this but no one sounded actually good to me, mainly when it comes to instantiate the viewmodel of the editing panel passing the selected member in the dgv of the listing panel or stuff like that. I still consider myself a beginner at WPF and I'm sure the most clever solution is something that didn't come to my mind.

Can't wait to read expert's suggestions ;)

Answer 1

You should be thinking more in terms of DataTemplate.

Split your two different views up, eg. MemberListingView.XAML and MemberEditView.XAML. Create view-models for each view.

To put it all together, follow the data templating technique:

<DataTemplate DataType="{x:Type vm:MemberListingVM}">
    <AdornerDecorator>
        <views:MemberListingView />
    </AdornerDecorator>
</DataTemplate>
<DataTemplate DataType="{x:Type vm:MemberEditVM}">
    <AdornerDecorator>
        <views:MemberEditView />
    </AdornerDecorator>
</DataTemplate>

// Now use a content presenter
<ContentPresenter Content="{Binding CurrentView}" />

You should have somewhere in your context a property that specifies the current view that you need to show.

private ViewModelBase _currentView;
public ViewModelBase CurrentView
{
    get { return _currentView; }
    set
    {
        _currentView = value;
        RaisePropertyChanged("CurrentView");
    }
}

// ...
public void OnSelectedMemberChanged(Member member)
{
    // Depending on your logic
    // If some condition...
    CurrentView = new MemberEditVM(member);
    // else
    CurrentView = MemberListingVM;
}