C#•5mo ago

Chess Game with WPF in Visual Studio + MVVM

Hey! I'm making chess as mentioned in the title and i was wondering if someone wanted to help me with one small implementation of it. I thought you guys might know better than Chat GPT and it might be more fun. On the picture you have a rough estimate on how far i've gotten. What i want to do now is implement some light interaction with wpf. For example when i click the farmer i want it to highlight that tile the farmer is on and (later on) the available moves that it can do.
Is this perhaps something someone has some clue about?

17 Replies

MerinethOP•5mo ago

I have implemented the actual visual of the board in VIEW

MerinethOP•5mo ago

hyperator•5mo ago

i don't know if i'm lost in translation, but "farmer" would be piece?

Suiram1•5mo ago

Two years ago I made a chess game myself in WPF but without MVVM. To mark the fields you only need a way to access the fields I have used a canvas and could so multiply the coordinate with the field with. To create a marker you could use a rectangle and set color and opacity. For doing the highlight on a click it is clear that you can use the OnClick handler. To move figures you could use ´Element.CaptureMouse()´ and set the figure to the mouse's position which allows you to implement a smooth drag & drop interaction. But I've made it like this in a non-MVVM App and I doesn't really know whether its good to access UIElement directly from there.

Suiram1•5mo ago

If you want you can look at my code from the game. Properly isn't really good but it works. https://github.com/Suiram1701/Chess/blob/master/Chess.App%2FChess.xaml.cs#L105

GitHub

Chess/Chess.App/Chess.xaml.cs at master · Suiram1701/Chess

A simple chess game made for Window in .NET Framework 4.8.1 - Suiram1701/Chess

MerinethOP•4mo ago

By any chance, is someone awake for some quick help?

MerinethOP•4mo ago

When i run my game it just now turns white I tried to implement some png images as my chesspieces but i have no idea what's wrong

MerinethOP•4mo ago

this is how it looked before

MerinethOP•4mo ago

i just simply want to replace the chess pieces with custom png ones But i completely cooked it and it turned white Anyone? 😭

        private string GetPieceSymbol(ChessPiece piece)
        {
            return piece switch
            {
                Pawn p when p.Color == "White" => "♙",
                Pawn p when p.Color == "Black" => "♟",
                Rook r when r.Color == "White" => "♖",
                Rook r when r.Color == "Black" => "♜",
                Knight k when k.Color == "White" => "♘",
                Knight k when k.Color == "Black" => "♞",
                Bishop b when b.Color == "White" => "♗",
                Bishop b when b.Color == "Black" => "♝",
                Queen q when q.Color == "White" => "♕",
                Queen q when q.Color == "Black" => "♛",
                King k when k.Color == "White" => "♔",
                King k when k.Color == "Black" => "♚",
                _ => ""
            };
        }

        private string GetPieceSymbol(ChessPiece piece)
        {
            return piece switch
            {
                Pawn p when p.Color == "White" => "♙",
                Pawn p when p.Color == "Black" => "♟",
                Rook r when r.Color == "White" => "♖",
                Rook r when r.Color == "Black" => "♜",
                Knight k when k.Color == "White" => "♘",
                Knight k when k.Color == "Black" => "♞",
                Bishop b when b.Color == "White" => "♗",
                Bishop b when b.Color == "Black" => "♝",
                Queen q when q.Color == "White" => "♕",
                Queen q when q.Color == "Black" => "♛",
                King k when k.Color == "White" => "♔",
                King k when k.Color == "Black" => "♚",
                _ => ""
            };
        }

hyperator•4mo ago

i suppose you aren't keeping your source versioned

MerinethOP•4mo ago

As in the github source? It's currently a group project set to private If i fork it to my own repo, and then make my forked version public and share it with you, do i risk something with the original github repo? @many thingshttps://github.com/joal22za/chess_game/tree/main I forked it and made it public and up to date

hyperator•4mo ago

no i mean if you made changes to you code that you don't know how to revert but if you have it versioned as it seems then you should be able to reimplement them piece by piece to see what is breaking the graphics while developing for custom png chess pieces

MerinethOP•4mo ago

@many things I honeslty don't know why it doesn't work

MerinethOP•4mo ago

i can clearly see in the debug that the relative path for the black rook becomes gothic/br.png which is correct. The sln file for my chess game has a folder called gothic and then inside that is where the images reside

MerinethOP•4mo ago

but it results in this

MerinethOP•4mo ago

where nothing shows CAN ANOYNE HELP ME WITH RELATIVE/ABSOLUTE PATHS PRETTY PLEASE

        private string GetPieceImagePath(ChessPiece piece)
        {
            string colorPrefix = piece.Color == "White" ? "w" : "b";
            string pieceSuffix = piece switch
            {
                Pawn => "p",
                Rook => "r",
                Knight => "n",
                Bishop => "b",
                Queen => "q",
                King => "k",
                _ => ""
            };

            // Use your actual absolute path here
            string basePath = @"C:\Users\aljom\Documents\plugg\mjukvaruutveckling\Labb\chess_game\chess_game\Images\gothic";
            return System.IO.Path.Combine(basePath, $"{colorPrefix}{pieceSuffix}.png");
        }

        private string GetPieceImagePath(ChessPiece piece)
        {
            string colorPrefix = piece.Color == "White" ? "w" : "b";
            string pieceSuffix = piece switch
            {
                Pawn => "p",
                Rook => "r",
                Knight => "n",
                Bishop => "b",
                Queen => "q",
                King => "k",
                _ => ""
            };

            // Use your actual absolute path here
            string basePath = @"C:\Users\aljom\Documents\plugg\mjukvaruutveckling\Labb\chess_game\chess_game\Images\gothic";
            return System.IO.Path.Combine(basePath, $"{colorPrefix}{pieceSuffix}.png");
        }

        private void DrawPieces()
        {
            // Remove old piece images (but leave the background)
            var oldImages = boardGrid.Children.OfType<Image>().ToList();
            foreach (var img in oldImages)
            {
                boardGrid.Children.Remove(img);
            }

            for (int row = 0; row < 8; row++)
            {
                for (int col = 0; col < 8; col++)
                {
                    var piece = chessBoard.Board[row, col];
                    if (piece != null)
                    {
                        string imagePath = GetPieceImagePath(piece);

                        if (!File.Exists(imagePath))
                        {
                            MessageBox.Show($"Image not found: {imagePath}");
                            continue;
                        }

                        var image = new Image
                        {
                            Source = new BitmapImage(new Uri(imagePath, UriKind.RelativeOrAbsolute)),
                            Width = 50,
                            Height = 50,
                            HorizontalAlignment = HorizontalAlignment.Center,
                            VerticalAlignment = VerticalAlignment.Center
                        };

                        Grid.SetRow(image, row + 1);    // +1 if you have row/col labels
                        Grid.SetColumn(image, col + 1); // +1 if you have row/col labels

                        // Make sure the piece image renders on top of the square
                        Panel.SetZIndex(image, 1);

                        boardGrid.Children.Add(image);
                    }
                }
            }
        }

        private void DrawPieces()
        {
            // Remove old piece images (but leave the background)
            var oldImages = boardGrid.Children.OfType<Image>().ToList();
            foreach (var img in oldImages)
            {
                boardGrid.Children.Remove(img);
            }

            for (int row = 0; row < 8; row++)
            {
                for (int col = 0; col < 8; col++)
                {
                    var piece = chessBoard.Board[row, col];
                    if (piece != null)
                    {
                        string imagePath = GetPieceImagePath(piece);

                        if (!File.Exists(imagePath))
                        {
                            MessageBox.Show($"Image not found: {imagePath}");
                            continue;
                        }

                        var image = new Image
                        {
                            Source = new BitmapImage(new Uri(imagePath, UriKind.RelativeOrAbsolute)),
                            Width = 50,
                            Height = 50,
                            HorizontalAlignment = HorizontalAlignment.Center,
                            VerticalAlignment = VerticalAlignment.Center
                        };

                        Grid.SetRow(image, row + 1);    // +1 if you have row/col labels
                        Grid.SetColumn(image, col + 1); // +1 if you have row/col labels

                        // Make sure the piece image renders on top of the square
                        Panel.SetZIndex(image, 1);

                        boardGrid.Children.Add(image);
                    }
                }
            }
        }

this WORKS but i want it to be a relative path so other users can use it also !solved i solved it

Gaming

Programming

Chess Game with WPF in Visual Studio + MVVM

Did you find this page helpful?