Kezdőlap > .NET, Windows Phone 7 > Pivot és Panoráma

Pivot és Panoráma

2012. április 30. hétfő Hozzászólás Go to comments

A Pivot és a Panoráma két nagyon gyakran használatos vezérlő. Lehetőséget biztosít, hogy a tartalmakat kategorizálva horizontálisan elnyújtsuk.

image

A két vezérlő használata nagyon hasonló, így ezt egy panoráma vezérlőn keresztül fogjuk megnézni. Ez a két vezérlő annyira népszerű, hogy külön elrendezési sablonja van.

A következő példában egy egyszerű panoráma vezérlőn alapuló alkalmazást fogunk létrehozni, de annyival megspékeljük a dolgot, hogy egy animációt is elhelyezünk benne, mégpedig a panoráma hátterét fogjuk módosítani, ráadásul most az animációt kódból fogjuk létrehozni!

1. Készítsünk egy új Windows Phone Panorama Aplication-t!

image

2. Az alkalmazássablon már eleve tartalmaz egy Panoráma vezérlőt. Mivel a háttér képét is szeretnénk módosítani, készítsünk egy új mappát a solution explorer-ben! A mappa neve legyen „Images” (Add -> New Folder)! A mappába helyezzünk el két képet! Az én esetemben ez most img1.jpg és img2.jpg. A képek Build Action-jét állítsuk Content-re!

3. Nyissuk meg a MainPage.xaml fájlt! A griden belül (LayoutRoot) látható, hogy van egy panoráma control. Ennek a vezérlőnek adjuk a „panorama” nevet, a Title pedig legyen most a „Windows Phone” szöveg!

<controls:Panorama x:Name="panorama" Title="Windows Phone">

Ez a panoráma vezérlő legfelső címkéjét cseréli. Figyeljük meg, hogy a Panoráma vezérlő egy vagy több PanoramaItem-et tartalmazhat! Ezek a PanoramaItem-ek egy vezérlőt tudnak magukba foglalni, ami persze lehet egy elrendezésvezérlő is.

4. Vegyük szemügyre az első PanoramItem-et! A Header-jét írjuk át beállításokra, és a benne található vezérlőt töröljük, majd helyezzünk el benne egy gridet, amibe egy egyszerű gombot dobjunk fel! A gomb content-je legyen a „Háttér módosítása” szöveg! Kattintsunk kétszer a gombra, hogy betöltsük a klikk eseményét! A XAML valahogy így fog kinézni:

<controls:PanoramaItem Header="Beálltítások">

    <Grid>

<Button Content="Háttér módosítás" Height="72" HorizontalAlignment="Left" Margin="20,215,0,0" Name="button1" VerticalAlignment="Top" Width="307" Click="button1_Click" />

    </Grid>

</controls:PanoramaItem>

Az esemény törzsét még hagyjuk üresen, és térjünk vissza a MainPage.xaml-jéhez!

5. A Panoráma vezérlőnknek most változtassuk meg a hátterét, és az alapértelmezett kék kép helyett állítsuk be a korábban hozzáadott img1.jpg-t!

<controls:Panorama.Background>

    <ImageBrush ImageSource="/Images/img1.jpg"/>

</controls:Panorama.Background>

6. Most már kipróbálhatjuk az alkalmazást. Indítsuk el, és nézzük meg, mi lesz ennek az eredménye!

7. Szép ez az alkalmazás, de szeretnénk kicsit látványosabbá varázsolni. Nyissuk meg a MainPage.xaml.cs fájlt! Első körben oldjuk fel a System.Windows.Media.Imaging névteret:

using System.Windows.Media.Imaging;

8. Készítsünk egy Fade In / Out animációt! Ezt kódból a következőképpen fogjuk megtenni:

private void FadeInOut(DependencyObject target, Storyboard sb, bool isFadeIn)

{

    Duration d = new Duration(TimeSpan.FromSeconds(1));

    DoubleAnimation daFade = new DoubleAnimation();

    daFade.Duration = d;

    if (isFadeIn)

    {

        daFade.From = 1.00;

        daFade.To = 0.00;

    }

    else

    {

        daFade.From = 0.00;

        daFade.To = 1.00;

    }

    sb.Duration = d;

    sb.Children.Add(daFade);

    Storyboard.SetTarget(daFade, target);

    Storyboard.SetTargetProperty(daFade, new PropertyPath("Opacity"));

    sb.Begin();

}

9. A gomb klikk esemény törzsébe példányosítsunk egy Storyboard-ot! Iratkozzunk fel annak a Completed eseményére, majd hívjuk meg a FadeInOut metódust (első paramétere egy DependencyObject, ami ebben az esetben a panoráma háttere, második paramétere a storyboard, harmadik pedig egy bool, amivel az animáció típusát határozzuk meg (FadeIn true vagy FadeOut false)).

Storyboard sbFadeIn = new Storyboard();

sbFadeIn.Completed += new EventHandler(sbFadeIn_Completed);

FadeInOut(panorama.Background, sbFadeIn, true);

10. Most már csak a storyboard Completed eseményének a törzsét kell megírnunk. Itt létrehozunk egy BitmapImag-et, amit átadunk egy ImageBrush-nak. Ezt követően megint készítünk egy Storyboard-ot, és meghívjuk a FadeInOut metódust, csak most FadeOut rész fog lefutni.

void sbFadeIn_Completed(object sender, EventArgs e)

{

    BitmapImage bmp = new BitmapImage(

        new Uri("/Images/img2.jpg", UriKind.Relative));

    ImageBrush imgBrush = new ImageBrush();

    imgBrush.ImageSource = bmp;

 

    this.panorama.Background = imgBrush;

    Storyboard sbFadeOut = new Storyboard();

    FadeInOut(this.panorama.Background, sbFadeOut, false);

}

11. Indítsuk el az alkalmazást, és nézzük meg működés közben!

image

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: