Dzisiaj powrót do naszej pierwszej aplikacji okienkowej. Rozszerzmy jej funkcjonalność o coś więcej niż guzik wyświetlający wiadomość.
Plan pracy na dziś.
Stworzenie formularza, w którym użytkownik będzie musiał wpisać swoje imię, nazwisko, zaznaczyć płeć oraz podać wiek.
Następnie będzie przycisk “Wyświetl”, który wyświetli informacje podane przez użytkownika obok w postaci tekstu.
“Użytkownik <imię> <nazwisko> który jest <płeć> ma <wiek> lata.”
Ok, a więc zaczynajmy.
Odpalamy nasze Visual Studio i wybieramy opcje “Create a new project”.
Następnie wybieramy projekt “WPF App (.Net Core)”.
Nazywamy nasz nowy projekt. Ja nazwałem go “AplikacjaFormularz” i wskazujemy lokalizację naszego projektu na komputerze.
Ok, naszym oczom pokazuje się nasz pusty projekt.
Zaczynamy od umieszczenia kontrolek, które są nam potrzebne.
Potrzebujemy kontrolki typu “TextBox”, gdzie będzie można wpisać “Imię”, “Nazwisko” oraz “Wiek”. Do tego zrobimy listę rozwijaną, gdzie będzie można wybrać “płeć”. Wszystko będzie opisane za pomocą kontrolek “Label”. Będziemy również potrzebować kontrolki “button”, która będzie nam zapisywać nasz formularz.
To pierwsza część zadania 🙂
Zaczynamy od przeciągnięcia z “ToolBox” kontrolek TextBox.
Następnie przeciągamy kontrolki typu “Label”, żeby opisać nasze TextBox.
Teraz zmieńmy nazwę naszych “Label”, tak żeby znalazły się tam “Imię”, “Nazwisko”, “Wiek”. W tym celu klikamy w pierwszą kontrolkę “Label” i z prawej strony wybieramy okienko Properties. Tam w sekcji Common w zmiennej Content zmieniamy wartość z “Label” na “Imię”.
Następnie powtarzamy to samo z pozostałymi kontrolkami “Label” wpisując Nazwisko oraz Wiek.
Ok, teraz poprawmy kontrolki TextBox, ponieważ wyświetlają one napis TextBox. Chcielibyśmy, żeby wyświetlały coś bardziej przyjaznego użytkownikowi, np. napisy “Podaj swoje imię”, “Podaj swoje nazwisko”, “Podaj swój wiek”.
W tym celu klikamy na pierwszą kontrolkę TextBox znajdującą się pod Label z napisem Imię. Klikamy na naszą kontrolkę, następnie przechodzimy do okienka Properties i w sekcji Common odnajdujemy zmienną “Text”, w której jest wpisane “TextBox” i podmieniamy to na napis “Podaj swoje imię”.
Powtarzamy to z pozostałymi “TextBox” wpisując “Podaj swoje nazwisko”, “Podaj swój wiek”.
Czas na naszą kolejną kontrolkę. Będzie to lista rozwijana, w której będzie informacja o płci. Wybieramy kontrolkę ComboBox. Następnie przechodzimy do Properties i w sekcji Common odnajdujemy sekcję Items.
Gdy odnajdziemy sekcję Items, klikamy w guzik z trzema kropkami “…”. Pojawi się nam nowe okno o nazwie “Collection Editor:Items”.
Na dole z listy rozwijanej wybieramy pozycję “ComboBoxItem” i klikamy Add.
Pojawi się nam w oknie “Items” pozycja “[0] ComboBoxItem”. W prawym oknie “Properties” odnajdujemy sekcję “Common” i właściwość “Content”, gdzie wpisujemy “Kobieta”.
Powtarzamy tę operację, dodając drugą pozycję i wpisując w polu “Content” wartość “Mężczyzna”.
Następnie zamykamy całe okienko “Collection Editor: Items” klikając “OK”.
Teraz czas na dodanie guzika, który będzie wyświetlał wpisany przez użytkownika tekst w odpowiednim formacie.
W tym celu z Toolbox wybieramy kontrolkę Button i przenosimy ją na naszą aplikację.
Tak jak poprzednio klikamy w nasz guzik, następnie przejdziemy teraz do “Properties”. Odnajdziemy w sekcji “Common” właściwość “Content” i zmienimy wartość z “Botton” na “Wyświetl”.
Ok, dodajmy teraz sekcję Podsumowanie. W tym celu proponuję użyć kontrolki Label oraz np. TextBlock. Kontrolki Label użyjemy do nazwania naszej sekcji i nazwiemy ją jako “Wynik”. Kontrolka TextBlock będzie wyświetlała nasz komunikat.
Przeciągnijmy kontrolki Label oraz TextBlock na naszą aplikację.
Zmieńmy opis naszej labelki wpisując w sekcji “Common” w własności “Content” wartość “Wynik”.
Teraz w kontrolce TextBlock w sekcji “Common” we własności Text usuwamy napis “TextBlock”. Oraz zmieniamy wartość “TextBlock” w sekcji Name na WynikTextBlock.
Przejdźmy jeszcze do naszych 2 kontrolek Textbox i Combobox, zmieńmy nazwy naszych kontrolek tak, aby łatwiej było nam się do nich odwołać w naszym kodzie za chwilę. Nazwy kontrolek są generowane na podstawie rodzaju kontrolki oraz kolejno nadawanych numerów np. TextBox, TextBox1, TextBox2. Problem jest taki, że w kodzie nie wiadomo, która to kontrolka TextBox2. Dobrze jest zmienić nazwę kontrolek na takie, które będą mówiły coś więcej np. TextBoxImie, TextBoxNazwisko, TextBoxWiek. Właśnie to teraz zrobimy 🙂
Klikamy w naszą kontrolkę TextBox, w której jest napis “Podaj swoje Imię” i zmieniamy jej nazwę w właściwości Name z “TextBox” na “TextBoxImie”.
Analogicznie zmieniamy nazwę naszej kontrolki dla nazwiska z “TextBox1” na “TextBoxNazwisko”.
Zmieniamy nazwę naszej kontrolki dla nazwiska z “TextBox2” na “TextBoxWiek”.
Zmieniamy nazwę naszej kontrolki ComboBox z “comboBox” na “comboBoxPlec”.
Teraz czas, aby nasz guzik zaczął działać 🙂 Klikamy 2 krotnie myszką na nasz button, zostaniemy przekierowani do nowego pliku “MainWindow.xaml.cs” do sekcji button_Click”
Dopiszmy teraz kawałek kodu.
WynikTextBlock.Text = “Użytkownik ” + textBoxImie.Text + ” “+ textBoxNazwisko.Text + “. Jest to ” + comboBoxPlec.Text +” i ma ” + textBoxWiek.Text + ” lat.”;
W tej linijce kodu w kontrolce “WynikTextBlock” we właściwości Text przypisujemy (znak “=”) tekst “Użytkownik” + zawartość właściwość text z kontrolki textBoxImie + odstęp (” “) + zawartość właściwości text z kontrolki textBoxNazwisko + napis “. Jest to ” + zawartość właściwości text z kontrolki comboBoxPlec + tekst ” i ma ” + zawartość właściwości text z kontrolki textBoxWiek.Text + tekst ” lat.”. Na samym końcu dajemy “;” ponieważ każda komenda w kodzie C# powinna kończyć się “;”
Ok 🙂 Odpalmy naszą aplikację i zobaczmy jak ona działa. W tym celu wybieramy przycisk debug w naszym Visual Studio.
Podajemy dane na formularzu i klikamy przycisk “Wyświetl”.
Udało się 🙂 Zrobiliśmy pierwszy formularz, używając kilku z kontrolek, które przedstawiłem w poprzednich wpisach.
Na zadanie domowe 😛 Spróbuj dodać jeszcze kilka kontrolek i rozszerzyć formularz o dodatkowe pola, np. listę rozwijaną z opcjami czy nasz użytkownik uczy się, studiuje czy pracuje oraz np. jakie jest jego hobby.
Ok, to na tyle na dzisiaj 🙂 Nie zapomnij o zadaniu domowym, bo to podstawa, żeby ćwiczyć samemu.
P.S.
Poniżej wklejam również zawartość plików MainWindow.xaml oraz MainWindow.xaml.cs, które można przekleić całe i uzyskać efekt końcowy.
<Window x:Class="AplikacjaFormularz.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:AplikacjaFormularz"
mc:Ignorable="d"
Title="MainWindow" Height="450" Width="800">
<Grid>
<TextBox x:Name="textBoxImie" HorizontalAlignment="Left" Margin="53,125,0,0" Text="Podaj swoje Imię" TextWrapping="Wrap" VerticalAlignment="Top" Width="120"/>
<TextBox x:Name="textBoxNazwisko" HorizontalAlignment="Left" Margin="53,178,0,0" Text="Podaj swoje nazwisko" TextWrapping="Wrap" VerticalAlignment="Top" Width="120"/>
<TextBox x:Name="textBoxWiek" HorizontalAlignment="Left" Margin="53,234,0,0" Text="Podaj swój wiek" TextWrapping="Wrap" VerticalAlignment="Top" Width="120"/>
<Label x:Name="label" Content="Imię" HorizontalAlignment="Left" Margin="53,94,0,0" VerticalAlignment="Top"/>
<Label x:Name="label1" Content="Nazwisko" HorizontalAlignment="Left" Margin="53,152,0,0" VerticalAlignment="Top"/>
<Label x:Name="label2" Content="Wiek" HorizontalAlignment="Left" Margin="53,208,0,0" VerticalAlignment="Top"/>
<ComboBox x:Name="comboBoxPlec" HorizontalAlignment="Left" Margin="53,285,0,0" VerticalAlignment="Top" Width="120">
<ComboBoxItem Content="Kobieta"/>
<ComboBoxItem Content="Mężczyzna"/>
</ComboBox>
<Button x:Name="button" Content="Wyświetl" HorizontalAlignment="Left" Margin="356,369,0,0" VerticalAlignment="Top" Width="55" Click="button_Click"/>
<Label x:Name="label3" Content="Wynik" HorizontalAlignment="Left" Margin="526,94,0,0" VerticalAlignment="Top"/>
<TextBlock x:Name="WynikTextBlock" HorizontalAlignment="Left" Margin="526,125,0,0" TextWrapping="Wrap" VerticalAlignment="Top"/>
</Grid>
</Window>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 AplikacjaFormularz
{
/// <summary>
/// Interaction logic for MainWindow.xaml
/// </summary>
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
}
private void button_Click(object sender, RoutedEventArgs e)
{
WynikTextBlock.Text = "Użytkownik " + textBoxImie.Text + " "+ textBoxNazwisko.Text + ". Jest to " + comboBoxPlec.Text +" i ma " + textBoxWiek.Text + " lat.";
}
}
}