Hõbevalge nagu Silverlight :)

Mulle meeldib, kui mulle kirjutatase ja Silvelright  kohta küsitakse, sest siis on kohe blogimise teema olemas ja on ka teada, et lugejatele see huvi pakub. Seega andke tuld ja kirjutage mulle jaanametsamaa [ät] gmail.com

Küsimus oli selle kohta, kuidas Silverlight rakendustes navigeerida. Navigeerimine või linkimine jagub Silverlight rakendustes kaheks. Lingid välistele veebilehtedele ja lingid teistele XAML lehtedele rakenduse sees.

Lingid veebehtedele

Selleks, et rakenduses asuva Silverlight logo peale vajutades jõutaks: http://h6bevalge.riiul.com lehele. Lohistame vajaliku objekti (näiteks see logo) peale HyperlinkAction käitumismalli ning paneme paika atribuudid.

1. Mis sündmuse korral navigeerima hakatakse?

Vajutamise korral: nupul alati Click, teistel objektide puhul MouseLeftButtonUp sündmus. Samas võib ka olla peenem ja rohkem segadust tekitada ja avada uue veebilehe igakord, kui hiirega logo peale sattume .

2. Kus link avatakse?
   • samas aknas _self (meie Silverlight rakendus pannakse kinni :()
   • uues aknas _blank
3. Kuhu link viib? – http://h6bevalge.riiul.com

Navigeerimine erinevate XAML lehtede vahel

Ma pean tunnistama, et minu arvates ei ole hea mõte teha terve veebileht Silverlightis aga kindlasti on erandeid, ega vist muusikute veebilehti ilma fancy Flashita ette kujutakski Aga kui vaja navigeeruda xaml lehtede vahel, siis käib see nii:

1. Kõigepealt tuleb projekti lisada viide System.Windows.Controls.Navigation teegile.

See asub C:\Program Files\Microsoft SDKs\Silverlight\v3.0\Libraries\Client\ kataloogis.

2. Lisada MainPage.xaml päisesse viide sellele nimeruumile

xmlns:navigation=”clr-namespace:System.Windows.Controls assembly=System.Windows.Controls.Navigation”

3. Lisada MainPage.xaml lehele navigatsioon (näiteks nupud) ning üks Frame, mille sisu me väljavahetame

<StackPanel Orientation=”Vertical”>
<StackPanel Orientation=”Horizontal”>
<Button Click=”Button_Click” Tag=”/Views/Esimene.xaml” Content=”Esimene” FontSize=”18″ />
<Button Click=”Button_Click” Tag=”/Views/Teine.xaml” Content=”Teine” FontSize=”18″ />
</StackPanel>
<navigation:Frame x:Name=”valjavahetatavSisu” HorizontalContentAlignment=”Stretch” VerticalContentAlignment=”Stretch” Source=”/Views/Esimene.xaml” />
</StackPanel>

4. Lisada objektidele (mis meil linkidena käituvad) tag-id, mille väärtus on .xaml faili path, kuhu me navigeerima peame.
5. Iga kord kui vajutatakse mõnda “navigatsiooni elementi”, navigeerida õigele xaml lehele.

private void Button_Click(object sender, RoutedEventArgs e)
{
Button nuppMidaVajutati = sender as Button;
string url = nuppMidaVajutati.Tag.ToString();

this.valjavahetatavSisu.Navigate(new Uri(url, UriKind.Relative));
}

Ja ongi valmis Loomulikult see siin eeldab, et MainPage.xaml faili kõrval asuvad kataloogis Views ka failid (File->New Item-> Page) Esimene.xaml, Teine.xaml jne.

Tähelepanekud

Kui Silverlight rakenduses nüüd ringi navigeerida, siis hakkavad automaagiliselt tööle veebilehitseja edasi ja tagasi nupud. Jooksvalt muutub ka lehekülje aadress (saab sõbrale saata!) ja kui Page päises muuta Title väärtust, muutub ka lehe pealkiri Väga lahe!

Märkus

Esimese hooga tegin uue projekti, lisasin uue Page tüüpi faili ning püüdsin sarnast koodi, mis siin näites tööle saada. Kuidagi ei õnnestunud. Siis surfasin veidi internetis ning selgus tõsiasi, et kõikides näidetes on vaikimisi Page failid kataloogis Views. Miks? Nähtavast on see koht, kust Silverlight vaikimisi vaateid otsib, kui tahta struktuuri muuta, siis tuleb teha ümberkaardistamist (UriMapping), millest räägib mõni järgmine blogipostitus .