Tworzenie GUI szachowego w WPF

Question

Po pierwsze: przepraszamy, jeśli jest to duplikat postu. Sprawy stały się nieco mylące, ponieważ próbuję wysłać/zarejestrować się w tym samym czasie.

Zacząłem badać działanie silników szachowych UCI od prostego okna WPF, zrozumiałem, że silnik szachowy działa na innym wątku niż interfejs, i stworzyłem rozsądnie obsługiwany tekstowy interfejs.

Jestem teraz nieco bardziej ambitny i chciałbym rozpocząć budowanie GUI z elementami szachów, które będą napędzać ruchy gracza do silnika szachowego i reprezentować ruchy silnika na planszy. Dążę do przeciągania, a nie do klikania kwadratów.

Moje bieżące próby obejmują użycie przeciągalnych elementów sterujących użytkownika dla elementów na elemencie canvas . Byłbym bardzo zainteresowany, aby usłyszeć, jak inni, bardziej doświadczeni programiści WPF/.NET podchodzą do tego, ponieważ nie jestem całkowicie przekonany, że jestem na dobrej drodze.

Na przykład: czy lepiej byłoby użyć jednolitej siatki i przeciągnąć dane elementów między elementami potomnymi? Czy powinienem stworzyć abstrakcyjną klasę "kawałków", z której mogłyby czerpać takie pionki jak pionki? Tego typu rzeczy.

Jakieś myśli? To nie jest zadanie domowe, czy coś, tylko coś, na co mam ochotę w wolnym czasie jako ćwiczenie.

Answer 1

Zaimplementowałem szachownicę dla mojego systemu Silverlight Online Chess.

Oto jak to zrobiłem.

1. Zrobiłem oddzielna kontrola użytkownika na szachownicy
2. dodałem 8x8 siatki na kontrolę
3. Następnie dodano 64 Granice cieniowania każdy jeden inny kolor (ciemne kwadraty i lekkie kwadraty) upewnij się, aby wymienić każdy z nich. Każda z granic została umieszczona na siatce przy użyciu właściwości Grid.Row i Grid.Col.
4. W ramach każdej ramki dodałem obraz, który będzie zawierać obraz szachy.
5. Będziesz musiał kodować niektóre metody związane z ustawianiem obrazu na prawidłowy szachy w oparciu o bieżący stan gry.

6. każdy z obrazów otrzymał to samo zdarzenie (to ważne), wszystkie 64 połączenia tego samego kawałka kodu:

   MouseLeftButtonDown = "Image_MouseLeftButtonDown" mouseMove = "Image_MouseMove" MouseLeftButtonUp = "Image_MouseLeftButtonUp"

Ideą tych 3 wydarzeń jest to, że nagrywamy, gdy kliknę obraz (MouseLeftButtonDown), który daje mi pochodzenie kliknięcia, a następnie wywołuję zdarzenie, gdy mysz się porusza, co pozwala mi aktualizować ekran, gdy element się porusza, i ostatnie zdarzenie, które nagrywam, kiedy l i przycisk myszy (MouseLeftButtonUp), pozwala mi to uzyskać cel podróży i wysłać ruch do mojego silnika szachowego. Gdy ruch zostanie zarejestrowany przez silnik szachowy, po prostu przerysuję szachownicę.

private void Image_MouseLeftButtonDown(object sender, MouseButtonEventArgs e) 
{ 
    Image image = (Image)sender; 
    Border border = (Border)image.Parent; 

    image.CaptureMouse(); 
    isMouseCapture = true; 
    mouseXOffset = e.GetPosition(border).X; 
    mouseYOffset = e.GetPosition(border).Y; 

    var chessPiece = (Image) sender; 
    var chessSquare = (Border) chessPiece.Parent; 

    var row = (byte) (Grid.GetRow(chessSquare)); 
    var column = (byte) (Grid.GetColumn(chessSquare) - 1); 

    if (engine.HumanPlayer == ChessPieceColor.White) 
    { 
     SelectionChanged(row, column, false); 
    } 
    else 
    { 
     SelectionChanged((byte)(7 - row), (byte)(7 - column), false); 
    } 
} 

SelectionChanged to moja własna metoda rejestrowania wybranego przez użytkownika kwadratu źródłowego. isMouseCapture to także moja własna zmienna do nagrywania, gdy użytkownik rozpoczął drążenie utworu.

private void Image_MouseMove(object sender, MouseEventArgs e) 
{ 

    Image image = (Image)sender; 
    Border border = (Border)image.Parent; 


    if (!currentSource.Selected) 
    { 
     image.ReleaseMouseCapture(); 
     isMouseCapture = false; 

     translateTransform = new TranslateTransform(); 

     translateTransform.X = 0; 
     translateTransform.Y = 0; 

     mouseXOffset = 0; 
     mouseYOffset = 0; 
    } 



    if (isMouseCapture) 
    { 
     translateTransform = new TranslateTransform(); 

     translateTransform.X = e.GetPosition(border).X - mouseXOffset; 
     translateTransform.Y = e.GetPosition(border).Y - mouseYOffset; 

     image.RenderTransform = translateTransform; 

     CalculateSquareSelected((int)translateTransform.X, (int)translateTransform.Y, false); 


    } 
} 

W powyższym CalculareSquareSelected zamienia piksele przeniesiony do miejsca, gdzie myślę, że kawałek porusza się na pokładzie 8x8 szachowego. Na przykład powiedzmy, że przesunąłem o 100 pikseli, a kwadrat szachownicy ma tylko 50 pikseli, niż gdy przesunąłem 2 kwadraty szachownicy.

private void Image_MouseLeftButtonUp(object sender, MouseButtonEventArgs e) 
{ 
    if (translateTransform == null) 
    { 
     return; 
    } 

    Image image = (Image)sender; 

    image.ReleaseMouseCapture(); 
    isMouseCapture = false; 

    if (translateTransform.X > 10 || translateTransform.Y > 10 || translateTransform.X < -10 || translateTransform.Y < -10) 
    { 
     CalculateSquareSelected((int)translateTransform.X, (int)translateTransform.Y, true); 
    } 
    translateTransform = new TranslateTransform(); 

    translateTransform.X = 0; 
    translateTransform.Y = 0; 

    mouseXOffset = 0; 
    mouseYOffset = 0; 

    image.RenderTransform = translateTransform; 

} 

Jeśli masz jakiekolwiek pytania, skontaktuj się ze mną.