Creating a Button in Silverlight

Medyo matagal na rin ako naglalaro ng silverlight, pero nalilimutan ko magblog. SORRY! haha! Eto bago, gawa tayo ng button na may RollOver at click events. Babaguhin lang natin itsura gamit ang VisualStatemanager ng Blend2.

Mga Sangkap:

1. Expression Blend 2 SP1

2. Visual Studio 2008 SP1

3. Computer, Mouse, OS, etc..

una, gumawa ng bagong Silveright2 Application gamit ang ExpresionBlend2. Ang ibibigay kong pangalan ay buttonProject. Ikaw, bahala ka na sa buhay mo kung ano gusto mong pangalan..

Eto matindi.. magdodrowing lang ako ng rectangle at kukulayan ko ng asul.. eto ang kalalabasan na xaml.

 

<Grid x:Name="LayoutRoot" Background="White">
        <Rectangle Margin="216,206,220,221" Fill="#FF0D1951" Stroke="#FF000000"/>
    </Grid>

 

Tapos.. habang nakaselect ang rectangle, click lang ang Tools tapos MakeButton

image

may lalabas na dialog, tatanungin ka kung anong gusto mong ipangalan sa style ng button mo. Bigyan mo ng pangalan kung balak mong gamitin ulit ang style na yun. Kasi, kung ano man itsura ng rectangle mo ngayon, isasave nya yung xaml nyan sa styles (parang CSS) tapos pwede mong gamitin ulit sa ibang control na gagawin mong button. MyStyle ang ibibigay kong pangalan..

image

Ngayon mapapansin mong yung button ay may nakasulat nang “button” diba? Lagyan mo na rin nga pala ng pangalan yung button para pwede natin lagyan ng code.

Eto ang lalabas na xaml nya..

<Grid x:Name="LayoutRoot" Background="White">
        <Button x:Name="btnDemo" Margin="216,206,220,221" Style="{StaticResource myStyle}" Content="Click me baby!"/>
    </Grid>

Pinalitan ko rin yung text nya.. wag ka na kumontra.

Ngayon, ang gusto ko, kapag natapat ang mouse sa button na ito, ay lalaki sya ng kaunti at magiiba ang kulay nya.. sa MouseOver. Tapos pag click sa kanya, magiiba ang kanyang kulay.

ang gagawin ay..

1. Siguraduhing naka select ang button.. i-click ang button, tapos sa BreadCrumb bar, click mo yung button, tapos Edit natin ang template nya..

image

lalabas sa kaliwa yung states… may mouseover!!! Yehey!

image

Click mo yung parang Arrow na may Plus sign tapos irerecord natin ang magiging itsura nung button kapag mag mouseover..

Lalakihan natin kaya sa properties nya, babaguhin natin yung ScaleTransform Property at gagawin nating 1.3 ibig sabihin, we will increase the size by 30%

image

tapos… sa Pressed na state naman.. palitan natin ang fill color..

image

Yun!!! tapos stop mo na recording then RUN!!!! (wag kang tatakbo!) F5 ibig kong sabihin..

 

Okay ba resulta?

Ngayon, diba kanina sabi ko pwedeng gamitin yung style na nilagay mo dyan? ganito yan.. maglagay ka ng button ulit.. bahala ka kung san mo ilalagay

image

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