How to correctly setup datacontext within WPF C#

Question

I have the following question:

I'm having a couple of Pages, one of the pages is called: StartschermCursussen.xaml and is used in a frame inside my MainWindow.xaml.

MainWindow.xaml

<Window x:Class="ClientWPF.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:ClientWPF"
        mc:Ignorable="d"
        Loaded="Window_Loaded"
        Title="MainWindow" Height="450" Width="800">
    <Grid>
        <Frame Name="sideWindow" HorizontalAlignment="Left" Width="50" Panel.ZIndex="50"/>
        <Frame Name="mainWindow" Margin="50,0,0,0" Source="Pages/StartschermCursussen.xaml" NavigationUIVisibility="Hidden"/>
    </Grid>
</Window>

Inside my StartschermCursussen.xaml.cs I'm having my Datacontext that is connected to an 'Container' class that holds references and has properties that are connected to my ViewModels.

StartschermCursussen.xaml.cs

public partial class StartschermCursussen : Page
{
      public StartschermCursussen()
      {
          InitializeComponent();
          KeepAlive = true;
          DataContext = Container;
      }

      public ItemsContainer Container { get; set; }
}

Container class

public class ItemsContainer
{
    public FilterItem FilterItem { get; set; }
    public List<CourseDTO> courses { get; set; } = new List<CourseDTO>();
    public List<IconItem> IconList { get; set; } = new List<IconItem>();
    public ItemsContainer()
    {
       //One of my ViewModels
       FilterItem = new FilterItem();
    }
}

Now, I'm having another page called DetailsCursus.xaml.cs. In that page I'm trying to get specific properties from my ViewModels through databinding in xaml to apply changes to them and show them to the end-user etc. One way how I did this is through constructor overloading inside my StartschermCursussen.xaml.cs.

StartschermCursussen.xaml.cs (Sending data from DataContext -> DetailsCursus.xaml.cs)

 private void menuItemDetails_Click(object sender, RoutedEventArgs e)
 {
        MenuItem menuItem = (MenuItem)sender;
        var contextMenu = (ContextMenu)menuItem.Parent;
        var item = (DataGrid)contextMenu.PlacementTarget;
        CourseDTO toDeleteFromBindedList = (CourseDTO)item.SelectedCells[0].Item;

        //Here I'm sending the data through constructor
        this.NavigationService.Navigate(new DetailsCursus(toDeleteFromBindedList, Container.IconList));
}

DetailsCursus.xaml.cs

 public DetailsCursus(CourseDTO data, List<IconItem> iconList)
 {
     object[] items = { data, iconList };
     InitializeComponent();
     DataContext = items;
 }

In the above code snippet I put incoming data in an Array and then linked it to my Datacontext. But I have the feeling that this is not the correct way to get data from your Datacontext.

The code snippet below shows how I get to the data in the Datacontext and I show this in the ItemSource of a ComboBox. It works and returns me the results but I feel like I'm doing this the wrong way.

DetailsCursus.xaml

<ComboBox Width="100" Height="30" Grid.Row="1" HorizontalAlignment="Right" Margin="5" ItemsSource="{Binding Path=[1]}" DisplayMemberPath="IconName" />

Would someone please explain to me how to correctly use the Datacontext within the WPF Pages.

Any kind of help is greatly appreciated!

score 1 · Answer 1 · answered Dec 04 '20 at 19:02

object[] is certainly unconventional choice for DataContext.

You can create a special named class for DetailsCursus view (pretty common, must-do in MVVM pattern), which will do wonders to readability:

 public class DetailsCursusViewModel
 {
     public CourseDTO SelectedCourse { get; set; }
     public List<IconItem> IconList { get; set; }
 }

 private void menuItemDetails_Click(object sender, RoutedEventArgs e)
 {
    var menuItem = (MenuItem)sender;
    var contextMenu = (ContextMenu)menuItem.Parent;
    var dg = (DataGrid)contextMenu.PlacementTarget;
    var toDeleteFromBindedList = (CourseDTO)dg.SelectedCells[0].Item;

    var viewModel = new DetailsCursusViewModel
    {
        SelectedCourse = toDeleteFromBindedList ,
        IconList = Container.IconList
    };
    var page = new DetailsCursus(viewModel);
    this.NavigationService.Navigate(page);
 }

 public DetailsCursus(DetailsCursusViewModel viewModel)
 {
     InitializeComponent();
     DataContext = viewModel; // fix bindings after this!
 }

I also suggest to explore mvvm pattern in WPF, and also check alternatives for navigation (UserControl VS Page in WPF)

This is the explanation I needed! Thanks you sir @ASh! – Maurice Pheyton Dec 04 '20 at 20:01 — Maurice Pheyton, Dec 04 '20 at 20:01

How to correctly setup datacontext within WPF C#

1 Answers1