[WPF][C#] Podstawowe czyności w naszych programach

 W tym dłuższym poście mam zamiar przedstawić parę rzeczy które można wykonywać w aplikacji typu WPF.
M.in.:
- Wstawianie kontrolek: button, layer itp.(już jest)
- Bindowanie danych(jeszcze nie dodane)
- Edycja danych podczas pracy programu(jeszcze nie dodane)

W więc do dzieła:)

Na początku przedstawię ogólną zadadę działania aplikacji WPF:

 

Na żółto przedstawiłem formę która uruchamia się jako pierwsza, następnie po wczytaniu zasobów uruchamia okno o nazwie MainWindow.xaml.  

Klikając dwa razy na MainWindow.xaml zobaczymy pustą formę wyglądu naszej aplikacji:

 

Poniżej znajduje się okno z kodem XAML - gdzie możemy ręcznie edytować właściwości naszej formy:

Pierwszą rzecz którą dodamy niech będzie kontrolka button:

w Toolbox klikamy na element Button a następnie klikamy w naszej formie na miejsce gdzie chcemy umiścić naszą kontrolkę(oczywiście zawsze możemy zmienić jej pozycje już z widoku naszej formy):

 

teraz analogicznie dodamy kontrolkę layer, całość powinna wyglądać tak:

 Tutaj macie ułożenie mojego okna w XAML,wraz z kontrolką z następnego przykładu w razie problemów z ułożeniem swoich komponentów(skopiować i podmienić w okienku z kodem XAML):

<Window x:Class="TestWPF.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <Button Content="Button" Height="23" HorizontalAlignment="Left" Margin="226,160,0,0" Name="button1" VerticalAlignment="Top" Width="75" Click="button1_Click" />
        <Label Content="Label" Height="47" HorizontalAlignment="Left" Margin="200,103,0,0" Name="label1" VerticalAlignment="Top" Width="138" />
        <TextBox Height="23" HorizontalAlignment="Left" Margin="200,189,0,0" Name="textBox1" VerticalAlignment="Top" Width="120" />
    </Grid>
</Window>

1. Wywołanie funkcji Click: zrobimy tak aby po naciśnięciu buttona, wyświetlił się napis TEST, w tym celu musimy dodać wywołanie odpowiedniej funkcji w naszym kodzie dla naciśnięcia button robimy to w ten sposób:
1) klikamy prawym przyciskiem myszy na naszej kontrolce button i wybieramy Properties :

 2) W nowo pojawionym się oknie wybierany zakładkę Events i podwójnie klikamy na elemencie Click:

spowoduje to utworzenie się nowej funkcji w pliku .cs naszej formy:

Teraz wystarczy w podanej metodzie odnieść się do naszej kontrolki label wpisując odpowiednią instrukcje zmieniającą właściwość Content naszego komponentu:

Wciskamy F5 i patrzymy na efekt naszego działania, teraz po kliknięciu na button, kontrolka label zmieni swój tekst na "TEST".

2. Wprowadzanie tekstu: Ten przykład będzie natomiast modyfikacją powyższych czynności, ponieważ zamiast zdefiniowanego z góry przez nas tekstu, użytkownik będzie mógł wyświetlić swój wpisany tekst do kontrolki typu TextBox:

nim jednak do tego dojdzie należy dodać ją z Toolboxa do naszej formy:

Teraz modyfikujemy funkcję button1_Click na poniższą(oprócz tego dodajemy zmienną typu string na początku naszej klasy):

