MediaPlayer Control SKins

 

O, ano? Marunong ka na maglagay ng mediaplayer control ng silverlight sa webpage mo pagkatapos mong mabasa yung nauna kong blog tungkol sa silverlight mediaplayer control? Astig diba? Ngayon naman, pagusapan natin paano palitan ang itsura, o ang tinatawag na SKIN ng iyong mediaplayer control para… MAS ASTIG!

Para sa blog na ito, ay itutuloy ko lang ang project na ginawa ko dun sa nauna kong blog. At ipapakita ko sayo kung paano muna palitan ng skin ang mediaplayer control.

Ang aking videoplaying demo, ay may isang silverlight control na nagpapatakbo ng isang maikling video. Ang itsura nito ay:

image

Kung sasabihin mong baduy ang itsura ng mediaplayer control na ito, hindi ako papalag. Baduy naman kasi talaga eh. Sana medyo mukhang professional diba? Palitan natin.

Para palitan ang skin, simple lang. Sa design time (o habang hindi umaandar ang site) buksan sa DESIGN view ang iyong page sa pamamagitan ng VS08 at hanapin ang smarttab nito sa bandang itaas sa kanan ng control. i-click ang smarttab at may lalabas na popup menu. Makikita mo ang salitang "import skin":

image

*maaring maging iba ang maging itsura ng makikita mong popup menu. Nung nagsimula pa lang akong mag-aral ng silverlight na ito, ay Choose Skin ang pangalan ng drop down list na iyan at Save Skin ang nakasulat na link.

I-click mo lang ito at mayroong lalabas na tinatawag ng Import Skin Dialog Box. Para din itong Open File Dialog at makikita mo ang isang maliit na browser kung saan makakapili ka na ng ibang skins. May ilang skins nang ibinigay ang microsoft at amg mga ito ay makikita sa path na:

image

pasensya na, tinatamad akong isulat ang path, sundan mo na lang yan. 🙂 Sa path na iyan, ay makikita mo ang ilang mga skins na ginawa na ng microsoft at pwede mo nang gamitin. At akalain mo yun! May skin nang ang pangalan ay PROFESSIONAL! Yun ang pipiliin ko.

image

Ganito ang itsura ng mediaplayer control na may PROFESSIONAL na skin:

image

Sadya kong dinagdagan ng code ang aking project para maipakita ang pinagkaiba ng skin na professional at.. ahhmmm… hindi professional? 😀

Oo, alam ko ang nasa isip mo ngayon, wala namang astig dyan sa ganyang pagpalit ng skin. Alam kong ang gusto mo ay isang skin na.. personalized kumbaga. Hindi naman iyon imposible diba? Walang imposible, hindi pa lang ito nagagawa.

Kung malikot ang iyong kukote at mouse, siguradong sinubukan mo nang buksan ng notepad ang skin na itinuro mo kanina sa pamamagitan ng Import Skin Dialog. At alam kong nakita mo nang ito ay isang XAML file. Ang isang XAML file ay maari nating i-edit para magkaron tayo ng sarili nating skin! YES!

Tignan natin ang itsura ng xaml file nung Professional na skin:

<?xml version="1.0" encoding="utf-8"?>
<Canvas xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Width="800" Height="600">
  <Canvas.Resources>
    <Storyboard x:Name="PlayPauseButton_MouseEnter">
      <DoubleAnimationUsingKeyFrames Storyboard.TargetName="PlayPauseButton" Storyboard.TargetProperty="(UIElement.Opacity)">
        <SplineDoubleKeyFrame KeyTime="00:00:00.3000000" Value="1"/>
      </DoubleAnimationUsingKeyFrames>
    </Storyboard>

HAH! XML! Magbasa pa tayo sa bandang gitna:

<Canvas Width="800" Height="600" Canvas.Left="0" Canvas.Top="0">
   <Rectangle x:Name="Rectangle" Width="799.954" Height="72.6677" Canvas.Left="1.33334" Canvas.Top="527.61" Stretch="Fill">
     <Rectangle.Fill>
       <LinearGradientBrush StartPoint="0.87947,0.0279442" EndPoint="0.87947,0.9753">
         <LinearGradientBrush.GradientStops>
           <GradientStop Color="#FF72A7DA" Offset="0.0146484"/>
           <GradientStop Color="#FF2F4151" Offset="0.494141"/>
           <GradientStop Color="#FF000914" Offset="0.5"/>
           <GradientStop Color="#FF001024" Offset="0.884766"/>
           <GradientStop Color="#FF80A0C6" Offset="1"/>
         </LinearGradientBrush.GradientStops>
       </LinearGradientBrush>
     </Rectangle.Fill>
   </Rectangle>

AHA ulit! May mga tags lang na nagsasabi kung paano idodrowing ang skin! Isa lang ang ibig sabihin nito! Pwede nating i-edit ang professional.xaml? HINDE! Sa microsoft yun eh! Gumawa ka ng sarili mong skin, personalized nga diba? Ano ang iyong ipanggagawa? Expression Studio.

Ang gagamitin mo ay Expression Blend 2 ha, hindi pa sinusuport ng 1 ang silverlight eh.

Para sa isang mas malalim na talakayan tungkol sa paggawa ng skin ng media control, i-download mo ito. MS-Word Document yan, na naglalaman ng isang naaaaapakalalim at ENGLISH na pagpapaliwanag ng silverlight mediaplayer control at paano palitan ang skin.

Para sa demo ko na ito, syempre mayroon na akong nakahandang isang gawa nang skin. Ito ay itinuro ko sa ImportSkin Dialog at ang naging itsura ng mediaplayer control ko ay..

image

Kung saan lumalabas lamang ang player controls kapag naitapat mo ang mouse pointer mo dito. YAN ANG ASTIG!

Paano iyan nagawa? Ganito, una, i right-click ang iyong xaml skin sa solution explorer at piliin ang Open in Expression Blend…

image

Bubuksan nito ang expression Blend 2 at ito ang iyong makikita:

image

Ito ang itsura ng iyong xaml file sa Expression Blend 2.

i-Rightclick ito at piliin ang "View Xaml" para makita ang xaml version ng skin.

Gagawa tayo ngayon ng isang maliit na pagbabago..

Hanapin mo ito sa iyong xaml file:

<Canvas x:Name="StopButton"…

Pakekelaman natin ang itsura ng PlayPause button.. 😀

Pinalitan ko lang ang value ng Opacity nung canvas mula 0.5, ginawa kong 1 at ito ang iyong makikita:

image 

 

Sa susunod naman, gagawa tayo ng DATABOUND na silverlight mediaplayer control at sasamahan natin ng fileupload control.. gagayahin natin ang youtube.. at tatawagin mong.. IyoTube! CORNY!

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