What would be smart design for multi-layer panels?

Question

I would like to create a lightweight Participant List / Editing application in one window.

My guess was that the best and easiest way to achieve this would be to have a part of the "listing" (mainly datagridview and some search materials) on the panel, and the "editing" (new member or change item) on the other, each panel hides another depending on what the user wants to do. This is what I must end up visually.

I thought about many ways to develop it, but no one seemed really good to me, mainly when it comes to creating an instance of the edit panel that passes the selected item to dgv list panel or the like. I still consider myself new to WPF, and I’m sure that the smartest solution is what didn’t occur to me.

Can't wait to read expert suggestions;)

Answer 1

You should think more about DataTemplate.

Separate two different views, for example. MemberListingView.XAML and MemberEditView.XAML. Create view models for each view.

To put everything together, follow the data template 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}" />

- , , .

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;
}