Introduction to Silverlight – Silverlight Controls

Ngayon na pamilyar ka na sa itsura ng isang Silverlight application, at least hindi ka na magtatanong kung ano yung tumama sayo kung sakaling sampalin ka ng isang Silverlight App. 😀

Tapos na ang Hello World application, kung saan nakita mo ang architecture ng isang Silverlight App, sana ay nagtaka ka kung ano yung mga bagong controls na kasama, o pwedeng gamitin sa isang silverlight application. Kung maayos mong nainstall ang Silverlight_Chainer, magiging ganito ang itsura ng toolbox mo habang na sa page.xaml ka ng isang SL-App

image

 

marami-rami rin ano? Pero syempre, dahil introduction pa lang ito, hindi natin magagamit lahat yan. Ang gagamitin lang muna natin ay yung mga common lang at yung mga controls na sa tingin ko ay magiging bago sa iyong paningin (Grid, StackPanel, Panel) at ang kanilang mga properties na una nating kailangan maintindihan.

At para mas maintindihan natin ang mga controls na ito, gagawa tayo ng isang simpleng data entry screen para sa isang Online Pizza Ordering System. Wala lang.. yun lang ang naisip ko eh.

Unahin natin ang GRID control. Ang Grid control sa Silverlight, kapag nagamit mo na ay parang yung dating Table control sa HTML. Mayroon siyang Rows at Columns. Ang mga importanteng kailangan maintindihan sa Grid control na ito, ay ang kanyang ColumnDefinition at RowDefinition Properties. Dito mo ilalagay kung ilang column at row ang gusto mong grid.

kapag gumawa ka ng isang SL-App, automatic na meron agad itong isang Grid Control kaya hindi ko na kailangan maglagay pa muna nito.

<UserControl x:Class="SLControls.Page"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Width="400" Height="300">
    <Grid x:Name="LayoutRoot" Background="Gray" ShowGridLines="True">

    </Grid>
</UserControl>

may mga binago lang akong kaunti para mag-iba ang itsura. Pinalitan ko lang muna ang kulay at ginawa kong "True" ang "ShowGridLines" property para habang nasa design time tayo ay nakikita natin ang mga lines. Aalisin ito bago natin paandarin ang app.

Ang kasunod na property na aayusin natin, para makapagdagdag ng rows ay ang RowDefinition property. Gusto kong maglagay ng ilang mga rows na aking gagamitin kayat ang idadagdag kong code ay..

image

Tandaan na ang <RowDefinition/> tag ay magdadagdag ng isang RowDefinition Class sa iyong app. mapapansin mo rin na kita na sa design view ang mga rows na idinagdag ko. Marami pang properties ang rowdefinition katulad ng Height at Width na kasama sa mga madalas nating papakialaman. Kung gusto mo pa ng dagdag na kaalaman sa listahan ng mga properties, sa ngayon kasi ang mairerekumenda ko lang na basahin ay yun munang msdn documentation tungkol dito. Kasi, wala pa akong alam na libro na tungkol sa Silverlight.

Tungkol naman sa Height at Width properties (kaya nabanggit ko ito) ay dahil ang total ng height at width ng lahat ng mga rows at columns na ilalagay mo.. dapat ay pareho sa height at width ng mismong UserControl mo. kasi kapag hindi sila pareho.. magiging magkaiba sila. HAHAHA!

Ngayon maglalagay naman ako ng columns.

para naman sa columns, eh di ano pa kundi ColumnDefinition naman ang ilalagay natin! Sus!

image

Ayaaaannn.. pormado na diba? Nilagyan ko ng values ang width property nung columns na nilagay ko kasi ang balak ko sa kaliwa ilalagay ko ang Flavor, Size at Toppings na choices at sa kanan ko naman ilalagay ang mga maaring pagpilian.

Simple lang diba?

Ngayon dadagdagan ko na ng ilang controls.. mga label.

Sa Silverlight, iba ang label na ginagamit, hindi sila tinatawag na label kundi TextBlock. At mayroon din silang mga properties na pwede mong pag-aralan sa msdn documentation ng silverlight.

Idadagdag ko na ang mga textblocks para sa kaliwang parte ng ating application

image

