C#从零开始学习(如何构建应用)

开始使用 C#

开发使用的软件Visual Studio 2019

文章所有的代码都放在

https://github.com/hikinazimi/head-first-Csharp

创建一个控制台应用

打开Visual Studio 2019 创建项目

选择控制台应用程序

创建后点击运行,就可以在控制台打印Hello World

构建一个游戏(创建WPF项目)

构建游戏的步骤

首先创建WPF项目
使用XAML构建窗口
编写C#代码向这个窗口增加随机的动物表情符号
允许用户成对的点击符号配对
增加一个计时器

1.创建WPF项目

在MainWindow.xaml文件下打开工具箱

2.使用XAML构建窗口

在xaml文件下使用如下代码创建一个4*4方格的界面

Grid为网格的框架

TextBlock为显示的文字

xaml 复制代码

<Window x:Class="MatchGame.MainWindow"
        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:MatchGame"
        mc:Ignorable="d"
        Title="Find all of the matching animals" Height="450" Width="400">

    <Grid x:Name="mainGrid">
        <Grid.ColumnDefinitions>
            <ColumnDefinition />
            <ColumnDefinition />
            <ColumnDefinition />
            <ColumnDefinition />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition />
            <RowDefinition />
            <RowDefinition />
            <RowDefinition />
            <RowDefinition />

        </Grid.RowDefinitions>
        <TextBlock Text="?" FontSize="36" HorizontalAlignment="Center" VerticalAlignment="Center" />
        <TextBlock Text="?" FontSize="36" HorizontalAlignment="Center" VerticalAlignment="Center" Grid.Column="1" />
        <TextBlock Text="?" FontSize="36" HorizontalAlignment="Center" VerticalAlignment="Center" Grid.Column="2"/>
        <TextBlock Text="?" FontSize="36" HorizontalAlignment="Center" VerticalAlignment="Center" Grid.Column="3"/>

        <TextBlock Text="?" FontSize="36" HorizontalAlignment="Center" VerticalAlignment="Center" Grid.Row="1" />
        <TextBlock Text="?" FontSize="36" Grid.Row="1" Grid.Column="1"
           HorizontalAlignment="Center" VerticalAlignment="Center" />
        <TextBlock Text="?" FontSize="36" Grid.Row="1" Grid.Column="2" 
           HorizontalAlignment="Center" VerticalAlignment="Center" />
        <TextBlock Text="?" FontSize="36" Grid.Row="1" Grid.Column="3" 
           HorizontalAlignment="Center" VerticalAlignment="Center"/>

        <TextBlock Text="?" FontSize="36" Grid.Row="2" HorizontalAlignment="Center" VerticalAlignment="Center" />
        <TextBlock Text="?" FontSize="36" Grid.Row="2" Grid.Column="1" 
           HorizontalAlignment="Center" VerticalAlignment="Center" />
        <TextBlock Text="?" FontSize="36" Grid.Row="2" Grid.Column="2" 
           HorizontalAlignment="Center" VerticalAlignment="Center" />
        <TextBlock Text="?" FontSize="36" Grid.Row="2" Grid.Column="3" 
           HorizontalAlignment="Center" VerticalAlignment="Center"/>

        <TextBlock Text="?" FontSize="36" Grid.Row="3" HorizontalAlignment="Center" VerticalAlignment="Center" />
        <TextBlock Text="?" FontSize="36" Grid.Row="3" Grid.Column="1" 
           HorizontalAlignment="Center" VerticalAlignment="Center" />
        <TextBlock Text="?" FontSize="36" Grid.Row="3" Grid.Column="2" 
           HorizontalAlignment="Center" VerticalAlignment="Center" />
        <TextBlock Text="?" FontSize="36" Grid.Row="3" Grid.Column="3" 
           HorizontalAlignment="Center" VerticalAlignment="Center" />

        <TextBlock x:Name="timeTextBlock" Text="Elapsed time" FontSize="36"
          HorizontalAlignment="Center" VerticalAlignment="Center"
          Grid.Row="4" Grid.ColumnSpan="4" />


    </Grid>


</Window>

打开.cs文件,这是程序逻辑代码实现的地方

3.编写C#代码向这个窗口增加随机的动物表情符号

然后再.cs文件下输入如下代码

csharp 复制代码

using System;
using System.Collections.Generic;
using System.Linq;
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 MatchGame
{
    /// <summary>
    /// MainWindow.xaml 的交互逻辑
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();

            SetUpGame();
        }

        private void SetUpGame()
        {
            List<string> animalEmoji = new List<string>()//创建表情列表
                        {
                            "😀","😀",
                            "😅", "😅",
                            "🍔","🍔",
                            "🍿", "🍿",
                            "🥩","🥩",
                            "🍠","🍠",
                            "😘", "😘",
                            "🚐", "🚐",

                        };


            Random random = new Random();
            //mainGrid位xaml中grid的标签名,如<Grid x:Name="mainGrid">
            foreach (TextBlock textBlock in mainGrid.Children.OfType<TextBlock>())
            {

                    int index = random.Next(animalEmoji.Count);
                    string nextEmoji = animalEmoji[index];
                    textBlock.Text = nextEmoji;
                    animalEmoji.RemoveAt(index);

            }



        }
    }
}

然后我们就可以看到如下的界面

4.允许用户成对的点击符号配对

在textblock组件中MouseDown中添加如下函数

csharp 复制代码

 		TextBlock lastTextBlockClicked;
        bool findingMatch = false;//跟踪是否只点击了一个

        private void TextBlock_MouseDown(object sender, MouseButtonEventArgs e)
        {
            TextBlock textBlock = sender as TextBlock;
            if (findingMatch == false)//第一次选择
            {
                textBlock.Visibility = Visibility.Hidden;
                lastTextBlockClicked = textBlock;
                findingMatch = true;
            }
            else if (textBlock.Text == lastTextBlockClicked.Text)
            {//第二次选择且相同
                matchesFound++;
                textBlock.Visibility = Visibility.Hidden;
                findingMatch = false;
            }
            else
            {//第二次选择且不同
                lastTextBlockClicked.Visibility = Visibility.Visible;
                findingMatch = false;
            }
        }

快速给所有xaml文件改MouseDown事件

将 /> 替换为 MouseDown="TextBlock_MouseDown"/>

5. 增加一个计时器

首先在最上面的namespace下添加using System.Windows.Threading;

然后在添加如下代码

csharp 复制代码

    public partial class MainWindow : Window
    {
        DispatcherTimer timer = new DispatcherTimer();
        int tenthsOfSecondsElapsed;//过去的时间
        int matchesFound;//找到的动物

        public MainWindow()
        {
            InitializeComponent();
            timer.Interval = TimeSpan.FromSeconds(.1);
            timer.Tick += Timer_Tick;
            SetUpGame();
        }
        private void Timer_Tick(object sender, EventArgs e)
        {
            tenthsOfSecondsElapsed++;
            timeTextBlock.Text = (tenthsOfSecondsElapsed / 10F).ToString("0.0s");
            if(matchesFound==8)
            {
                timer.Stop();
                timeTextBlock.Text = timeTextBlock.Text + " - end";
            }
        }

在xaml下添加一个新的textBlock

添加后有17个textBlock,导致数组越界,所以我们要使用if (textBlock.Name != "timeTextBlock")判断

csharp 复制代码

            foreach (TextBlock textBlock in mainGrid.Children.OfType<TextBlock>())
            {
                if (textBlock.Name != "timeTextBlock")
                {
                    int index = random.Next(animalEmoji.Count);
                    string nextEmoji = animalEmoji[index];
                    textBlock.Text = nextEmoji;
                    animalEmoji.RemoveAt(index);
                }

            }

最终结果如下

至此,我们就学习完了第一章,然后让我们复习一下本章讲了什么

学习了控制台的创建
学习了WPF的创建,以及一个简易游戏的实现
xaml文件的简单应用
使用C#控制游戏逻辑的运行