Interfete Web

M-am gandit sa mai tweekuiesc putin la elementul interfetei noaste. Ar fi dragut ca acel slider sa nu stea mereu in calea ci sa apara doar atunci cand avem nevoie de el, adica atunci cand trecem cu mousul peste el. La plecarea cu mousul sliderul trebuie sa devina aproape invizibil. Asta m-a dus cu gandul la crearea unei mici animatii Silverlight, legata de proprietatea "Opacity" a Sliderului. In starea normala, sliderul va avea opacitatea 15% si aceasta va creste progresiv pana la 100% cand sliderul este in starea MouseOver. Pentru aceasta, va trebui sa modificam putin si controlul de slider, sa il extindem :)

1. In Expression Blend, vom deriva<link> controlul slider adaugat pe buton. Pentru aceasta va trebui sa intram in modul de editare al butonului creat in "lectia" trecuta. (Click dreapta pe buton , Edit Control Parts -> Edit Template).

2. Faptul ca am "derivat" controlul Slider, ne-a desfasurat codul XAML pentru controlul Slider.

3. Acest pas, poate fi facut atat in Expression Blend cat si in Visual Studio. Eu fiind mai mult programator decat designer, prefer sa lucrez in Visual Studio, scriind direct cod XAML. (In plus de asta nici nu sunt asa obisnuit cu Expression Blend inca). Deci, deschidem Visual Studio, deschidem pagina de cod Page.XAML si cautam templateul Sliderului creat.
In primul rand, in desfasurarea templateului cautam tagul <vsm:VisualStateManager.VisualStateGroups>. Vom gasi acest tag ca si copil al tagului de tip Grid numit "Root" care este containerul principal al cotrolului. In acest tag vom adauga (daca nu exista deja) starile "Normal" si "MouseOver" astfel :
<vsm:VisualState x:Name="Normal"><Storyboard></Storyboard></vsm:VisualState>
<vsm:VisualState x:Name="MouseOver"><Storyboard></Storyboard></vsm:VisualState>In interiorul elementului Storyboard vom adauga animatiile care dorim sa se execute la intrarea in starea specificata de parinte. Dupa cum mentionam la inceputul articolului, vrem ca in starea Normal sa avem o opacitate de 15% iar in starea MouseOver sa avem opacitatea 100%. Iata si codul pentru a realiza acest lucru :
<vsm:VisualState x:Name="Normal">
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="Root" Storyboard.TargetProperty="Opacity">
<SplineDoubleKeyFrame KeyTime="00:00:01" Value="0.5"/>
<SplineDoubleKeyFrame KeyTime="00:00:02" Value="0.15"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</vsm:VisualState>
<vsm:VisualState x:Name="MouseOver">
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="Root" Storyboard.TargetProperty="Opacity">
<SplineDoubleKeyFrame KeyTime="00:00:01" Value="0.5"/>
<SplineDoubleKeyFrame KeyTime="00:00:02" Value="1"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</vsm:VisualState>

4. Se compileaza si se ruleaza aplicatia.

Aici s-a terminat micul meu experiment cu crearea unui element de interfata web mai special, poate fara prea multa aplicativitate practica dar cu ajutorul caruia am explorat cateva din featurele interesante aduse de Silverlight.

Nu pretind ca ce am facut pana aici este perfect, este posibil sa fi avut scapari insa avand in vedere ca si pentru mine este "a first" cred ca pot fi scuzat :).
Voi incerca sa hostez mica aplicatie undeva si voi reveni cu un link.

Alex.