俄罗斯方块是一个很经典的游戏，做一个UWP俄罗斯方块没有什么用，我想说的是移植，把经典游戏移植到UWP。

我的所有博客都是抄别人的，这个才是我自己写的。后台很多代码还是抄别人的，我想说的是我们之前有很多游戏，很多软件使用C或者C++之类的来写，或者C#，其实我们可以把之前的算法拿出来，转换为UWP的C#，这时大家会说，界面。对，界面我们没法直接移植，但是用XAML做一个界面很快的，那么现在的问题就是，我们如何使用之前的算法来用现在的界面。

简单的一个，我们可以使用绑定。

MVVM的知识，我觉得看到一篇文章，忘了出处，希望知道的小伙伴提醒。他说，MVVM的ViewModel作用是界面的抽象。我们不用理界面，因为界面总是改，所以我们需要一个抽象的界面，就是我们做的ViewModel，那么model做的就是算法，数据。Model不知道界面怎样，他需要知道数据。ViewModel不知道界面怎样，他知道界面需要什么。

MVVM的知识我说的不算对，也不算错，但从这个看也是可以。

为什么要分开view？

其实可以看下面的：

假设我们需要做一个软件，这个软件是举报恶意转载的功能，他能够在网上搜，找到那些恶意转载的网站。
先吐槽下中国学网那些**网站，全部东西都是转载的。吐槽下百度，搜索到的转载的都是前，找不到我的博客。

***图片停止解析***

还是360好，能找到

***图片停止解析***

我们软件开始界面

***图片停止解析***

发现我们需要改

***图片停止解析***

接着发现还是需要改

***图片停止解析***

如果我们和界面有联系，一改界面就需要改，那么这样我们开发将会很慢。

如果我们能使用抽象，那么界面怎么改，我们修改的也就界面。

上面图片来自：http://my.oschina.net/Android1989/blog/296850

我们需要做一个游戏，我们有了之前的算法，我拿到了一位大神：http://www.cnblogs.com/china_x01/p/5253556.html

看不懂他写的，问了一位大神，他帮我改了UWP，最后我也看不懂，他写的没有注释。

做一个俄罗斯方块算法简单，我们放在后面，现在先和大家说界面。

后面说的有些小白。

我们程序：

[list]
[*]view:MainPage.xaml
[*]viewModel.cs
[*]model.cs
[/list]

我们在界面

放一个Canvas

里面就是游戏

***图片停止解析***

因为我们需要游戏按键，所以我们需要一个TextBox

[mw_shl_code=csharp,true] <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<TextBox Margin="10,10,10,10" Width="1" Height="1" KeyDown="keydown"></TextBox>
<Canvas x:Name="canvas" Margin="10,10,10,10">

</Canvas>
</Grid>[/mw_shl_code]

每个方块

[mw_shl_code=csharp]
Rectangle[,] _rectangle
[/mw_shl_code]

我们需要设计高度宽度[mw_shl_code=csharp] size = 10;[/mw_shl_code]，其实这里可以根据你自己需要，每个方块的size可以设置大，可以看到上面的图，我的方块是有些小。

现在就是我们重要的绑定，我们有200个Rectangle，如果每个在xaml，写我觉得我没有这么时间，也容易错

所以我们在

[mw_shl_code=csharp,true]
for (int i = 0; i < view.row; i++)
{
for (int j = 0; j < view.col; j++)
{
_rectangle[i, j] = new Rectangle()
{
Width = size,
Height = size,
Fill = new SolidColorBrush(Colors.Gray),
Stroke = new SolidColorBrush(Colors.LightCoral),
AllowDrop = false,
CanDrag = false,
Margin = new Thickness(j * size, i * size, 0, 0)
};
canvas.Children.Add(_rectangle[i, j]);
}
}
[/mw_shl_code]

后台写了200个方块，就几句。我们给宽度高度、显示的颜色。显示颜色是没有方块显示的颜色，这里说的没有方块是说没有俄罗斯方块。

然后我们给每个方块边框，Stroke，他们的位置。

