Silverlight+WCF 新手实例 象棋 主界面-棋谱-布局写谱(三十六)

本文主要是介绍Silverlight+WCF 新手实例 象棋 主界面-棋谱-布局写谱(三十六),希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

2019独角兽企业重金招聘Python工程师标准>>> hot3.png

在线演示地址:Silverlight+WCF 新手实例 象棋 在线演示

 

这节,我们要实现棋谱列界面布局和棋谱的获取,先上一张久远的图片:

看清楚了,到本节为止,除了第三区棋谱区,其它的区域我们都已完成了,所以,我们抓紧时间,赶紧吧:

 

好了,先布局,和以往一样:

 

1:界面拖一个Border到Index.xaml,到第三区的位置,设置好宽和高[212*602]:

05233646_eG7v.gif
< UserControl ...省略...   d:DesignHeight = " 620 "  d:DesignWidth = " 1000 " >
    
    
< Grid x:Name = " LayoutRoot "  Background = " White " >
       
       
// ...省略之前四个Border...
         < Border BorderBrush = " Silver "  BorderThickness = " 1 "  Height = " 602 "  HorizontalAlignment = " Left "  Margin = " 538,12,0,0 "  Name = " chessManualBoard "  VerticalAlignment = " Top "  Width = " 212 "   />
    
</ Grid >
</ UserControl >

 

 

2:新建一个用户控件:就叫:ChessManual.xaml

3:后台动态加载控件了,后台代码就两行,看今天新加的那

05233646_eG7v.gif
public   partial   class  Index : UserControl
    {
        
// ..省略N行...
        ChessManual chessManualControl;
        
public  Index()
        {
           
// ..省略N行...
           chessManualControl  =   new  ChessManual(); // 今天新加的
            chessManualBoard.Child  =  chessManualControl;
          
// ..省略N行...
        }

        
// ..省略N行...
    }

 

 

OK,控件加载完了。接下来的任务就是要实现ChessManual控件里的内容显示了:

 

4:接下来我们回到ChessManual.xaml里,改一下总体宽和高为212*602:

< UserControl ...省略一堆...  d:DesignHeight = " 602 "  d:DesignWidth = " 212 " >
    
    
< Grid x:Name = " LayoutRoot "  Background = " White " >

    
</ Grid >
</ UserControl >

 

我们往里添加界面布局:

05233646_eG7v.gif
< Grid  x:Name ="LayoutRoot"  Background ="White" >
        
< ListBox  Height ="520"  HorizontalAlignment ="Left"  Name ="lbChessManual"  VerticalAlignment ="Top"  Width ="190"  Margin ="10,10,0,0"   />
        
< Button  Content ="回放"  Height ="23"  HorizontalAlignment ="Right"  Margin ="0,541,12,0"  Name ="btnPlay"  VerticalAlignment ="Top"  Width ="53"     />
        
< Slider  Height ="23"  HorizontalAlignment ="Left"  Margin ="12,541,0,0"  Name ="slPlayerInternal"  VerticalAlignment ="Top"  Width ="56"  SmallChange ="0.5"    Maximum ="9"  LargeChange ="1"   />
        
< TextBox  IsEnabled ="false"  Height ="23"  HorizontalAlignment ="Right"  Margin ="0,541,110,0"  Name ="txtValue"  Text ="0"  VerticalAlignment ="Top"  Width ="15"   />
        
< TextBlock  Height ="23"  HorizontalAlignment ="Center"  Margin ="108,545,70,34"  Name ="textBlock1"  Text ="秒/步"  VerticalAlignment ="Center"  Width ="34"   />
    
</ Grid >

 

代码看起来不整洁,是有点乱,布完局后的结果就是上面图的第三区了,不另外上图了:

至此,布局就完成了,接下来,我们要进入和棋谱相关的操作了服务端操作了:

 

在双方下棋的过程中,我们不断交互的传送棋步,同时,服务端也记录了每一步的棋步信息;

这节,我们将通过棋步生成棋谱,同时和棋步一起传递。

有一些基础知识要知道,就是棋谱是怎么写出来的?这个,大伙自己百度看看了,不做介绍了!

这里,我封装成一个方法,附加在Chess象棋类里面:

首先呢,棋谱里的数字,一方是数字,一方是中文数字,所以先来一个方法把数字转中文数字:

05233646_eG7v.gif
private string GetGBKNum(int num)
        {
            switch (num)
            {
                case 1:
                    return "一";
                case 2:
                    return "二";
                case 3:
                    return "三";
                case 4:
                    return "四";
                case 5:
                    return "五";
                case 6:
                    return "六";
                case 7:
                    return "七";
                case 8:
                    return "八";
                case 9:
                    return "九";
                default:
                    return "XX";
            }
        }

 

有了这个方法,接着我们实现写棋谱:

05233646_eG7v.gif
  //写棋谱
        public string WriteManual(Chessman chessman, Point moveTo)
        {
            string manual = (chessman.Color == Colors.Red ? "红方:" : "黑方:") + chessman.Name;
            int moveX = 9 - (int)chessman.MovePoint.X;
            int toX = 9 - (int)moveTo.X;
            int value = (int)chessman.MovePoint.Y - (int)moveTo.Y;
            manual += chessman.Color == Colors.Red ? GetGBKNum(moveX) : moveX.ToString();
            manual += value == 0 ? "平" : ((value > 0) ? "进" : "退");
            if (value != 0)
            {
                switch (Action.Rule.GetChessTypeByName(chessman.Name))
                {
                    case ChessType.Bing:
                    case ChessType.Che:
                    case ChessType.Jiang:
                    case ChessType.Pao:
                        toX = Math.Abs(value);
                        break;
                }
            }
            manual += chessman.Color == Colors.Red ? GetGBKNum(toX) : toX.ToString();
            return manual;
        }

 

上面这段函数可能没那么好理解,大伙需要先理解棋谱的基础知识,才能好好的理解这段代码,不理解就直接使用跳过也行了;

反正一步棋就产生一行中文说明的棋谱信息。

 

有了写棋谱函数,我们在哪里使用呢?当然是回到我们提交棋步到服务端那时了,回到Chess.xaml.cs里:

05233646_eG7v.gif
void  Action_HelpMoveStepEvent(ChessNewInstance.Chessman chessman, Point moveTo)
        {
            MoveStep step 
=   new  MoveStep();
            step.FromX 
=  chessman.MovePoint.X;
            step.FromY 
=  chessman.MovePoint.Y;
            step.ToX 
=  moveTo.X;
            step.ToY 
=  moveTo.Y;
            step.ColorValue 
=  chessman.Color  ==  Colors.Red  ?   1  :  2 ;

            step.Name 
=  chess.WriteManual(chessman, moveTo); // 这里只加一行代码
           
            App.player.Step 
=  step; // 附加棋步
            App.client.MoveStepAsync(App.player);
            chess.IsCanMove 
=   false ;
        }

 

在这里,我们只添加了一行代码,把棋谱放到棋步的Name里面,然后随便棋步一起过去了。

 

OK,接着我们回到接收棋步的地方,同样的,我们收到棋步后,把棋步的Name显示到棋谱区就行了。

我们接收棋步是在Chess.xaml.cs里,可是我们要显示的棋谱区却在我们新添加的ChessManual.xaml里;

所以,我们需要在控件间传递消息,所以,我们又要请出委托了:

在Chess.xaml.cs里添加委托,添加两行,然后在接收到棋步的最后,调用一下就OK了,参数就是传递棋步了:

05233646_eG7v.gif
public   partial   class  Chess : UserControl
    {
        
public   delegate   void  HelpSetChessManual(MoveStep step);
        
public   event  HelpSetChessManual HelpSetChessManualEvent;
        ChessNewInstance.Chess chess;
// 这里我们同时把它提到全局对象
         public  Chess()
        {
           
// ...省略N行...
        }

        
// ...省略N行...

        
void  client_NotifyMoveStepReceived( object  sender, NotifyMoveStepReceivedEventArgs e)
        {
           
if  (App.player.ID  !=  e.player.ID) // 非自己
            {
                
// ...省略N行...
            }
            HelpSetChessManualEvent(e.player.Step);
// 这里调用
        }
        
// ...省略N行...

 }

 

好了,我们的Index.xaml.cs又要干活了:

先和棋谱控件约好接口调用先,所以我们在棋谱区添加一个方法:

05233646_eG7v.gif 代码
public   partial   class  ChessManual : UserControl
    {
        
public  ChessManual()
        {
            InitializeComponent();
        }
        
public   void  Add(GameService.MoveStep step)
        {
            lbChessManual.Items.Add(step.ID 
+   " : "   +  step.Name);
            lbChessManual.SelectedIndex 
=  lbChessManual.Items.Count  -   1 ;
            lbChessManual.UpdateLayout();
            lbChessManual.ScrollIntoView(lbChessManual.SelectedItem);
        }
    }

 

是不是发现和Chat聊天区的极其相似,其实就是代码Copy一下,改改名称也就是了。

好了,接口也有了,我们回到Index.xaml.cs里做一下功夫:

 

05233646_eG7v.gif
public   partial   class  Index : UserControl
    {
       
        
// ...省略N行...
         public  Index()
        {
            
// ...省略N行...            
    chessControl.HelpSetChessManualEvent += new Chess.HelpSetChessManual(chessControl_HelpSetChessManualEvent);
        }

        
void  chessControl_HelpSetChessManualEvent(GameService.MoveStep step)
        {
            chessManualControl.Add(step);
        }

        
// ...省略N行...
    }

 

 

OK,至此,我们布局完了,写谱也有了,接谱也有了,该F5看下效果了:

一切正常,上图:

 

 

 

 

 

 

 

看到了吧,双方每走一步都有棋谱显示,只是棋谱,我们还没完?观众进来时,怎么还原棋谱?棋谱又该怎么回放?我们下节解说

本节就点到为止。

转载于:https://my.oschina.net/secyaher/blog/274293

这篇关于Silverlight+WCF 新手实例 象棋 主界面-棋谱-布局写谱(三十六)的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/333845

相关文章

HarmonyOS学习(七)——UI(五)常用布局总结

