1 界面展示前端代码,写入
<Window x:Class="WpfApp1.移动方块.WindowModelBox"
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"
xmlns:local="clr-namespace:WpfApp1.移动方块"
mc:Ignorable="d"
Title="WindowModelBox" Height="450" Width="800" KeyDown="Grid_KeyDown">
<!--hetu 洛书a 设计页面-->
<Grid ShowGridLines="True" Background="Teal" Name="gridContent" >
<!--1
使用Grid.ColumnDefinitions 将grid分成三列
-->
<Grid.ColumnDefinitions>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition> </RowDefinition>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
<Border Name="b1" Background="Transparent" Grid.Row="0" Grid.Column="0"></Border>
<Border Name="b2" Background="white" Grid.Row="0" Grid.Column="1"></Border>
<Border Name="b3" Background="Transparent" Grid.Row="0" Grid.Column="2"></Border>
<Border Name="b4" Background="Transparent" Grid.Row="1" Grid.Column="0"></Border>
<Border Name="b5" Background="Transparent" Grid.Row="1" Grid.Column="1"></Border>
<Border Name="b6" Background="Transparent" Grid.Row="1" Grid.Column="2"></Border>
<Border Name="b7" Background="Transparent" Grid.Row="2" Grid.Column="0"></Border>
<Border Name="b8" Background="Transparent" Grid.Row="2" Grid.Column="1"></Border>
<Border Name="b9" Background="Transparent" Grid.Row="2" Grid.Column="2"></Border>
</Grid>
</Window>
2 C# 逻辑类处理,跟业务类基本一样。变化的是业务场景而已。
using System;
using System.Collections.Generic;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Shapes;
namespace WpfApp1.移动方块
{
/// <summary>
/// WindowModelBox.xaml 的交互逻辑
/// </summary>
public partial class WindowModelBox : Window
{
public WindowModelBox()
{
InitializeComponent();
}
private void Grid_KeyDown(object sender, KeyEventArgs e)
{
// 首先判断按键的方位 比如上下左右
// 向上移动 移到格子每次减去3 向下移动 移到格子每次加3
// 向左移动 每次减去2 向右移动 每次加1
//1 获取白色的border 元素 用对象点 子元素去获取。固定方式? gridContent.Children
UIElementCollection childrenobj= gridContent.Children;
// 变量定义 ,设置为Null first 使用
Border curBorder =null;
// 循环遍历,基础不知道,自个多看看去啊!
// 遍历对象里面的数据-源
for (int i = 0; i < childrenobj.Count; i++)
{
// 0.1 进行逻辑处理,都变成透明颜色
// 嵌套的if判断用法
if(childrenobj[i] is Border )
{ // 嵌套加嵌套的判断,很复杂了呢。。。这用法
if(((childrenobj[i] as Border).Background
as SolidColorBrush).Color.Equals(Colors.White))
{
// 找到他了,获取name
curBorder = childrenobj[i] as Border;
}
// 背景颜色变成透明色
(childrenobj[i] as Border).Background = new SolidColorBrush(Colors.Transparent);
}
}
//找到数据格子后, 获取格子名字
string name =curBorder.Name;
int index = Convert.ToInt32(name.Replace("b", ""));
// 行为判断的内在逻辑所在。
if (e.Key.Equals(Key.Up)) // 上
{ // 减法运算,+ bool 判断?
index = index - 3 >= 1 ? index - 3 : index; // 三元表达式使用?
}
else if (e.Key.Equals(Key.Down)) // 下 走逻辑
{ // 这里是写死的数据,数据9
index = index + 3 <= 9 ? index + 3 : index;
}
else if (e.Key.Equals(Key.Left)) // 左键
{
index = index - 1 >= 1 ? index - 1 : index;
}
else if (e.Key.Equals(Key.Right)) // 右键 走 依次
{ // 不能大于他的最大下标
index = index +1 <= 9 ? index + 1 : index;
}
object controlobj = gridContent.FindName("b" + index);
if(controlobj != null)
{ // 1.3 把移动后的控件,变成了白色。
(controlobj as Border).Background = new SolidColorBrush(Colors.White);
}
}
}
}
3 主项目,修改启动项目文件夹就可以了
<Application x:Class="WpfApp1.App"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:WpfApp1"
StartupUri="移动方块/WindowModelBox.xaml">
<Application.Resources>
</Application.Resources>
</Application>
4 演示效果
短视频
按着键盘方向键,移动格子盒子效果