这样我们的屏幕就有了200个方块，但是放进去我们会发现和我们上面的图不同，因为宽度和高度不同

[mw_shl_code=csharp,true]
canvas.Width = size * view.col;
canvas.Height = size * view.row;
[/mw_shl_code]

这样就好了。

界面大概就需要做的就这样，算法很简单，放在最后。

我们有的model，有俄罗斯方块的初始方块、移动、变形、向下

他把所有的数据保存在一个数组grid_observable，类型grid里面有个rectangle，如果为0表示这个地方没有方块，如果为1表示有方块。

类型grid

[list]
[*]长
[*]宽
[*]是否有方块
[/list]

我们界面根据rectangle显示，如果有，那么显示灰色，没有显示白色。

因为我们view是不知道后台，所以这个显示需要viewModel把后台的rectangle变为颜色。

我们ViewModel把颜色放ObservableCollection<solid> solid_collection

需要把rectangle变为颜色

[mw_shl_code=csharp,true]
foreach (grid temp in _model.grid_observable)
{
if (temp.rectangle == 0)
{
solid_collection[temp.row * col + temp.col].solids = new SolidColorBrush(Colors.Gray);
}
else
{
solid_collection[temp.row * col + temp.col].solids = new SolidColorBrush(Colors.White);
}
}
[/mw_shl_code]

为了让solid一修改就可以告诉view

[mw_shl_code=csharp,true]
public class solid : notify_property
{
public solid(SolidColorBrush solid)
{
_solid = solid;
}

public SolidColorBrush solids
{
set
{
_solid = value;
OnPropertyChanged();
}
get
{
return _solid;
}
}
private SolidColorBrush _solid;
}
[/mw_shl_code]

因为每次写INotifyPropertyChanged要写很多，我们需要通知有很多 ，所以写notify_property

ViewModel能把后台的rectangle变颜色，那么我们view把颜色显示

我们刚才new 了200个Rectangle我们把他的颜色绑定ViewModel

如果使用xaml，我觉得我没法

那么我们在代码

[mw_shl_code=csharp,true]
_rectangle[i, j] = new Rectangle()
{
Width = size,
Height = size,
Fill = new SolidColorBrush(Colors.Gray),
Stroke = new SolidColorBrush(Colors.LightCoral),
AllowDrop = false,
CanDrag = false,
Margin = new Thickness(j * size, i * size, 0, 0)
};
Binding bind = new Binding()
{
Path = new PropertyPath("solid_collection[" + (i * view.col + j) + "].solids"),
Mode = BindingMode.OneWay
};
_rectangle[i, j].DataContext = view;
_rectangle[i, j].SetBinding(Shape.FillProperty, bind);
[/mw_shl_code]

绑定可以Binding bind = new Binding()
里面写路径，可以数组中Path = new PropertyPath("solid_collection[" + (i * view.col + j) + "].solids"),
其实Path写在new Binding(string Path)

我们可以设置Source = view

[mw_shl_code=csharp,true]
Binding bind = new Binding()
{
Path = new PropertyPath("solid_collection[" + (i * view.col + j) + "].solids"),
Mode = BindingMode.OneWay,
Source = view
};
[/mw_shl_code]

也可以_rectangle[i, j].DataContext = view;

写完我们需要

[mw_shl_code=csharp,true]
_rectangle[i, j].SetBinding(Shape.FillProperty, bind);
[/mw_shl_code]

如果我们后台是可以的，那么我们就能看到

***图片停止解析***

我想说的不是写俄罗斯，而是把之前的软件移植，我们可以把二维表，bool，表示为颜色，把颜色显示，我们有很多游戏都是可以这样，那么移植UWP简单，需要使用绑定，一个转换。

大神：可以直接绑定转换。

其实我是不喜欢直接绑定就转换，因为这样类很多，我们需要文件夹
Convert里面是转换类

我想说的不是做一个俄罗斯方块，而是把之前数据保存二进制矩阵的游戏移植到UWP思路。很简单不用多修改就可以使用，界面我们可以自己来写，只要绑定写了，那么就可以使用。