自适应布局 1.1、线性布局(LinearLayout) 通过线性容器Row和Column实现线性布局。Column容器内的子组件按照垂直方向排列,Row组件中的子组件按照水平方向排列。 属性说明space通过space参数设置主轴上子组件的间距,达到各子组件在排列上的等间距效果alignItems设置子组件在交叉轴上的对齐方式,且在各类尺寸屏幕上表现一致,其中交叉轴为垂直时,取值为Vert

【机器学习】高斯过程的基本概念和应用领域以及在python中的实例

引言 高斯过程(Gaussian Process,简称GP)是一种概率模型,用于描述一组随机变量的联合概率分布,其中任何一个有限维度的子集都具有高斯分布 文章目录 引言一、高斯过程1.1 基本定义1.1.1 随机过程1.1.2 高斯分布 1.2 高斯过程的特性1.2.1 联合高斯性1.2.2 均值函数1.2.3 协方差函数(或核函数) 1.3 核函数1.4 高斯过程回归(Gauss

C++操作符重载实例(独立函数)

C++操作符重载实例,我们把坐标值CVector的加法进行重载,计算c3=c1+c2时,也就是计算x3=x1+x2,y3=y1+y2,今天我们以独立函数的方式重载操作符+(加号),以下是C++代码: c1802.cpp源代码: D:\YcjWork\CppTour>vim c1802.cpp #include <iostream>using namespace std;/*** 以独立函数

实例:如何统计当前主机的连接状态和连接数

统计当前主机的连接状态和连接数 在 Linux 中,可使用 ss 命令来查看主机的网络连接状态。以下是统计当前主机连接状态和连接主机数量的具体操作。 1. 统计当前主机的连接状态 使用 ss 命令结合 grep、cut、sort 和 uniq 命令来统计当前主机的 TCP 连接状态。 ss -nta | grep -v '^State' | cut -d " " -f 1 | sort |

Java Websocket实例【服务端与客户端实现全双工通讯】

Java Websocket实例【服务端与客户端实现全双工通讯】 现很多网站为了实现即时通讯,所用的技术都是轮询(polling)。轮询是在特定的的时间间隔(如每1秒),由浏览器对服务器发 出HTTP request,然后由服务器返回最新的数据给客服端的浏览器。这种传统的HTTP request 的模式带来很明显的缺点 – 浏 览器需要不断的向服务器发出请求,然而HTTP

lvgl8.3.6 控件垂直布局 label控件在image控件的下方显示

在使用 LVGL 8.3.6 创建一个垂直布局,其中 label 控件位于 image 控件下方,你可以使用 lv_obj_set_flex_flow 来设置布局为垂直,并确保 label 控件在 image 控件后添加。这里是如何步骤性地实现它的一个基本示例: 创建父容器:首先创建一个容器对象,该对象将作为布局的基础。设置容器为垂直布局:使用 lv_obj_set_flex_flow 设置容器

828华为云征文|华为云Flexus X实例docker部署rancher并构建k8s集群

828华为云征文|华为云Flexus X实例docker部署rancher并构建k8s集群 华为云最近正在举办828 B2B企业节,Flexus X实例的促销力度非常大,特别适合那些对算力性能有高要求的小伙伴。如果你有自建MySQL、Redis、Nginx等服务的需求,一定不要错过这个机会。赶紧去看看吧! 什么是华为云Flexus X实例 华为云Flexus X实例云服务是新一代开箱即用、体

Apache Tiles 布局管理器

陈科肇 =========== 1.简介 一个免费的开源模板框架现代Java应用程序。  基于该复合图案它是建立以简化的用户界面的开发。 对于复杂的网站,它仍然最简单,最优雅的方式来一起工作的任何MVC技术。 Tiles允许作者定义页面片段可被组装成在运行一个完整的网页。  这些片段,或Tiles,可以用于为了降低公共页面元素的重复,简单地包括或嵌入在其它瓦片,制定了一系列可重复使用

一款支持同一个屏幕界面同时播放多个视频的视频播放软件

GridPlayer 是一款基于 VLC 的免费开源跨平台多视频同步播放工具,支持在一块屏幕上同时播放多个视频。其主要功能包括: 多视频播放:用户可以在一个窗口中同时播放任意数量的视频,数量仅受硬件性能限制。支持多种格式和流媒体:GridPlayer 支持所有由 VLC 支持的视频格式以及流媒体 URL(如 m3u8 链接)。自定义网格布局:用户可以配置播放器的网格布局,以适应不同的观看需求。硬

【CSS in Depth 2 精译_023】第四章概述 + 4.1 Flexbox 布局的基本原理

当前内容所在位置(可进入专栏查看其他译好的章节内容) 第一章 层叠、优先级与继承(已完结) 1.1 层叠1.2 继承1.3 特殊值1.4 简写属性1.5 CSS 渐进式增强技术1.6 本章小结 第二章 相对单位(已完结) 2.1 相对单位的威力2.2 em 与 rem2.3 告别像素思维2.4 视口的相对单位2.5 无单位的数值与行高2.6 自定义属性2.7 本章小结 第三章 文档流与盒模型(已