【wpf】实现一个简单的连连看功能

 是自己刚学wpf,跟着网上教程学的

 第一步:设置Grid布局

准备做成6*6布局的样式

可以利用for循环动态实现(将Grid命名为MyGrid)

for (int i = 0; i < 6; i++)//用for循环将Grid分成6行6列
{
    RowDefinition row = new RowDefinition();
    ColumnDefinition col = new ColumnDefinition();
    MyGrid.RowDefinitions.Add(row);
    MyGrid.ColumnDefinitions.Add(col);
}

这个时候运行效果看不出来,因为grid的分割线默认不显示,可以将grid属性的ShowGridLines改为true,运行就可以看到如下效果

第二步:放置button控件

依然用for循环的方式,在每行每列放置一个Button控件

for (int i = 0; i < 6; i++)//将Button放入6行6列的布局中(一行一行循环,共6行)
{
    for (int j = 0; j < 6; j++)//每行6 列
    {
        Button button = new Button();
        button.Content = i + "," + j;//将每个button内容换成编号
        Grid.SetColumn(button, j);
        Grid.SetRow(button, i);
        MyGrid.Children.Add(button);
    }
}

动态增加行列控件的方法: 

Grid.SetRow(控件名, 行序号)
Grid.SetColumn(控件名, 列序号),

另一种写法是:
控件实例.SetValue(Grid.RowProperty, 行序号)
控件实例.SetValue(Grid.ColumnProperty, 列序号)

运行效果如下:

第三步:将button的内容换成随机图片

可以在生成button的时候就将其内容改为图片,所以直接在上一段for循环中添加内容

Random random = new Random();//先new一个随机数生成器(在for循环外)

for (int i = 0; i < 6; i++)//将Button放入6行6列的布局中(一行一行循环,共6行)
{
    for (int j = 0; j < 6; j++)//每行6 列
    {
        int imgName = random.Next(0,12);//一个生成0~12的随机数
        Image img = new Image();
        img.Source = new BitmapImage(new Uri("/images/" + imgName + ".png", UriKind.Relative));//随机选择图片


        Button button = new Button();
        button.Content = img;//将编号内容换成图片
        button.Background = Brushes.Transparent;//将按钮背景颜色改为透明
        Grid.SetColumn(button, j);
        Grid.SetRow(button, i);
        MyGrid.Children.Add(button);
        button.Click += btn_Click;//为按钮增加点击事件
    }
}

运行效果如下:


    

第四步:设计点击事件

首先,先定义一个类,给button增加属性,这个类可以在按钮生成的时候进行调用

public class MyButton : Button
{
    //Button标示,用于判断按钮是否为同一个
    public int Flog { get; set; }

    //Button所在行
    public int RowNum {  get; set; }

    //Button所在列
    public int ColNum { get; set; }

    public MyButton(int flog,int rownum,int colnum)
    {
        this.Flog = flog;
        this.RowNum = rownum;
        this.ColNum = colnum;
    }

}

可以开始写点击事件

MyButton button1;
MyButton button2;
int ClickCount = 0;//点击次数
void btn_Click(object sender, RoutedEventArgs e)
{
    ++ClickCount;
    if (ClickCount == 1)//点击一次
    {
        button1 = sender as MyButton;
    }
    else if (ClickCount == 2)
    {
        button2 = sender as MyButton;
        if (button1 != null && button2 != null)
        {
            if (button1.Flag == button2.Flag &&! (button1.ColNum == button2.ColNum && button1.RowNum == button2.RowNum))
            {
                button1.Visibility = Visibility.Hidden;//将两个按钮隐藏
                button2.Visibility = Visibility.Hidden;
            }
        }           
            button1 = null;
            button2 = null;
            ClickCount = 0;               
    }
}

就可以实现消除效果

最后,放一下总代码和图片包

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Linq;
using System.Security.Cryptography.X509Certificates;
using System.Text;
using System.Threading.Tasks;
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.Navigation;
using System.Windows.Shapes;

namespace 连连看
{
    /// <summary>
    /// MainWindow.xaml 的交互逻辑
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
            Add();//运行Add
        }
        public void Add()
        {
            //第一步,将grid分成6*6
            for (int i = 0; i < 6; i++)//用for循环将Grid分成6行6列
            {
                RowDefinition row = new RowDefinition();
                ColumnDefinition col = new ColumnDefinition();
                MyGrid.RowDefinitions.Add(row);
                MyGrid.ColumnDefinitions.Add(col);
            }

            //第二步:将Button放入6*6布局中
            //第三步:将button的内容换成随机图片
            //可以在生成button的时候就将内容改为图片,所以直接在上一段for循环中添加内容
            Random random = new Random();//先new一个随机数生成器(在for循环外)
            for (int i = 0; i < 6; i++)//将Button放入6行6列的布局中(一行一行循环,共6行)
            {
                for (int j = 0; j < 6; j++)//每行6 列
                {
                    int imgName = random.Next(0, 9);//一个生成0~12的随机数
                    Image img = new Image();
                    img.Source = new BitmapImage(new Uri("/images/" + imgName + ".png", UriKind.Relative));//随机选择图片


                    MyButton button = new MyButton(imgName, i, j);//调用类,分别将类里的属性flag设为imgName,rownum设为i,colnum设为j
                    button.Content = img;//将编号内容换成图片
                    button.Background = Brushes.Transparent;//将按钮背景设为透明
                    button.Click += btn_Click;//为按钮增加点击事件
                    Grid.SetColumn(button, j);
                    Grid.SetRow(button, i);
                    MyGrid.Children.Add(button);

                }
            }
        }
        //开始写点击事件
        MyButton button1;
        MyButton button2;
        int ClickCount = 0;//点击次数
        void btn_Click(object sender, RoutedEventArgs e)
        {
            ++ClickCount;
            if (ClickCount == 1)//点击一次
            {
                button1 = sender as MyButton;
            }
            else if (ClickCount == 2)
            {
                button2 = sender as MyButton;
                if (button1 != null && button2 != null)
                {
                    if (button1.Flag == button2.Flag && !(button1.ColNum == button2.ColNum && button1.RowNum == button2.RowNum))
                    {
                        button1.Visibility = Visibility.Hidden;//将两个按钮隐藏
                        button2.Visibility = Visibility.Hidden;
                    }
                }
                button1 = null;
                button2 = null;
                ClickCount = 0;
            }
        }
    }
    public class MyButton : Button
    {
        //Button标示,用于判断按钮是否为同一个
        public int Flag { get; set; }

        //Button所在行
        public int RowNum { get; set; }

        //Button所在列
        public int ColNum { get; set; }

        public MyButton(int flag, int rownum, int colnum)
        {
            this.Flag = flag;
            this.RowNum = rownum;
            this.ColNum = colnum;
        }

    }
}



图片资源在这里:

图片包

  • 3
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
好的,以下是一个简单WPF登录界面的实现: 1. 创建一个新的WPF应用程序项目。 2. 在项目中添加一个新的Window,用作登录窗口。 3. 在登录窗口中添加两个TextBox控件,用于输入用户名和密码。可以设置控件的Name、Text等属性,以及控件的布局和样式。 4. 添加一个Button控件,用于触发登录操作。可以设置控件的Name、Content等属性,以及控件的布局和样式。 5. 在Button的Click事件中编写登录逻辑。可以先获取TextBox中的用户名和密码,然后在服务端进行验证。验证成功后可以显示一个提示框或跳转到其他页面。 以下是一个简单的代码示例,用于实现WPF登录界面: ```csharp <Window x:Class="WpfApp1.LoginWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="LoginWindow" Height="250" Width="350"> <Grid> <Grid.ColumnDefinitions> <ColumnDefinition Width="100" /> <ColumnDefinition Width="*" /> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition Height="Auto" /> <RowDefinition Height="Auto" /> <RowDefinition Height="Auto" /> <RowDefinition Height="Auto" /> <RowDefinition Height="Auto" /> </Grid.RowDefinitions> <Label Grid.Row="0" Grid.Column="0" Content="Username:" VerticalAlignment="Center" Margin="10" /> <TextBox Grid.Row="0" Grid.Column="1" Name="txtUsername" Margin="10" /> <Label Grid.Row="1" Grid.Column="0" Content="Password:" VerticalAlignment="Center" Margin="10" /> <PasswordBox Grid.Row="1" Grid.Column="1" Name="txtPassword" Margin="10" /> <Button Grid.Row="2" Grid.Column="1" Name="btnLogin" Content="Login" Margin="10" Click="btnLogin_Click" /> </Grid> </Window> ``` ```csharp private void btnLogin_Click(object sender, RoutedEventArgs e) { string username = txtUsername.Text; string password = txtPassword.Password; // TODO: 连接服务端进行验证 // TODO: 登录成功后显示提示框或跳转到其他页面 } ``` 希望这个示例能够对你有所帮助。如果你有其他问题或需要进一步帮助,请随时提出。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值