🎨 Kolorowy Zgadywacz – Instrukcja krok po kroku
Cel: Nauka podstaw programowania w Visual Studio – tworzenie prostych okienek, przycisków i obsługi zdarzeń.
🧑🏫 Co przygotować przed zajęciami:
• Komputery z zainstalowanym Visual Studio 2022 (Community Edition wystarczy).
• Projekt typu Windows Forms App (.NET Framework).
• Nazwa projektu: KolorowyZgadywacz.
📘 Etap 1: Tworzenie projektu
1. Otwórz Visual Studio 2022.
2. Kliknij Create a new project.
3. Wyszukaj i wybierz: Windows Forms App (.NET Framework).
4. Kliknij Next.
5. Wpisz nazwę projektu: KolorowyZgadywacz.
6. Kliknij Create.
🎨 Etap 2: Projektowanie wyglądu okna
1. Ustawienia głównego okna
• Kliknij w puste miejsce formularza.
• W oknie właściwości (po prawej stronie) ustaw:
• Text: Kolorowy Zgadywacz
• Size: 500, 400
• StartPosition: CenterScreen
2. Dodaj kontrolki
Etykieta – Pytanie o kolor
• Z zakładki Toolbox przeciągnij Label na formularz.
• Właściwości:
• Name: labelColorName
• Text: Jaki to kolor?
• Font: Segoe UI, 16pt
• AutoSize: True
• Location: ustaw np. 150, 30
Trzy przyciski – Odpowiedzi
Przeciągnij trzy Button z Toolboxa, ustaw je obok siebie.
Właściwości dla każdego:
• Name: button1, button2, button3 (kolejno)
• Size: 100, 100
• Location: np.
• button1: 70, 100
• button2: 190, 100
• button3: 310, 100
Przycisk „Następne pytanie”
Dodaj 1 przycisk niżej:
• Name: btnNext
• Text: Następne
• Location: 190, 230
• Enabled: False (na początek)
Etykieta z wynikiem
Dodaj jeszcze jedną Label na dole:
• Name: labelScore
• Text: Wynik: 0
• Font: Segoe UI, 12pt
• Location: 180, 300
👨💻 Etap 3: Kodowanie
using System;
using System.Drawing;
using System.Linq;
using System.Windows.Forms;
namespace KolorowyZgadywacz
{
public partial class Form1 : Form
{
Random random = new Random();
string[] kolory = { "Czerwony", "Zielony", "Niebieski" };
Color[] koloryRGB = { Color.Red, Color.Green, Color.Blue };
int poprawne = 0;
int pytanie = 0;
int poprawnyIndeks;
public Form1()
{
InitializeComponent();
button1.Click += button_Click;
button2.Click += button_Click;
button3.Click += button_Click;
btnNext.Click += btnNext_Click;
}
private void Form1_Load(object sender, EventArgs e)
{
GenerujPytanie();
}
void GenerujPytanie()
{
poprawnyIndeks = random.Next(3);
labelColorName.Text = "Kliknij: " + kolory[poprawnyIndeks];
// Tasowanie kolejności przycisków
int[] indeksy = { 0, 1, 2 };
indeksy = indeksy.OrderBy(x => random.Next()).ToArray();
button1.BackColor = koloryRGB[indeksy[0]];
button1.Tag = indeksy[0];
button2.BackColor = koloryRGB[indeksy[1]];
button2.Tag = indeksy[1];
button3.BackColor = koloryRGB[indeksy[2]];
button3.Tag = indeksy[2];
btnNext.Enabled = false;
button1.Enabled = true;
button2.Enabled = true;
button3.Enabled = true;
}
private void button_Click(object sender, EventArgs e)
{
if (sender is Button klikniety && klikniety.Tag is int indexKlikniety)
{
if (indexKlikniety == poprawnyIndeks)
{
MessageBox.Show("Brawo! To poprawna odpowiedź!");
poprawne++;
}
else
{
MessageBox.Show("Ups! To była zła odpowiedź!");
}
pytanie++;
labelScore.Text = $"Wynik: {poprawne} / {pytanie}";
btnNext.Enabled = true;
button1.Enabled = false;
button2.Enabled = false;
button3.Enabled = false;
}
}
private void btnNext_Click(object sender, EventArgs e)
{
GenerujPytanie();
}
}
}
####
namespace KolorowyZgadywaczMAUI;
public partial class MainPage : ContentPage
{
Random random = new();
string[] kolory = { "Czerwony", "Zielony", "Niebieski" };
Color[] koloryRGB = { Colors.Red, Colors.Green, Colors.Blue };
int poprawne = 0;
int pytanie = 0;
int poprawnyIndeks;
public MainPage()
{
InitializeComponent();
button1.Clicked += button_Click;
button2.Clicked += button_Click;
button3.Clicked += button_Click;
btnNext.Clicked += btnNext_Click;
GenerujPytanie();
}
void GenerujPytanie()
{
poprawnyIndeks = random.Next(3);
labelColorName.Text = "Kliknij: " + kolory[poprawnyIndeks];
int[] indeksy = { 0, 1, 2 };
indeksy = indeksy.OrderBy(x => random.Next()).ToArray();
button1.BackgroundColor = koloryRGB[indeksy[0]];
button1.BindingContext = indeksy[0];
button2.BackgroundColor = koloryRGB[indeksy[1]];
button2.BindingContext = indeksy[1];
button3.BackgroundColor = koloryRGB[indeksy[2]];
button3.BindingContext = indeksy[2];
button1.IsEnabled = true;
button2.IsEnabled = true;
button3.IsEnabled = true;
btnNext.IsEnabled = false;
}
private void button_Click(object sender, EventArgs e)
{
if (sender is Button btn && btn.BindingContext is int indexKlikniety)
{
if (indexKlikniety == poprawnyIndeks)
{
DisplayAlert("Gratulacje!", "Brawo! To poprawna odpowiedź!", "OK");
poprawne++;
}
else
{
DisplayAlert("Niestety", "Ups! To była zła odpowiedź!", "OK");
}
pytanie++;
labelScore.Text = $"Wynik: {poprawne} / {pytanie}";
button1.IsEnabled = false;
button2.IsEnabled = false;
button3.IsEnabled = false;
btnNext.IsEnabled = true;
}
}
private void btnNext_Click(object sender, EventArgs e)
{
GenerujPytanie();
}
}
11111
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
x:Class="KolorowyZgadywaczMAUI.MainPage"
Title="Kolorowy Zgadywacz">
<VerticalStackLayout Padding="20" Spacing="15">
<Label x:Name="labelColorName"
FontSize="24"
Text="Kliknij: ???"
HorizontalOptions="Center" />
<HorizontalStackLayout Spacing="10" HorizontalOptions="Center">
<Button x:Name="button1" WidthRequest="100" HeightRequest="100" />
<Button x:Name="button2" WidthRequest="100" HeightRequest="100" />
<Button x:Name="button3" WidthRequest="100" HeightRequest="100" />
</HorizontalStackLayout>
<Button x:Name="btnNext"
Text="Następne"
IsEnabled="False"
/>
<Label x:Name="labelScore"
Text="Wynik: 0"
FontSize="18"
HorizontalOptions="Center" />
</VerticalStackLayout>
</ContentPage>