WPF 用户控件嵌套控件 - 从用户控件切换用户控件

Question

I'm currently developing an application with WPF in Visual Studio as a front-end for a MySQL database which is then supposed to be used in a school to make the organisation of hardware etc. a bit more easy. I'm totally new to C# and WPF and therefore now ran into an issue I was not able to solve in the last hours. The UI consists of a Window with a Navbar etc. and a big Frame/Grid which is used to display the current UserControl.

Clicking onto a Button in my Mainwindow's navbar does trigger an Event which then switches the UserControl without any problems simply with these lines:

ContentFrame.Children.Clear();  //ContentFrame is a simple Grid which I am using ot display the UserControls
ContentFrame.Children.Add(new UserControlDashboard());  //UserControlDashboard is the Class of one of my UserControls

I do not know if this is really the best way to implement that (since it always reloads the UserControl), but at least it is simple and working.

The problem is, that I am only able to Switch the UserControls via the Mainwindow Class. But I want to be able to switch the UserControl from within one of the UserControls. (Eg One of my UserControls shows a dataGrid with all the data from one of my db tables. By double clicking on one of these rows I want to be able to switch the current UserControl with that table to a different one.)

But I can't really figure out how I can do that. I've done some research but only found solutions which consisted of douzens of different classes with lots of different Eventhandlers etc. and unfortunately I couldn't really figure out how that implementation worked. And it was also limited to 2 UserControls.

Is there any way I can implement that with a reasonable amount of time? I've read that it might be possible to do by using Routed Events? Since I'm new to C# I am totally new to events, dispatchers etc. and therefore have a hard time with all that event-based stuff. :D

Thanks :)

Answer 1

A simple solution would be to use data binding:

MainWindow.xaml

<Window>
  <StackPanel>
    <SwitchingControl x:Name="BindingSourceControl" />
    <ContentControl x:Name="ContentFrame" 
                    Content="{Binding ElementName=BindingSourceControl, Path=SelectedControl}" />
  </StackPanel>
</Window>

SwitchingControl.xaml.cs

partial class SwitchingControl : UserControl
{
  public static readonly DependencyProperty SelectedControlProperty = DependencyProperty.Register(
    "SelectedControl",
    typeof(Control),
    typeof(SwitchingControl),
    new PropertyMetadata(default(Control)));

  public Control SelectedControl
  {
    get => (Control) GetValue(SwitchingControl.SelectedControlProperty);
    set => SetValue(SwitchingControl.SelectedControlProperty, value);
  }

  // Dictionary to store reusable controls
  private Dictionary<string, Control> ControlMap { get; set; }

  public SwitchingControl()
  {
    this.ControlMap = new Dictionary<string, Control>() 
    { 
      { nameof(UserControlDashboard), new UserControlDashboard()) }
    };
  }

  // TODO::Invoke when a DataGrid row was double clicked
  private void OnNewControlSelected(string selectedControlKey)
  {
    if (this.ControlMap.TryGetValue(selectedControlKey, out Control selectedControl)
    {
      this.SelectedControl = selectedControl;
    }
  }
}

A more advanced solution would involve DataTemplate and different view models or data models, which specific type would map to a specific control. The control are then displayed, when a model is added eg to a ContentPresenter , which would automatically apply the correct DataTemplate in order to visualize the model data.