Joaca cu Silverlight 1.0

Din seria The Making Of, cum ar zice ‘mericanii. Dacă citiți mai jos, presupun că ați instalat măcar plug-in-ul de Silverlight pentru browser. Și că știți să instanțiați un obiect Silverlight în pagina HTML, că e documentat aici.

Vorbim despre bucățica de Silverlight de pe pagina de lansare cu magicienii (lansare Windows Server 2008, Visual Studio 2008 și SQL Server 2008). Mai exact despre cutiile cu săgețică ce apar din stânga la încărcarea paginii. Mai exact, cum faci animația triunghiului săgețică la trecerea mouse-ului peste titlu.

Normal că am început cu Canvas-ul principal:

<?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="880" Height="300">
</Canvas>

Canvas-ul se aseamănă cu <div>-ul din HTML. N-are reprezentare grafică, ci e un container de elemente grafice.

Înăuntrul Canvas-ului principal am început să construiesc cutiuța cu titlul "platformă sigură, de încredere". Asta va fi, la rândul ei, încapsulată într-un Canvas:

<Canvas x:Name="Title_Trust" Width="331" Height="74">
    <Rectangle Width="300" Height="74" Fill=’#99000000′ />
    <Rectangle Width="30" Height="74" Canvas.Left="301" Fill="#66000000"></Rectangle>
    <TextBlock Width="300" Height="30" Canvas.Left="20" Canvas.Top="27" Opacity="1.0" TextWrapping="Wrap" FontFamily="Verdana" Foreground="#FFFFFFFF" FontWeight="Bold">platformă sigură, de încredere</TextBlock>
</Canvas>

Celelalte 3 cutiuțe ar arăta similar, dar vor trebui deplasate în jos cu un atribut Canvas.Top="75", nu?

Avem deci 2 dreptunghiuri, unul mai lat și unul mai îngust. Și deasupra primului avem textul. Ne mai trebuie săgețica aia simplă. Așa că m-am uitat în help-ul Silverlight (ăla din SDK) și am desenat un triunghi:

<Path x:Name="Path_TitleArrow_Trust" Stroke="#FFFFFFFF" StrokeThickness="1" Fill="#FFFFFFFF" Canvas.Left="303" Canvas.Top="37">
    <Path.Data>
        <PathGeometry>
            <PathGeometry.Figures>
                <PathFigure StartPoint="7,0">
                    <PathFigure.Segments>
                        <LineSegment Point="0,-7"/>
                        <LineSegment Point="0,7"/>
                    </PathFigure.Segments>
                </PathFigure>
            </PathGeometry.Figures>
        </PathGeometry>
    </Path.Data>
</Path>

Triunghiul ăsta desenat cu Path va fi inclus, normal în același Canvas având x:Name="Title_Trust". În plus, vreau ca triunghiul meu să se deplaseze ușor când trec cu mouse-ul peste Canvas x:Name="Title_Trust". Pentru asta, am nevoie de câțiva pași:

  1. Să creez animația pentru triunghi.
  2. Să fac o funcție JavaScript care să-mi pornească animația.
  3. Să declar un eveniment pentru Canvas x:Name="Title_Trust" care va declanșa funcția JavaScript.

1 – Animația pentru triunghi

Imediat sub Canvas-ul rădăcină adaug un container de resurse – în Silverlight 1.0, containerul de resurse cuprinde doar animații:

<Canvas.Resources>
    <Storyboard x:Name="MovePath_TitleArrow_Trust">
        <DoubleAnimation Storyboard.TargetName="Path_TitleArrow_Trust" Storyboard.TargetProperty="(Canvas.Left)" From="303" By="20" Duration="0:0:0.3" AutoReverse="True" />
    </Storyboard>
</Canvas.Resources>

2 – Funcția care pornește animația

function Start_TitleArrow_Trust(sender, mouseEventArgs) { sender.findName(‘MovePath_TitleArrow_Trust‘).begin(); }

3 – Evenimentul care deplasează triunghiul săgețică

Adaug la Canvas x:Name="Title_Trust" un atribut MouseEnter="Start_TitleArrow_Trust".

Concluzie

Știu că pare al naibii de complicat la început. Dar cine a făcut ceva Dynamic HTML la viața lui, va găsi că animația cu Silverlight seamănă tare bine: fișierul Silverlight este un XAML cu taguri XML, semănând cu cele HTML, accesibile printr-un DOM ce poate fi manipulat cu JavaScript.

Pentru a învăța Silverlight cât de cât, mi-a luat vreo 3 zile. Iar obiectul Silverlight din pagină l-am creat în cca 6 ore scriind doar cod, cu mult Copy+Paste (pentru că sunt de felul meu un codău, căruia nu-i place WYSIWYG).

P.S. Să bag codul pentru toată bucata de Silverlight? Sunteți siguri?

Lasă un răspuns

Completează mai jos detaliile despre tine sau dă clic pe un icon pentru autentificare:

Logo WordPress.com

Comentezi folosind contul tău WordPress.com. Dezautentificare / Schimbă )

Poză Twitter

Comentezi folosind contul tău Twitter. Dezautentificare / Schimbă )

Fotografie Facebook

Comentezi folosind contul tău Facebook. Dezautentificare / Schimbă )

Fotografie Google+

Comentezi folosind contul tău Google+. Dezautentificare / Schimbă )

Conectare la %s