Kezdőlap > .NET, Windows Phone 7 > Animáció létrehozása – XAML (ProgressBar)

Animáció létrehozása – XAML (ProgressBar)

2012. április 26. csütörtök Hozzászólás Go to comments

Amikor elkezdünk fejleszteni Windows Phone 7 alá, a kezdő fejlesztő gyakran belefut abba a hibába, hogy szeretne animációs gif-et használni a felületen, ezt viszont a Windows Phone 7 nem támogatja. Megjeleníti ugyan a képet, de csak az első képkockáját. Sokszor a fejlesztő a weben ajax és jQuery világában megismert folyamat jelzéseket szeretné alkalmazni, de nem tudja.

image

Hogyan lehetne ezt a problémát megoldani? Itt bizony kreativitásra és kitartásra lesz szükségünk! Az alábbi példán egy körbe-körbe futó progressbar-t készítünk el. Ezt egy Canvas-en fogjuk megrajzolni, majd ezt fogjuk elforgatni. Itt látható a pörgő loading készen, XMAL-ben (ezt célszerű egy külön vezérlőbe elhelyezni). Figyeljünk rá, hogy most fekete színű körökből épül fel, ezt az alkalmazásunknak megfelelően változtatni kell!

<Canvas RenderTransformOrigin="0.5,0.5" Width="120" Height="120">

                <Ellipse Width="21.835" Height="21.862" Canvas.Left="20.1696" Canvas.Top="9.76358" 

        Stretch="Fill" Fill="#E6000000"/>

                <Ellipse Width="21.835" Height="21.862" Canvas.Left="2.86816" Canvas.Top="29.9581" 

        Stretch="Fill" Fill="#CD000000"/>

                <Ellipse Width="21.835" Height="21.862" Canvas.Left="5.03758e-006" Canvas.Top="57.9341" 

        Stretch="Fill" Fill="#B3000000"/>

                <Ellipse Width="21.835" Height="21.862" Canvas.Left="12.1203" Canvas.Top="83.3163" 

        Stretch="Fill" Fill="#9A000000"/>

                <Ellipse Width="21.835" Height="21.862" Canvas.Left="36.5459" Canvas.Top="98.138" 

        Stretch="Fill" Fill="#80000000"/>

                <Ellipse Width="21.835" Height="21.862" Canvas.Left="64.6723" Canvas.Top="96.8411" 

        Stretch="Fill" Fill="#67000000"/>

                <Ellipse Width="21.835" Height="21.862" Canvas.Left="87.6176" Canvas.Top="81.2783" 

        Stretch="Fill" Fill="#4D000000"/>

                <Ellipse Width="21.835" Height="21.862" Canvas.Left="98.165" Canvas.Top="54.414" 

        Stretch="Fill" Fill="#34000000"/>

                <Ellipse Width="21.835" Height="21.862" Canvas.Left="92.9838" Canvas.Top="26.9938" 

        Stretch="Fill" Fill="#1A000000"/>

                <Ellipse Width="21.835" Height="21.862" Canvas.Left="47.2783" Canvas.Top="0.5" 

        Stretch="Fill" Fill="#FF000000"/>

   <Canvas.RenderTransform>

      <RotateTransform x:Name="SpinnerRotate" Angle="0" />

   </Canvas.RenderTransform>

   <Canvas.Triggers>

     <EventTrigger RoutedEvent="ContentControl.Loaded">

      <BeginStoryboard>

       <Storyboard>

        <DoubleAnimation Storyboard.TargetName="SpinnerRotate" 

          Storyboard.TargetProperty="(RotateTransform.Angle)" 

          From="0" To="360" Duration="0:0:01" 

          RepeatBehavior="Forever" />

       </Storyboard>

     </BeginStoryboard>

  </EventTrigger>

 </Canvas.Triggers>

</Canvas>

Az eredménye:

image

Reklámok
Kategóriák:.NET, Windows Phone 7 Címke: , ,
  1. Még nincs hozzászólás.
  1. No trackbacks yet.

Vélemény, hozzászólás?

Adatok megadása vagy bejelentkezés valamelyik ikonnal:

WordPress.com Logo

Hozzászólhat a WordPress.com felhasználói fiók használatával. Kilépés / Módosítás )

Twitter kép

Hozzászólhat a Twitter felhasználói fiók használatával. Kilépés / Módosítás )

Facebook kép

Hozzászólhat a Facebook felhasználói fiók használatával. Kilépés / Módosítás )

Google+ kép

Hozzászólhat a Google+ felhasználói fiók használatával. Kilépés / Módosítás )

Kapcsolódás: %s

%d blogger ezt kedveli: