Windows Phone Tutorial 9: Opprette en egendefinert knapp i uttrykksblanding (del 2)

Windows Phone Tutorial 9: Opprette en egendefinert knapp i uttrykksblanding (del 2)
Windows Phone Tutorial 9: Opprette en egendefinert knapp i uttrykksblanding (del 2)

Video: Windows Phone Tutorial 9: Opprette en egendefinert knapp i uttrykksblanding (del 2)

Video: Windows Phone Tutorial 9: Opprette en egendefinert knapp i uttrykksblanding (del 2)
Video: Видеотренинг. Программирование под Windows Phone 8 - YouTube 2024, April
Anonim

Denne opplæringen er en fortsettelse av Part-I, som en del av Windows Phone-opplæringen: Ved å bare kopiere og lime koden fra Visual bare Studio til uttrykksblanding, har vi laget en kopi av Silverlight-appen i Expression Blend. Nå skal vi designe en egendefinert knapp ved å følge trinnene:

1. Bekreft at MainPage.xaml er åpen i designvinduet og at det nåværende arbeidsområdet er satt til Design. Hvis du vil vise gjeldende arbeidsområde, velger du arbeidsområder i Vindu menyen og sørg for at Design alternativet er merket.

2. I designvinduet høyreklikker du på "Klikk på meg"-Knappen, peker til Rediger mal og velg Lag tom.

3. I Opprett ControlTemplate Resource dialog, sett inn Navn tilFancyButton, hold gjeldende verdi av " Dette dokumentet"I Definer inn alternativet, og klikk OK.

Image
Image

4. Kontroller at Objekter og tidslinjepanel er synlige, hvis ikke, velg Vindu og så Objekter og tidslinje for å vise dette panelet. Ellers kan du tilbakestille arbeidsområdet ditt.

5. Endre gjeldende rotasjonslayoutbeholder i malen. I Objekter og tidslinje panel, høyreklikk barnet Nett element inni Mal, peker på Endre oppsetttype, og velg Grense.

Image
Image

6. med Grense element som fortsatt er valgt i Objekter og tidslinje panel, flytt til Eiendommer panel og under Utseende, sett verdien av BorderThickness eiendom til2 for hver av sidene og sett deretter verdien av CornerRadius eiendom til15.

Image
Image

7. Neste, i Børster delen, velg Bakgrunn eiendom og velg Gradient pensel alternativ. Deretter velger du venstre gradientstopp og angir verdien til en lysegrå farge, for eksempel#FFADADAD. Deretter velger du riktig gradientstopp og angir verdien til en mørkegrå farge, for eksempel# FF0A0A0A.

Image
Image

8. Nå, i Børster delen, velg BorderBrush eiendom, velg en Solid farget pensel og velg en lysegrå farge, for eksempel# FFC0C0C0.

Image
Image

9. Det neste trinnet er å legge til en bildetekst. Først må du sørge for at Grense element forblir valgt i Objekter og tidslinje panel.

10. Skift nå til Eiendeler panel, velg kontroller kategori, og bla nedover listen som vises til høyre for kategorien for å finne TextBlock styre. Dobbeltklikk deretter på elementet i listen for å sette inn en forekomst av denne kontrollen nestet inne i Grense element i malen.

Image
Image
Image
Image

11.Nå, i Verktøy panel, velg utvalg verktøy eller trykk V for å gjenopprette valgmodus.

12. i Objekter og tidslinje panel, velg den nylig lagt til TextBlock element. Så, i Eiendommer panel, utvide Børster kategori og sett inn forgrunnen børste til en lys farge, for eksempel#FFFFFFFF.

Image
Image

13. Nå utvider du Oppsett kategori og angi verdien av HorizontalAlignment og Vertikal justering egenskaper tilSenter. Deretter angir verdien av Margin eiendom til10 for venstre og høyre side, og til4 for topp og underside.

Image
Image

14. Link the Tekst eiendom av Tekstboks kontroll i malen til Innhold Egenskapen til knappen Templated Control. Å gjøre dette:

  • Utvid Vanlige egenskaper kategori
  • Klikk Avanserte egenskapsalternativer-angitt med et firkantet ikon ved siden av verdien av eiendommen
  • Å velge Template Binding for å vise en liste over egenskaper i den templerte kontrollen som kan knyttes til denne egenskapen
  • Velg Innhold eiendom fra denne listenNotice at verdien av Tekst eiendom endres til "Klikk på meg"- verdien som er angitt for Innhold egenskapen til knappen - og at eiendommen nå vises med en gul oversikt for å indikere at den er mal-bundet.
Image
Image

15. Trykk på CTRL + S for å lagre den oppdaterte filen.

16. Du er nå klar til å teste den nye egendefinerte knappen. trykk F5 å bygge og kjøre programmet

Relaterte innlegg:

  • Windows Live Essentials Offline installatører for alle språk Linker
  • Komplett liste over hurtigtaster for Windows Live Writer
  • Gratis Windows Metro Style Template for Visual Basic brukere
  • Windows Phone Tutorial 11: Opprette en animasjon for bannerteksten
  • Teststasjon Windows OS i VirtualBox - Detaljert skjermbilde guide

Anbefalt: