Práca s ovládaním obrázkov: Tutorial vývoja aplikácií Windows Phone Apps - časť 18

Práca s ovládaním obrázkov: Tutorial vývoja aplikácií Windows Phone Apps - časť 18
Práca s ovládaním obrázkov: Tutorial vývoja aplikácií Windows Phone Apps - časť 18

Video: Práca s ovládaním obrázkov: Tutorial vývoja aplikácií Windows Phone Apps - časť 18

Video: Práca s ovládaním obrázkov: Tutorial vývoja aplikácií Windows Phone Apps - časť 18
Video: How to Use Windows 7 Vista Windows TWEAK UI Video 23 2024, Smieť
Anonim

Teraz, keď sa oprieme o ovládanie udalostí a vstupov XAML, v tomto vývojovom rade aplikácie Windows Phone 7.5 Mango App, budeme sa pozrieť na kontrolu obrázkov, ktorá vám umožní zobraziť obrázky v aplikácii Silverlight Windows Phone 7.

Takže začnime!

Vytvorte nový projekt Windows Phone 7 s jedinečným názvom ako "ImageControlDemo". Teraz presuňte ovládací prvok obrázkov zo schránky na návrhový povrch. Teraz, aby sme zobrazili obrázok v ovládacom prvku, používame vlastnosť 'Zdroj' ovládacieho prvku obrázkov. Táto vlastnosť sa nachádza v okne Vlastnosti tesne pred vlastnosťou Stretch. Vlastnosť Zdroj definuje, odkiaľ bude obrázok pochádzať, aby sa zobrazil v ovládacom paneli obrázkov. Po kliknutí na elipsu vedľa vlastnosti Zdroj sa otvorí nové okno s požiadavkou na výber obrázka. Kliknutím na tlačidlo Pridať obrázok pridáte obrázok do projektu.

Pri výbere obrázka sa stane niekoľko zaujímavých vecí. Najprv Visual Studio automaticky vytvorí priečinok pod názvom Obrázky a pridá vybraný obrazový súbor. Po druhé vytvorí URI (Uniform Resource Identifier) / cestu pre prístup k obrázku, niečo ako '/Images,component/Images/Picture1.jpg'. Obrázok / Obrázok označuje balík nasadenia a to, čo sa objaví za bodkočiarkou, bude odkazovať na súbor v rámci balíka nasadenia po jeho zavedení do telefónu, t. J. Na súbor xap. Po kliknutí na tlačidlo OK v okne Vybrať obrázok sa obrázok načíta do ovládacieho prvku.

Ďalšou významnou vlastnosťou ovládania obrazu je vlastnosť Stretch. Nastavenie vlastnosti Stretch na možnosť Vyplniť; vyplní celú oblasť ovládania obrazu pomocou obrazu bez ohľadu na rozmery snímky. Zmena veľkosti ovládacieho prvku obrázka zmení veľkosť obrázka. Nehľadiac na pomer obrazu sa tým deformuje obraz. Nastavenie vlastnosti Stretch na Uniform udržiava správnu perspektívu vďaka vytyčovaniu výšky alebo šírky obrazu, ale nebude orezanie obrazu. Nastavenie vlastnosti Stretch na 'UniformToFill' vyznamenáva vertikálne a horizontálne rozmery obrazu. Ak je to potrebné, obraz sa v prípade potreby zachytí. Orezávanie môže byť adresované tým, že používateľovi umožňuje posunúť obrázok hore alebo dole, doľava alebo doprava. Aby ste to urobili, všetko, čo musíte urobiť, je obklopiť obraz pomocou ovládacieho prvku ScrollViewer a nastaviť viditeľnosť vodorovnej a zvislej posuvnej lišty na viditeľnú.
Ďalšou významnou vlastnosťou ovládania obrazu je vlastnosť Stretch. Nastavenie vlastnosti Stretch na možnosť Vyplniť; vyplní celú oblasť ovládania obrazu pomocou obrazu bez ohľadu na rozmery snímky. Zmena veľkosti ovládacieho prvku obrázka zmení veľkosť obrázka. Nehľadiac na pomer obrazu sa tým deformuje obraz. Nastavenie vlastnosti Stretch na Uniform udržiava správnu perspektívu vďaka vytyčovaniu výšky alebo šírky obrazu, ale nebude orezanie obrazu. Nastavenie vlastnosti Stretch na 'UniformToFill' vyznamenáva vertikálne a horizontálne rozmery obrazu. Ak je to potrebné, obraz sa v prípade potreby zachytí. Orezávanie môže byť adresované tým, že používateľovi umožňuje posunúť obrázok hore alebo dole, doľava alebo doprava. Aby ste to urobili, všetko, čo musíte urobiť, je obklopiť obraz pomocou ovládacieho prvku ScrollViewer a nastaviť viditeľnosť vodorovnej a zvislej posuvnej lišty na viditeľnú.
Jednotná vlastnosť riadenia obrazu
Jednotná vlastnosť riadenia obrazu

Posledná vec, než skončíme túto lekciu. V prípade, že chcete nastaviť obrázok pomocou kódu C #, všetko, čo musíte urobiť, je vytvoriť objekt objektu BitmapImage a špecifikovať URI v preťaženom konštruktore. Akonáhle je vytvorený objekt BitmapImage, všetko, čo musíte urobiť, je porovnávať s vlastnosťou zdroja ovládania obrazu.

BitmapImage myImage = nový BitmapImage (nový Uri ("/ Images; component / Images / Penguins.jpg", UriKind.Relative));

image1.Source = myImage;

Je to dosť jednoduché ovládanie a jeho užitočnosť sa podáva na mnohých miestach.

To je teraz, v ďalšom tutoriále sa dozvieme viac o štýloch a zdrojoch.

Súvisiace príspevky:

  • GPS, lokalizácia API a volanie webových služieb: Windows Phone Apps Vývojový výcvik - 25
  • Naučte sa vyvíjať aplikácie Windows Phone 7.5 Mango aplikácie: Časť 1
  • Windows Phone Tutorial 8: Vytvorenie vlastného tlačidla v zložke Expression Blend-I
  • Windows Phone Tutorial 4: Navrhovanie užívateľského rozhrania
  • Práca so štýlmi a zdrojmi: Windows Phone Apps Development Tutorial - časť 19

Odporúča: