BMI – Maui

KROK 1: Utworzenie projektu MAUI w Visual Studio 2022

Cel kroku: Tworzymy nową aplikację wieloplatformową (.NET MAUI), która będzie działać na Windowsie i urządzeniach mobilnych. Visual Studio wygeneruje strukturę projektu, pliki startowe i ustawi środowisko.

Co robimy:

1. Otwórz Visual Studio 2022.
2. Kliknij: File > New > Project.
3. Wyszukaj: .NET MAUI App (lub „.NET MAUI App (Preview)” jeśli taka się wyświetla).
4. Nazwij projekt: BMIAppMaui.
5. Kliknij Create i wybierz szablon: .NET MAUI App.
6. Poczekaj, aż projekt zostanie utworzony.

---

KROK 2: Projektowanie interfejsu użytkownika

Cel kroku: Tworzymy widok formularza do wprowadzenia wzrostu i wagi, przycisk “Oblicz” oraz miejsce na wynik. Całość zapisujemy w pliku XAML (strona główna aplikacji).

MainPage.xaml (część wizualna)

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="BMIAppMaui.MainPage"
             BackgroundColor="#c3fcbc">

    <VerticalStackLayout Padding="30" Spacing="20"
                          HorizontalOptions="Center" WidthRequest="400">

        <Image Source="bmi.png" HeightRequest="120" HorizontalOptions="Center" />

        <Label Text="Podaj wzrost (cm):" FontAttributes="Bold" FontSize="16" HorizontalOptions="Center" />
        <Entry x:Name="WzrostEntry" Keyboard="Numeric" Placeholder="np. 180"
               HeightRequest="40" BackgroundColor="White" />

        <Label Text="Podaj wagę (kg):" FontAttributes="Bold" FontSize="16" HorizontalOptions="Center" />
        <Entry x:Name="WagaEntry" Keyboard="Numeric" Placeholder="np. 75"
               HeightRequest="40" BackgroundColor="White" />

        <Button Text="Oblicz" Clicked="OnObliczClicked"
                BackgroundColor="White" TextColor="Black"
                FontAttributes="Bold" CornerRadius="8"
                WidthRequest="100" HeightRequest="40"
                HorizontalOptions="Center" />

        <Label x:Name="WynikLabel" FontSize="18" FontAttributes="Bold"
               HorizontalOptions="Center" TextColor="Black" Margin="10" />

    </VerticalStackLayout>
</ContentPage>

---

KROK 3: Logika działania aplikacji

Cel kroku: Implementujemy logikę w pliku MainPage.xaml.cs, która pobiera dane z pól tekstowych, oblicza BMI i wyświetla wynik.

MainPage.xaml.cs

Zawartość metody MainPage i dodaj logikę kliknięcia:

using System;

namespace BMIAppMaui
{
    public partial class MainPage : ContentPage
    {
        public MainPage()
        {
            InitializeComponent();
        }

        private void OnObliczClicked(object sender, EventArgs e)
        {
            if (double.TryParse(WzrostEntry.Text, out double wzrost) && double.TryParse(WagaEntry.Text, out double waga))
            {
                if (wzrost > 0 && waga > 0)
                {
                    double wzrostMetry = wzrost / 100;
                    double bmi = waga / (wzrostMetry * wzrostMetry);
                    WynikLabel.Text = $"Twoje BMI wynosi: {bmi:F1}";
                }
                else
                {
                    WynikLabel.Text = "Podaj dodatnie wartości.";
                }
            }
            else
            {
                WynikLabel.Text = "Wprowadź poprawne dane.";
            }
        }
    }
}

---

KROK 4: Dodanie obrazka do projektu

Cel kroku: Dodajemy ilustrację „bmi.png”, która będzie widoczna nad formularzem.

Co robimy:

1. Przeciągnij plik bmi.png do folderu Resources/Images/ w Twoim projekcie MAUI.
2. Kliknij prawym przyciskiem i wybierz Build Action > MauiImage (jeśli nie jest ustawione).

---

KROK 5: Uruchomienie aplikacji

Cel kroku: Sprawdzamy działanie aplikacji.

Co robimy:

1. Wybierz platformę docelową (Windows, Android, iOS – jeśli dostępna).
2. Kliknij Run lub użyj Ctrl + F5.

Po uruchomieniu wpisz dane, kliknij „Oblicz” i sprawdź wynik BMI.

---