In primul articol dedicat primei aplicatii Silverlight pentru Windows Phone 7 am aratat arhitectura unei aplicatii si am creat un proiect de tip Windows Phone Application. Vom continua dezvoltarea aplicatiei Calculator prin adaugarea controalelor necesare si scrierea codului pentru comportamentul aplicatiei.

Ierarhia claselor

Clasa UIElement este o clasa de baza pentru toate controalele care apar ca un obiect vizual si cu care utilizatorul poate interactiona prin touch.

Singura clasa abstracta care mosteneste UIElement este FrameworkElement care adauga functionalitati pentru amplasare si data binding.

Cele mai multe clase din Silverlight deriva direct din clasa FrameworkElement (exemplu, TextBlock, Image) sau prin intermediul claselor Panel sau Control (TextBox, Grid, Button).

Intr-un program Silverlight pentru Windows Phone, toate controalele se afla sub forma unui tree. Acesta incepe cu un obiect de tipul PhoneApplicationFrame care reprezinta intreaga suprafata vizuala a telefonului (frame). Un frame poate gazdui o pagina (PhoneApplicationPage), dar nu intregime, pentru ca va fi afisata si bara de status. In cazul celei mai simple aplicatiei, o pagina contine un Grid care la randului lui va contine un StackPanel (aici ne vom adauga controalele necesare aplicatiei noastre).

Intreaga structura a clasei UIElement este pe msdn.

Pentru exemplu nostru care presupune adunarea a doua numere, vom avea nevoie de urmatoarele controale:

• doua elemente TextBlock. Acest tip de control este la baza afisarii textului in aplicatiile Silverlight.
• Doua elemente Textbox pentru introducerea numerelor.

In Silverlight Windows Phone exista doua tipuri de controale care permit “input” de la utilizator: Textbox (care accepta text single-line sau multiline) sau PasswordBox (folosit pentru campurile confidentiale).

Exemplu de cod XAML generat pentru un Textbox:

<TextBox Height="72" HorizontalAlignment="Left" Margin="12,27,0,0" Name="txtFirstNumber" Text="" VerticalAlignment="Top" Width="438" />

• Un element Button.

Pentru a atribui un delegat (o referinta la o metoda) pentru evenimentul de Click al butonului, se poate da un dublu click pe buton sau Properties – Events – Click.

In Silverlight, cand se “leaga” un eveniment se va adauga o proprietate in codul XAML corespunzator controlului:

<Button Content="Compute" Height="72" HorizontalAlignment="Left" Margin="12,181,0,0" Name="btnCompute" VerticalAlignment="Top" Width="160" Click="btnCompute_Click" />

Metoda apelata pentru calcul va fi:

        private void CalculateResult()
        {
            float firstNumber;
            float secondNumber;

            if (!float.TryParse(txtFirstNumber.Text, out firstNumber))
                firstNumber = 0; 
             if(!float.TryParse(txtSecondNumber.Text, out secondNumber))
                secondNumber = 0;
            float result = firstNumber + secondNumber;

            MessageBox.Show(result.ToString());
        }

Cu ajutorul metodei TryParse tratam cazul in care conversia de la String la un Int32 nu s-a efectuat success.

ShowMessage afiseaza utilizatorului un mesaj simplu. Daca se doreste afisarea lui pe mai multe linii, se poate scrie asa:

            MessageBox.Show("Eroare!" + System.Environment.NewLine + "Va rugam reincercati!");

Page title

Aceasta informatie este folosita pentru a afisa informatii despre continutul paginii. Utilizatorul nu poate interactiona cu acest element iar folosirea lui este optionala. In cazul in care se vrea utilizarea lui, pentru consistenta va trebui folosit in toate paginiele aplicatiei. De regula, in Page title se afiseaza numele aplicatiei sau un text relevant la datele afisate in pagina.

        <!--TitlePanel contains the name of the application and page title-->
        <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
            <TextBlock x:Name="ApplicationTitle" Text="Simple calculator" Style="{StaticResource PhoneTextNormalStyle}" />
            <TextBlock x:Name="PageTitle" Text="Calculator" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
        </StackPanel>

Point and pixels

Tot ceea ce inseamna dimensiune in Silverlight este determinat de pixel.

Trebuie sa tinem cont ca atunci cand setam o valoare pentru proprietatea FontSize pentru un control, aceasta va fi cu 33% mai mare (leading). De exemplu, daca setam marimea 36, valoarea efectiva va fi 48. Acest lucru este util pentru evitarea suprapunerii controalelor succesive, apropiate.

Valoarea implicita pentru FontSize este de 20.

In cele doua articole, am vazut cat de usor am creat in Visual Studio un proiect pentru o aplicatie Silverlight si care sunt fisierele standard. De asemenea, am folosit cateva controale de baza si am scris cod C# pentru comportamentul aplicatiei.

In urmatorul articol, vom adauga un toolkit care va permite lucrul cu mai multe controale decat cele din bara de instrumente standard a Visual Studio Express.