Silverlight + new WCF instance chess main interface-Checkerboard (22)

Online Demo address: Silverlight + WCF novice instance chess Online Demo

 

In this section, we will deploy the Index. xaml interface.

First, let's define the global width and height: 1000*620 [The number is almost enough]

A bunch of codes are generated automatically, but they only change two numbers. If you don't say that everyone knows what to change.

<UserControl x: Class = "NewChessProject. Index"
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"
Mc: Ignorable = "d"
D: DesignHeight = "620" d: DesignWidth = "1000">

<Grid x: Name = "LayoutRoot" Background = "White">
</Grid>
</UserControl>

 

Next we need to split the parts. If we have read the main interface, we will know several parts, such:

There are five zones in total. I create a user control for each zone and load it into it.

How to load it? How many user controls are created and dragged in? It seems that it is not good.

So I don't know where to see this method for loading:

A: drag A Border control to the interface.

B: Write the following code in the background:

Control A chessControl = new control ();
ChessBoard. Child = chessControl;

 

In this way, the user control can be dynamically loaded, which is a little Literal control in Asp.net.

 

Okay, so now we have to prepare several Border controls on the interface, and then name them:

Let's take a look at the playing area first. After the game is finished, the interface is blank. Don't worry about it first:

<Border BorderBrush = "Silver" BorderThickness = "1" Height = "544" HorizontalAlignment = "Left" Margin =, 522 "Name =" chessBoard "verticalignment =" Top "Width =" "> </Border>

 

Then we create a new area of chess controls:

You can add controls to the project. Right-click the project and choose add> Create item> User Control> enter name: Chess. xaml.

Let's go back to the Index. xaml. cs background and write the code for adding the control:

 

Public partial class Index: UserControl
{
Public Index ()
{
InitializeComponent ();
Chess chessControl = new Chess (); // instantiate the control
ChessBoard. Child = chessControl; // load control
}
}

 

 

If you want to see the effect, you can run the command, but the result is blank, because there is no new user control? Next, let it have the game.

Go to Chess. xaml, and delete the Grid and change it to Cavans:

 

<Canvas Background = "White" Height = "300" HorizontalAlignment = "Left" Margin = "400," Name = "canvasRoot" verticalignment = "Top" Width = "">
</Canvas>

 

 

We are not in a rush to change the width and height here, because we set the background based on the size of the Board.

Here, the blog site fails at, maybe this is the case, but QQ is still normal and Netease is also able to do it ):

 

Public Chess ()
{
InitializeComponent ();
ChessNewInstance. Chess chess = new ChessNewInstance. Chess (canvasRoot );
Chess. InitBoard ();
Chess. InitChessman ();
CanvasRoot. Width = chess. Board. Width;
CanvasRoot. Height = chess. Board. Height;
}

 

 

The above code is very familiar with it. In the past, we often used examples to show the board and chess pieces. The last two lines are set width and height.

Now you can run F5: log in to the room and go to the main page: A board is displayed (this is not a piece of film, and the blog garden cannot be accessed)

Well, here is a simple example. Next we will deploy the online user area in the next area [which is not in the order of graphs? Which is simple to come first?].