powoduje ona że po wpisaniu(lub nie) przez nas tekstu pojawia się on w label.
Edytując trochę kod funkcji możemy się ustrzec, przypadku w którym, użytkownik nie wpisze nic do textbox`a. Zrobić możemy to w ten sposób:

dzięki temu jeśli użytkownik zapomni wpisać tekstu, odpowiednia informacja w label powiadomi go o tym:)

3. Czas na kwadraty: zmienimy teraz funkcjonalność naszego kodu tak aby wyświetlał utworzony przez nas kwadrat w różnych miejscach po każdym przyciśnięciu naszego button`a. Odnośnie naszego button`a to zmienimy również jego nazwę na np. taką: "Przemiszczaj":)

W naszej formie możemy zostawić tylko nasz button i label. Bo na razie tylko one będą nam potrzebne
Dodatkowo dodajemy z Toolboxa Rectangle(kwadrat): Całość prezentuje się u mnie w te nsposób:

Oto kod XAML:

<Window x:Class="TestWPF.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <Button Content="Button" Height="23" HorizontalAlignment="Left" Margin="226,160,0,0" Name="button1" VerticalAlignment="Top" Width="75" Click="button1_Click" />
        <Label Content="Label" Height="47" HorizontalAlignment="Left" Margin="200,103,0,0" Name="label1" VerticalAlignment="Top" Width="138" />
        <Rectangle Height="63"
                   Width="150"
                   Margin="188,189,166,0"
                   Name="rectangle1"
                   Stroke="Black"
                   VerticalAlignment="Top"                  
                   Stretch="Fill" />
    </Grid>
</Window>

Teraz wystarczy lekko zmodyfikować kwadrat(by dowiedzieć się na jego temat coś więcej) i przystąpimy do modyfikacji funkcji Click naszego buttona by przemieszczał nasz kwadrat w losowe miejsca.
Zwiększymy teraz linie graniczne kwadratu. Do wnętrza znacznika <Rectangle dodajemy wyrażenie:

StrokeThickness="4"

Dzięki temu powiększymy granice naszego kwadratu.
Jeśli chcemy zastosować efekt gradianu dający nam taki efekt:

musimy zmienić kod naszego kwadratu na poniższy:

<Rectangle Height="75" Margin="214,189,202,47" StrokeThickness="4">
            <Rectangle.Fill>
                <LinearGradientBrush>
                    <GradientStop Color="Yellow" Offset="0.0" />
                    <GradientStop Color="Orange" Offset="0.5" />
                    <GradientStop Color="Red" Offset="1.0" />
                </LinearGradientBrush>
            </Rectangle.Fill>
        </Rectangle>

warto porównać sobie budowę tego kwadratu, z tym przed edycją, zwłaszcza na zakończenia znaczników.
Więcej na ten temat na stronie:
Rysowanie kwadratu w Canvas
Painting with a Brush
Shapes and Basic Drawing in WPF Overview - czyli rysowanie podstawowych figur
Nam więcej efektów na razie nie jest potrzebne.
Dobra teraz dodajmy do naszego kwadratu jego name, tak byśmy go mogli wywołać z kodu i edytować jego właściwości:

Name="kwadrat"

Teraz modyfikujemy kod naszego okna

Dodajemy tutaj klasę jako tablice

Thickness[]

dzięki której możemy przechowywać nasze "pseduolosowe" pozycje kwadratu:) Można to wykonać oczywiście uniwersalnie, tak że pozycja kwadratu może być jeszcze bardziej "losowa" jednak to już trochę więcej obliczeń a nie oto nam teraz chodzi. Dodaje tutaj odpowiednie instrukcje byście nie musieli się męczyć z ich przepisaniem:

            marginesKwadratu = new Thickness[6];

            marginesKwadratu[0] = new Thickness(71, 160, 345, 76);

            marginesKwadratu[1] = new Thickness(344, 43, 72, 193);

            marginesKwadratu[2] = new Thickness(325, 213, 91, 23);

            marginesKwadratu[3] = new Thickness(147, 216, 269, 20);

            marginesKwadratu[4] = new Thickness(251, 75, 165, 161);

            marginesKwadratu[5] = new Thickness(0, 236, 416, 0);

Co do losowych liczb to mam nadzieję że sprawa jest już wam trochę znana, jak nie to myślę że szybko zrozumiecie o co chodzi w tym kodzie analizując go.
Co do funkcji Window_Loaded to można ją utworzyć automatycznie wchodząc w Properties MainWindow czyli naszego okna, analogicznie jak do naszego buttona.

Na koniec zmienimy nazwę naszego buttona. Są na to 2 sposoby:
a) zmieniamy jego nazwę w Properties buttona na np:"Losuj pozycje":

b) zmieniamy jego nazwę programowo

Teraz wciskając klawisz F5  i wciskając button o zmienionej nazwie, możecie przetestować działanie aplikacji.