Malakbel Malakbel -4 years ago 275
C# Question

WPF C#: MVVM - Passing on the Sudoku from ViewModel -> View

So, I have a question about MVVM+WPF: Currently, I have a Sudoku working and I managed to generate a Sudoku the way I like to have one in WPF.

Sudoku WPF Image from my Application

enter image description here

The problem is that the Grid is being created by some code I've written in the MainWindow.xaml.cs file and I think it should be in a ViewModel. Code in question in the MainWindow.xaml.cs:

namespace SodukoWPF
{
/// <summary>
/// Interaction logic for MainWindow.xaml
/// </summary>
public partial class MainWindow : Window
{
private SudokoGameDesu sudokuAdapter;

public MainWindow()
{
InitializeComponent();
sudokuAdapter = new SudokoGameDesu();


CreateDynamicWPFGrid();
}

private void CreateDynamicWPFGrid()
{
// Create 9 rows & columns
for (int i = 0; i < 9; i++)
{
// Create column
sudokuGrid.ColumnDefinitions.Add(new ColumnDefinition());
... etc.


Imho, CreateDynamicWPFGrid() should be moved to my ViewModel. At least that's where I think this code fits the most.

namespace SodukoWPF.ViewModels
{
public class SudokoPresenter : INotifyPropertyChanged
{
public event PropertyChangedEventHandler PropertyChanged;

// TODO get .xaml.cs code in here

public SudokoPresenter()
{
//CreateDynamicWPFGrid();
}


In the CreateDynamicWPFGrid() method I use sudokuGrid, a field from my .xaml so my code knows to which grid.Children my textBoxes/Blocks should be added too.

<Grid x:Name="contentGrid" HorizontalAlignment="Left" Height="570" Margin="0,0,0,0" VerticalAlignment="Top" Width="500">
<Grid x:Name="sudokuGrid" HorizontalAlignment="Left" Height="420" Margin="0,50,0,0" VerticalAlignment="Top" Width="488">
</Grid>


Now, this grid is not accessible from outside the .xaml.cs code (of course). So at this point, my approach of generating my own xaml (because, I don't think this can be done through only xaml + bindings) is giving me some question marks whether I'm applying MVVM right or not.

Theoretically the ViewModel should not know about the View, but I still think that the generated .xaml should be in my SudokuPresenter - ViewModel and not in my .xaml.cs which preferably should just be empty I think.

I also still haven't figured out how to get the SudokuGrid to my ViewModel, but chances are my approach to MVVM is faulty to begin with or misunderstood on my part.

Hope someone can help me out and this post or more or less makes sense on my dilemmas =)

(MVVM approach in regards to generating my own .xaml + how to access sudokuGrid if I'm doing it more or less right)

Answer Source

The concept of MVVM (and wpf in general) is slightly different that what you had shown.

Let me provide you with a breakdown of how each element of MVVM should function in your case:

  1. The Model The model is pretty much your data holders. It's objects, that contain the information about crucial elements of your program, that will further be used and processed in ViewModel(s).

In your case, that would be, in the most basic case, the cell Class and the Grid class. The Cell class would contain basic cell info: value, location. The Grid class would contain a collection of cells, as well as methods for ex. For retrieving cell x that's left to cell y, Retrieving cells that are contained in a box(the 3x3 sudoku square), etc.

  1. The ViewModel

This would contain your program logic. Now, don't get it wrong - this should ONLY contain things like what happens when you input a value into the cell in the GUI - for example run the evaluator for the correctness of the whole grid.

This should also contain the Grid class itself - so it can be referenced by the GUI.

  1. The View:

This is mostly your XAML. As far as you don't dwelve too much into things like IoC containers, dependency injection (which I think you shouldn't for your first actual MVVM program), your xaml.cs (code-behind of view) will in most cases stay without any change.

The view could contain a UniformGrid, that has a certain template for how each cell will look like, and that uniformgrid would be bound to the Collection of cells - that would sit in your Grid model class.

Now, most people without MVVM background will go like: "But do I get to name them? How will I reference those abstract, dynamically created cell classes?"

This way, the UI would create all cells on its own, and each of them would be assigned a certain cell class automatically, so it WILL know that the value you just input will be stored in the X instance of the cell class.

Your goal is to devise methods/class structure, that will allow you to do any desired operation easily and "indirectly" (ex. A method that sits inside the Game class and checks whether all cells in a box (3x3 Grid) are input according to the rules of sudoku.

I hope you grasped the concept, Feel free to ask any questions, and I will be happy to produce example codes to explain these certain concepts better.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download