Organizer – pierwsza aplikacja

Etapy Projektu

Etap 1: Utworzenie nowego projektu

Otwórz Visual Studio 2022.
Kliknij: Nowy projekt → wybierz Aplikacja Windows Forms (.NET) → nadaj nazwę: Organizer.
Kliknij Utwórz.

Etap 2: Projektowanie interfejsu (UI)

W Projektancie Formy (Form1):

Dodaj ListBox → służy do wyświetlania listy zadań.
Dodaj TextBox → pole do wpisywania nowego zadania.
Dodaj Button (nazwij: btnAdd) → przycisk „Dodaj zadanie”.
Dodaj Button (nazwij: btnRemove) → przycisk „Usuń zaznaczone zadanie”.
Dodaj Button (nazwij: btnSaveChanges
Dodaj Label1 i Label2 z odpowiednimi etykietami
(Opcjonalnie) Uporządkuj wszystko np. przy pomocy GroupBox lub TableLayoutPanel, ale to nie jest wymagane na początek.

Etap 3: Dodanie logiki (Code-Behind)

Przechodzimy do pliku Form1.cs.

a) Wyświetlanie listy zadań

Lista będzie trzymana w kontrolce ListBox (listBoxTasks).
Gdy dodajemy nowe zadanie, pojawi się automatycznie w liście.
Po usunięciu — znika z listy.

b) Metoda dodawania zadania (opisane poniżej)

Etap 4: Testowanie programu

Uruchom aplikację (F5).
Spróbuj dodać nowe zadanie.
Spróbuj zaznaczyć zadanie i kliknąć “Usuń”.
Sprawdź, co się stanie, jeśli nie wpiszesz tekstu lub nie zaznaczysz zadania.

Etap 5: Opcjonalne ulepszenia

Dodanie opcji edytowania zadania.
Zapisywanie listy zadań do pliku.
Ładniejszy wygląd: kolory, czcionki, ikony.
Obsługa klawisza Enter do dodawania zadania.

📚 Co robi nasz program Organizer?

Nasz program pozwala:

Dodać notatkę do listy,
Usunąć notatkę z listy,
Kliknąć notatkę, zmienić jej treść i zatwierdzić zmiany.

Czyli mamy trzy główne akcje: Dodaj, Usuń, Zatwierdź zmiany.

📋 Jak działa każdy element?

Przyciski i pole tekstowe

W programie mamy:

ListBox – to taka lista, która pokazuje wszystkie nasze notatki.
TextBox – pole, w które wpisujemy treść nowej lub zmienianej notatki.
Button “Dodaj notatkę” – gdy klikniemy, dodajemy nową notatkę.
Button “Usuń notatkę” – usuwa zaznaczoną notatkę.
Button “Zatwierdź zmiany” – pojawia się tylko wtedy, kiedy zmieniamy jakąś notatkę.

📄 Opis metod (funkcji) w programie

Metoda:
btnAdd_Click

Co robi?

Gdy klikamy przycisk Dodaj notatkę, ta metoda się wykonuje.
Sprawdza, czy coś zostało wpisane w pole tekstowe.
Jeśli tak → dodaje tekst jako nową notatkę do listy.
Czyści pole tekstowe, żeby było gotowe na kolejną notatkę.
Ukrywa przycisk „Zatwierdź zmiany”, żeby nie było zamieszania.

Prosty język:

Jeśli coś wpiszesz i klikniesz “Dodaj notatkę”, to notatka pojawi się na liście.

// Dodawanie nowej notatki

        private void btnAdd_Click(object sender, EventArgs e)
        {
            if (!string.IsNullOrWhiteSpace(txtTask.Text))
            {
                listBoxTasks.Items.Add(txtTask.Text);
                txtTask.Clear();
                btnSaveChanges.Visible = false; // Ukryj przycisk edytowania
            }
            else
            {
                MessageBox.Show("Wpisz treść notatki!", "Uwaga", MessageBoxButtons.OK, MessageBoxIcon.Warning);
            }
        }

Metoda:
btnRemove_Click

Co robi?

Gdy klikamy przycisk Usuń notatkę, ta metoda się wykonuje.
Sprawdza, czy jakaś notatka na liście jest zaznaczona.
Jeśli tak → usuwa zaznaczoną notatkę z listy.
Czyści pole tekstowe i ukrywa przycisk „Zatwierdź zmiany”.

Prosty język:

Jeśli klikniesz notatkę na liście i klikniesz “Usuń notatkę”, to ta notatka zniknie.

// Usuwanie zaznaczonej notatki

        private void btnRemove_Click(object sender, EventArgs e)
        {
            if (listBoxTasks.SelectedItem != null)
            {
                listBoxTasks.Items.Remove(listBoxTasks.SelectedItem);
                txtTask.Clear();
                btnSaveChanges.Visible = false; // Ukryj przycisk edytowania
            }
            else
            {
                MessageBox.Show("Wybierz notatkę do usunięcia.", "Uwaga", MessageBoxButtons.OK, MessageBoxIcon.Warning);
            }
        }

Metoda:
listBoxTasks_SelectedIndexChanged

Co robi?

Uruchamia się, kiedy klikniemy jakąś notatkę na liście.
Wpisuje treść klikniętej notatki do pola tekstowego.
Pokazuje przycisk “Zatwierdź zmiany”, bo teraz możemy edytować.

Prosty język:

Klikniesz notatkę na liście — zobaczysz jej tekst w polu wpisywania i możesz ją zmieniać.

// Wyświetlanie treści zaznaczonej notatki w polu edycji

        private void listBoxTasks_SelectedIndexChanged(object sender, EventArgs e)
        {
            if (listBoxTasks.SelectedItem != null)
            {
                txtTask.Text = listBoxTasks.SelectedItem.ToString();
                btnSaveChanges.Visible = true; // Pokaż przycisk edycji
            }
        }

Metoda:
btnSaveChanges_Click

Co robi?

Wykonuje się, kiedy klikamy przycisk “Zatwierdź zmiany”.
Sprawdza, czy jakaś notatka jest zaznaczona i czy pole tekstowe nie jest puste.
Jeśli tak → zamienia starą treść notatki na nową (wpisaną w TextBoxie).
Czyści pole tekstowe.
Odznacza notatkę na liście.
Ukrywa przycisk „Zatwierdź zmiany”.

Prosty język:

Wpiszesz zmiany w notatce i klikniesz “Zatwierdź zmiany” — wtedy notatka na liście się zmieni.

// Zatwierdzenie zmienionej notatki

        private void btnSaveChanges_Click(object sender, EventArgs e)
        {
            if (listBoxTasks.SelectedIndex != -1 && !string.IsNullOrWhiteSpace(txtTask.Text))
            {
                int selectedIndex = listBoxTasks.SelectedIndex;
                listBoxTasks.Items[selectedIndex] = txtTask.Text;
                listBoxTasks.ClearSelected();
                txtTask.Clear();
                btnSaveChanges.Visible = false; // Ukryj po zatwierdzeniu
            }
        }

🔥 Jak przebiega cały proces działania programu?

Wpisujesz coś do pola tekstowego i klikasz “Dodaj notatkę” → notatka pojawia się na liście.
Klikasz notatkę na liście → tekst z tej notatki pojawia się w polu.
Możesz zmienić tekst i kliknąć “Zatwierdź zmiany” → notatka zostanie zaktualizowana.
Możesz też zaznaczyć notatkę i kliknąć “Usuń notatkę” → zniknie z listy.

🧠 Uwaga techniczna:

SelectedIndex to numer zaznaczonej notatki na liście.
SelectedItem to treść zaznaczonej notatki.
Items to wszystkie notatki znajdujące się w liście.
Text w TextBoxie to tekst, który wpisujemy lub zmieniamy.
Click to zdarzenie kliknięcia przycisku.
SelectedIndexChanged to zdarzenie, kiedy zmienimy zaznaczoną notatkę.

PODSUMOWANIE I WYJAŚNIENIE UŻYTYCH FUNKCJI:

Funkcja / polecenie	Co robi?	Gdzie było użyte?
InitializeComponent()	Tworzy wszystkie elementy okna	Konstruktor Form1()
string.IsNullOrWhiteSpace(txtTask.Text)	Sprawdza, czy pole tekstowe nie jest puste lub składające się tylko ze spacji	btnAdd_Click, btnSaveChanges_Click
listBoxTasks.Items.Add(txtTask.Text)	Dodaje nową notatkę do listy	btnAdd_Click
txtTask.Clear()	Czyści pole tekstowe	btnAdd_Click, btnRemove_Click, btnSaveChanges_Click
btnSaveChanges.Visible = false	Ukrywa przycisk “Zatwierdź zmiany”	btnAdd_Click, btnRemove_Click, btnSaveChanges_Click
MessageBox.Show()	Wyświetla okienko z komunikatem	btnAdd_Click, btnRemove_Click
listBoxTasks.SelectedItem != null	Sprawdza, czy jakaś notatka jest zaznaczona na liście	btnRemove_Click, listBoxTasks_SelectedIndexChanged
listBoxTasks.Items.Remove(listBoxTasks.SelectedItem)	Usuwa zaznaczoną notatkę z listy	btnRemove_Click
listBoxTasks.SelectedIndex != -1	Sprawdza, czy jakaś notatka jest zaznaczona (indeks)	btnSaveChanges_Click
listBoxTasks.SelectedIndex	Pobiera numer (indeks) zaznaczonej notatki	btnSaveChanges_Click
listBoxTasks.Items[selectedIndex] = txtTask.Text	Aktualizuje treść notatki na liście	btnSaveChanges_Click
listBoxTasks.ClearSelected()	Odznacza wszystkie zaznaczone notatki na liście	btnSaveChanges_Click
txtTask.Text = listBoxTasks.SelectedItem.ToString()	Kopiuje treść klikniętej notatki do pola tekstowego	listBoxTasks_SelectedIndexChanged
btnSaveChanges.Visible = true	Pokazuje przycisk “Zatwierdź zmiany”	listBoxTasks_SelectedIndexChanged

Windows Forms	.NET MAUI – odpowiednik	Uwagi
ListBox	ListView	ListView w MAUI obsługuje kolekcje obiektów – nie ma metody .Items.Add() – trzeba używać ItemsSource
TextBox	Entry	Entry to jednoliniowe pole tekstowe, Editor to wieloliniowe
Button	Button	Nazwa ta sama, działanie podobne
Label	Label	Też podobne
MessageBox.Show()	DisplayAlert()	Używane do wyświetlania okienek z komunikatami
Visible = false	IsVisible = false	Zamiast Visible, w MAUI używamy IsVisible

W Windows Forms obsługujesz zdarzenia typu Click przez btnAdd_Click(object sender, EventArgs e) – w MAUI też możesz, ale używasz Clicked i możesz wiązać je bezpośrednio w XAML (Clicked=”btnAdd_Click”).

Wersja dla MAUI

Logika:

using System.Collections.ObjectModel;

public partial class MainPage : ContentPage
{
    private ObservableCollection<string> tasks = new ObservableCollection<string>();

    public MainPage()
    {
        InitializeComponent();
        listBoxTasks.ItemsSource = tasks;
    }

    private void btnAdd_Click(object sender, EventArgs e)
    {
        if (!string.IsNullOrWhiteSpace(txtTask.Text))
        {
            tasks.Add(txtTask.Text);
            txtTask.Text = "";
            btnSaveChanges.IsVisible = false;
        }
        else
        {
            DisplayAlert("Uwaga", "Wpisz treść notatki!", "OK");
        }
    }

    private void btnRemove_Click(object sender, EventArgs e)
    {
        if (listBoxTasks.SelectedItem != null)
        {
            tasks.Remove(listBoxTasks.SelectedItem.ToString());
            txtTask.Text = "";
            btnSaveChanges.IsVisible = false;
        }
        else
        {
            DisplayAlert("Uwaga", "Wybierz notatkę do usunięcia.", "OK");
        }
    }

    private void listBoxTasks_SelectedIndexChanged(object sender, SelectedItemChangedEventArgs e)
    {
        if (e.SelectedItem != null)
        {
            txtTask.Text = e.SelectedItem.ToString();
            btnSaveChanges.IsVisible = true;
        }
    }

    private void btnSaveChanges_Click(object sender, EventArgs e)
    {
        if (listBoxTasks.SelectedItem != null && !string.IsNullOrWhiteSpace(txtTask.Text))
        {
            var oldItem = listBoxTasks.SelectedItem.ToString();
            int index = tasks.IndexOf(oldItem);
            tasks[index] = txtTask.Text;

            listBoxTasks.SelectedItem = null;
            txtTask.Text = "";
            btnSaveChanges.IsVisible = false;
        }
    }
}

projektant:

<VerticalStackLayout Padding="20" Spacing="15">

    <Label x:Name="label1"
           Text="Twoje zadania:"
           FontSize="20"
           HorizontalOptions="Center" />

    <ListView x:Name="listBoxTasks"
              HeightRequest="200"
              SelectionMode="Single"
              ItemSelected="listBoxTasks_SelectedIndexChanged" />

    <Label x:Name="label2"
           Text="Nowe zadanie:"
           FontAttributes="Bold" />

    <Entry x:Name="txtTask"
           Placeholder="Wpisz treść notatki" />

    <HorizontalStackLayout Spacing="10">
        <Button x:Name="btnAdd"
                Text="Dodaj notatkę"
                Clicked="btnAdd_Click"
                HorizontalOptions="FillAndExpand" />

        <Button x:Name="btnRemove"
                Text="Usuń notatkę"
                Clicked="btnRemove_Click"
                HorizontalOptions="FillAndExpand" />
    </HorizontalStackLayout>

    <Button x:Name="btnSaveChanges"
            Text="Zatwierdź zmiany"
            Clicked="btnSaveChanges_Click"
            IsVisible="False"
            BackgroundColor="LightGreen"
            TextColor="Black" />
</VerticalStackLayout>

Co musiałem zmienić, by przenieść aplikację desktopową z Windows Forms do aplikacji mobilnej w .NET MAUI i dlaczego?

W moim oryginalnym projekcie desktopowym korzystałem z technologii Windows Forms, gdzie interfejs użytkownika tworzy się za pomocą wizualnego edytora i kontrolek takich jak ListBox, TextBox, Button. Chciałem jednak, aby aplikacja działała na urządzeniach mobilnych – więc postanowiłem przenieść ją do .NET MAUI.

Aby to zrobić, musiałem zmienić kilka istotnych elementów:

1. Kontrolki UI (interfejsu użytkownika)

W Windows Forms używałem kontrolek takich jak ListBox, TextBox, Label i Button. W .NET MAUI nie wszystkie te kontrolki istnieją w takiej samej formie – dlatego:

ListBox zastąpiłem kontrolką ListView, ponieważ to ona służy w MAUI do wyświetlania list danych.
TextBox zamieniłem na Entry, które spełnia podobną funkcję (pojedyncza linia tekstu).
MessageBox.Show() musiałem zastąpić metodą DisplayAlert(), ponieważ w MAUI nie ma klasy MessageBox.
Zamiast Visible = false użyłem IsVisible = false, bo tak to działa w MAUI.

2. Zarządzanie danymi w liście

W Windows Forms mogłem łatwo dodawać elementy do ListBox przez listBox.Items.Add(…). W MAUI ListView nie ma takiej metody – potrzebuje źródła danych (ItemsSource). Dlatego musiałem stworzyć kolekcję typu ObservableCollection<string>, którą przypiąłem do ItemsSource.

Ta zmiana była konieczna, żeby lista dynamicznie reagowała na dodawanie, usuwanie i edytowanie elementów.

3. Zdarzenia i aktualizacja danych

W Windows Forms miałem dostęp do SelectedIndex i SelectedItem. W MAUI dostępny jest tylko SelectedItem, więc musiałem samodzielnie znaleźć indeks danego elementu, aby go zaktualizować w kolekcji.

Musiałem też dostosować metodę btnSaveChanges_Click, żeby zamiast podmiany przez listBox.Items[index] = …, podmieniała element w ObservableCollection poprzez tasks[index] = ….

4. UI w XAML

Zamiast przeciągać kontrolki na formę, musiałem zbudować interfejs ręcznie w pliku MainPage.xaml używając języka XAML. To pozwala lepiej dostosować wygląd aplikacji do ekranów mobilnych i ułatwia kontrolę nad layoutem.

5. Platforma docelowa i środowisko uruchomieniowe

Musiałem też zmienić szablon projektu – zamiast Windows Forms App (.NET Framework) wybrałem MAUI App, co pozwoliło mi uruchomić aplikację na Androidzie i innych platformach mobilnych.

Organizer – pierwsza aplikacja

Etapy Projektu

Etap 1: Utworzenie nowego projektu

Etap 2: Projektowanie interfejsu (UI)

Etap 3: Dodanie logiki (Code-Behind)

a) Wyświetlanie listy zadań

b) Metoda dodawania zadania (opisane poniżej)

Etap 4: Testowanie programu

Etap 5: Opcjonalne ulepszenia

📚 Co robi nasz program Organizer?

📋 Jak działa każdy element?

Przyciski i pole tekstowe

📄 Opis metod (funkcji) w programie

Metoda: btnAdd_Click

Metoda: btnRemove_Click

Metoda: listBoxTasks_SelectedIndexChanged

Metoda: btnSaveChanges_Click

🔥 Jak przebiega cały proces działania programu?

🧠 Uwaga techniczna:

1. Kontrolki UI (interfejsu użytkownika)

2. Zarządzanie danymi w liście

3. Zdarzenia i aktualizacja danych

4. UI w XAML

5. Platforma docelowa i środowisko uruchomieniowe

Metoda:
btnAdd_Click

Metoda:
btnRemove_Click

Metoda:
listBoxTasks_SelectedIndexChanged

Metoda:
btnSaveChanges_Click