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">
    <!--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 演示效果

    短视频

   

按着键盘方向键，移动格子盒子效果