Ayan ha! Binilugan ko na yung importanteng parte! Ang unang mapapansin mo ay ang TextBlock control ay nakalagay sa LABAS ng Row at Column Definition pero sa LOOB ng Grid control. Sa una, maaring isipin mo na dun natin sya ilalagay sa loob ng rowdefinition tag na kung saan natin sya gustong lumabas pero hindi ganun ang silverlight. Para mailagay sya sa tamang row at column, mayroon naman syang Grid.Column at Grid.Row na property. Doon natin ilalagay ang tamang "coordinates" ng grid kung saan sya lalabas pag-andar ng application.

Tatapusin ko lang ang left side ng order form natin.

image

yan.. medyo pumoporma na..

Ngayon naman ay maglalagay na tayo ng mga nararapat na controls sa ating application. Para sa Flavor, ang gusto ko sana pagpilian ay Plain, Cheese, Meat at Veggie. At kailangan ay isa lang ang pwedeng pagpilian ng ating online customer. Kapag ang workflow ay kailangan isa lang ang pagpipilian, yung mga RadioButton o OptionButton ang unang maiisip. Pero paano kung madagdagan ang ating mga flavor? Kayat ang pinakamaganda sa ganitong sitwasyon ay ang tinatawag na ListBox. Ang pipiliin ko ay ang dropdown listbox o ComboBox para tipid sa space.

image

Sa ngayon, hardcoded pa ang items natin. Siguro sa bandang part 4 o part 5 pa lalabas yung databound controls natin so easy ka lang dyan muna.

Kung mapapansin mo yung name property ng combobox, ito ay binigyan ko ng pangalan sa syntax na x:Name="name" dahil.. ganun ang syntax nya eh, wala ako magagawa. haha!

Ayos na tayo sa combobox natin, kasunod naman natin ilalagay ay ang control na para sa pagpili ng size. Sa tingin ko kanina akala mo option button (o RadioButton) ang gagamitin at medyo na disappoint ka.. eh di option button naman ang gagamitin ko ngayon para sa size.

image

Ayannn.. pansinin ang ilang mga bagay:

1. May GroupName property ang mga RadioButton na inilagay ko. Yun yung property na gagamitin mo para malaman ng mga radiobuttons mo kung sino-sino sa kanila ang magkakagrupo para matupad yung behavior na isa lang sa kanila dapat ang pwede i-click.

2. Inilagay ko sila sa loob ng isa pang control.. ang StackPanel. Ang StackPanel ay pwede mong gamitin na parang DIV ng html para pagsamahin at ayusin ang mga controls mo. bakit ko ginamit nag stackpanel sa pagkakataong ito? Para lang mabago ko ang Orientation property para tabi-tabi ang mga radiobuttons at hindi magkakapatong. Kapag hinayaan ko silang magpatungan nang magpatungan.. baka sumobra dami ng radiobuttons natin. JOKE!

3. Yung rbSmall ay may karagdagang property na IsChecked at ito ang ginagamit para mai-set natin kung alin sa mga RadioButtons (pronounced redyobatons sa bandang Bulacan) ang may check agad pag-andar ng ating silverlight application.

ORAYT!!! konti na lang! hmmm.. ano pa ba kulang?

Maglalagay tayo ngayon ng isa pang stack panel at lalagyan natin ng mga chechbox sa loob para sa row ng Toppings..

image

Ayun! Tignan ang code.. ang simple diba? Para makagawa ng 2 columns na listahan ng mga toppings, naglagay ako ng dalawang stackpanel sa loob ng isa pa na nagsilbing container nila. Yung container nila.. "ToppingsParent" ay may Orientation na Horizontal at yung dalawang nasa loob "Left" at "Right" ay may orientation na Vertical.

Pansinin ang isang bagay pa.. yung parent na panel lang ang lalagyan mo ng assignment ng Grid.Row at Grid.Column.. at sasama na sa kanya ano man ang laman nya.

Ayun! Halos tapos na ang ating order entry form para sa Pizza! Ewan ko lang kung me oorder ng ganyang mga toppings.. hahaha!

Testing na!

image

AMPANGET!!! pero gumagana naman.. hehe.. ayusin ko lang ng kaunti..

Alisin ko yung grdlines.. palit ng konting kulay.. dagdag ng konting labels.. at..

image

Alam mo bang kaya kong basahin ang isip mo? Ang nasa isip mo ngayon.. JUICE KOH! Akala ko naman gaano kaganda gagawin! Hahaha!

Stay tuned sa next installment ng series na ito.. Gawa tayo ng databound na Silverlight app.. 😉

Advertisements
This entry was posted in Uncategorized. Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s