WPF项目-按着键盘方向键，移动格子盒子效果

 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">
    
    <Grid ShowGridLines="True" Background="Teal" Name="gridContent" >
        
        
        
        <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.移动方块
{
    /// 
    /// WindowModelBox.xaml 的交互逻辑
    /// 
    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 主项目，修改启动项目文件夹就可以了

               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">
   
         
   

 4 演示效果

    短视频