C H A P T E R 8

193
The WebBrowser Control
IIIeIIIIkeIuIseudverIIsIngwhen,|usIIenshorIyeursugo,ceIIuIurphonecompunIesbegunIopromoIe
InIerneIuccessusuIeuIureoIIheIrdevIces.AscusIomersquIckIyIeurnedwhenIheyIrIedIogeIonIIne
IhuIIheIrphonescouIdonIydIspIuywebpugesproperIyIIIheywerewrIIIenInWIreIessMurkup
Lunguuge(WML)undnoIIheIrudIIIonuIHyperTexIMurkupLunguuge(HTML)usedInIhevusImu|orIIy
oIwebsIIes.VeryIewsIIescouIduIIordIobuIIdundmuInIuIncodeInIwosepuruIeIunguuges,undusu
resuII,webbrowsIngonmobIIephonesdIdnoIIukeoIIunIIIreIuIIveIyrecenIIy.
WeIIveInmuchmoreprogressIveIImesnow.TheIIrsIreIeuseoIIheWIndowsPhoneOSshIpped
wIIhInIerneILxpIorer7InsIuIIed,whIchmeunIIhuIunyconIenIIhuIcouIdbevIewedInIhedeskIop
versIonoIInIerneILxpIorer7couIduIsobevIewedonIhephone.AIoIhuschungedIn|usIoveruyeur
sInceIhuIIIrsIreIeuseoIWIndowsPhonedevIces.WIndowsPhone7.bcomeswIIhInIerneILxpIorer9
preInsIuIIed.WIIhInIerneILxpIorer9,youcunconsIrucIveryrIchUIswIIhInIhebrowserwIIhIheheIp
oIHTMLb.TheWIndowsPhoneSDKIncIudesuwebbtowsetconIroIIhuIyoucunuseIoembedoneor
moreInsIuncesoIusmuIIbuIIuIIycupubIebrowserInsIdeyouruppIIcuIIons.
InIhIschupIer,you`IIIeurnhowundwhenIouseIheWebBrowserconIroI.YouwIIIuIsobecome
IumIIIurwIIhuIewHTMLbconcepIsIoheIpyouupprecIuIeIheIuIIpoIenIIuIoIIhIspromIsIngsIundurd.
BuIIIrsI,IeI`sIookuIIhreecommonscenurIoswhereyouwouIdwunIIouseIhewebbtowsetconIroI.
.OTEThewebbtowsetcontrolinwindowsPhoneisver]similartothewebbtowsetcontrol]ouwoulduseif]ou
werecreatingafull-olown8ilverlightapplication(notthephoneversionofitj-withfewnotaoledifferences.
Certainfeatures,suchastheaoilit]todownloadandinstallActiveXcontrols,haveoeendisaoledtoprevent
securit]risksoriginatingfromsuchcomponents.0therdifferences,suchastheaoilit]toaccesslocalstorageand
theaosenceofcross-domainrestrictionsinthewindowsPhonewebbtowsetcontrol,allowformoreflexiole
orowseroehavioronwindowsPhoneascomparedto8ilverlight.
|ntroduc|ngthawab8rowsar0ontro|
ThemosIobvIousreusonIouseIhewebbtowsetconIroIIsIodIspIuywebconIenIwIIhInIhepugeoIu
WIndowsPhoneuppIIcuIIon.IorInsIunce,IIyou`redeveIopIngunuppIIcuIIonIhuIshowsTwIIIerIeeds
onuporIIonoIIhescreen,IheeusIesIwuyIodoIhIswouIdbeIocreuIeuwebbtowsetconIroIInIhe
uppIIcuIIonundnuvIguIeIougIvenTwIIIerpugeIromwIIhInIhuIconIroI.
CHAPTER8THEwEBBR0w8ERC0hTR0l
194
AnoIherreusonIouseIhewebbtowsetconIroIIsIoshowHTML-IormuIIedconIenIIhuIresIdes
IocuIIyonuWIndowsPhonedevIce.IorexumpIe,IIyoudecIdeIoIncIudeheIpIIIeswIIhyour
uppIIcuIIon,IheeusIesIwuyIocreuIeIhoseIIIeswouIdbeInIheIormoIHTMLwebpuges.Thenyou
couIdIoudIhosewebpugesInWIndowsPhoneunddIspIuyIhemInIhewebbtowsetconIroI.
IInuIIy,youcunuseIhewebbtowsetconIroIIoshowconIenIIhuIuWIndowsPhoneuppIIcuIIon
generuIesonIheIIy.ThuImeunsIhuIyoucuncomposeunHTMLpugedynumIcuIIyIncodeunddIspIuy
II,wIIhouIIIrsIwrIIIngIhuIwebpugeouIIodIsk.ThIsIscerIuInIyuhundyIeuIureIhuIuvoIdsIhe
InIermedIuIesIepsoIIIrsIwrIIIngunHTMLIIIeIoIocuIsIorugeundIhenreudIngII.ThIsIeuIureIs
ImporIunIwhenIheHTMLpugesyouwunIIoshowIheuserureconIexIsensIIIve.IorexumpIe,IIyou
uredeveIopIngunuppIIcuIIonIhuIIrucksbuskeIbuIIIeumsundyouwunIIoprovIdeIInksIoInIormuIIon
ubouIeuchIndIvIduuIpIuyeronuIeum,youwIIIwunIIobuIIdyourIIsIoIpIuyersbusedonIhenumeoI
IheIeumIheuserseIecIs.DynumIcconIenIgeneruIIonuIIowsyouIodo|usIIhuI.
ThIschupIerconsIsIsoIIwopurIs.InIheIIrsIpurIoIIhIschupIer,you`IIIeurnhowIouseIhe
cupubIIIIIesoIIhewebbtowsetconIroIInyouruppIIcuIIonbybuIIdIngusImpIecurbrowserIhuIseurches
IheWebIorphoIosoIpopuIurcurmodeIsunddIspIuysIhem.InIhesecondpurIoIIhIschupIer,youwIII
geIubrIeIInIroducIIonIoHTMLb,sInceIIIsbecomIngunIncreusIngIymorepopuIurpIuIIormIor
buIIdInguppIIcuIIonsboIhIorIheWebundmobIIedevIces.HTMLbsupporIonIheWIndowsPhone
pIuIIormIspreIIybIgnews,undInIhIschupIeryouwIIIdIscoverIhereusonsIorIhIs.
TogeIsIurIedexperImenIIngwIIhIhewebbtowsetconIroI,youmusIIIrsIcreuIeumuInpugeundudd
someUIeIemenIs,IncIudInguwebbtowsetconIroIIodIspIuywebundHTMLconIenI,usIIIusIruIedInIhe
nexIsecIIon.
Add|ngawab8rowsar0ontro|
BeIoreyoucunuseIhewebbtowsetconIroIIobrowseIorIheImugesoIcursonIIne,youneedIouddIhIs
conIroIIoyouruppIIcuIIon.IoIIowIhesesIepsIopIuceIhewebbtowsetconIroIInsIdeyouruppIIcuIIon:
1. CreuIeunewWIndowsPhoneuppIIcuIIonpro|ecI.LuunchVIsuuISIudIo2010
Lxpress,undseIecIIheWIndowsPhoneAppIIcuIIonIempIuIe.Thenchunge
Ihepro|ecInumeIowebbtowsetSampIeundcIIckOK.VIsuuISIudIowIIIseIupu
newpro|ecI.
2. IromIheVIewmenuseIecIOIherWIndowsTooIbox(uIIernuIeIy,youcun
cIIckIheIooIboxIcononIheVIsuuISIudIouppIIcuIIonbur)IoshowIheIooIbox
wIIhIheIIsIoIconIroIsuvuIIubIeIoruse.
3. IromIheIooIboxwIndowonIheIeII,seIecIIhewebbtowsetconIroI,cIIckII,
unddrugIIonIoIheWIndowsPhonedesIgnsurIuce,usshownInIIgure8-1.
4. PosIIIonundresIzeIheconIroIusneeded.InIIgure8-1,IhewebbtowsetconIroI
IsposIIIonedIoIukeIheupperIhIrdoIIhephonescreen.
5. IInuIIy,chungeIhenumeoIIheuppIIcuIIonIromMyAppIIcuIIonIoMyCur
Browser,undchungeIhenumeoIIhepugeIoCurLxpIorer.YoucundoIhuIby
doubIe-cIIckIngMainlage.xamIundedIIIngIheAppIicationTitIeund
lageTitIeeIemenIsuccordIngIy.
CHAPTER8THEwEBBR0w8ERC0hTR0l
19b
.OTEYoucansettheHeightandthewidthpropertiestoAuto.(Thisisthedefaultwhenthecontrolisfirst
droppedonthewindowsPhonedesignsurfaceandisnotresized.jYoucanalsosettheHotizontaIAIignment
andvetticaIAIignmentpropertiestoSttetch.Allthesesettingscomoinedwillallowtheorowserwindowto
expandasmuchaspossioleonthephonewithoutcoveringothervisioleelementsonthephonescreen.
WIIhIhewebbtowsetconIroIInpIuce,youurenowreudyIoIookuIhowIouseIhIsconIroIIoreuchoI
IhescenurIosprevIousIydescrIbed.

1Igurc8-1.TouddIIcWcbBrou:crconIroIIoIIcuIIcuIIon,drugIIjromIIcIooIboxunddroIIonIo
MuInPugc.xumIonIIcWIndou:PIoncdc:Ign:urjucc.
Us|ngawab8rowsar0ontro|to0|sp|aywab0ontant
InIheIIrsIoIIhewebbtowsetdemos,youwIIIuseIhIsconIroIIodIspIuyIheconIenIsoIIhewebsIIe.You
wIIIshowuIIsIoIphoIosoIoneoIIheIusIesIsIreeIcursInIheworIdIheLumborghInIGuIIurdo.
CHAPTER8THEwEBBR0w8ERC0hTR0l
196
1. WIIhIhewebbtowsetconIroIInpIuce,II`sIImeIouddcodeIoInIIIuIIzeIIs
conIenIwhenIIIouds.IIrsI,rIghI-cIIckMainlage.xamIInSoIuIIonLxpIorerund
seIecIVIewCode(orgodIrecIIyIoIheMainlage.xamI.csIIIe).
2. WheneverIheMyCurBrowseruppIIcuIIonIoudsIhewebbtowsetconIroI,IIIIres
oIIuloadedevenI.BycreuIInguloadedevenIhundIer,youcunwrIIecodeIo
dIspIuyuwebpugewIIhcurphoIos.AddIheIoIIowIngcodeIoIheMainlage()
consIrucIorIocreuIeIhehundIer:
webbtowseti.loaded = new koutedLventHandIet(webbtowseti_loaded);
3. NoIehowIhesumeVIsuuISIudIoshorIcuIsyouusedIorIheAppIIcuIIonBur
codeInIheprevIouschupIeruppIyhereusweII,numeIy,rIghIuIIeryouIype=,
VIsuuISIudIohInIsIhuI,IIyoupressIheTubkeyIwIce,IIwIIIcreuIeuIIoIIhe
necessurycodesIubsyouneedIoruhundIer.
4. NexI,IeI`scodeIheevenIhundIer.ToIhewebbtowseti_loaded()IuncIIon,udd
IheIoIIowIngcode,whIchwIIInuvIguIeIoMIcrosoIIBIng`sImugeseurchpuge
undpussIhephrusecursLumborghInIGuIIurdo"IoII.
webbtowseti.Navigate(new
Uti("http://www.bing.com/images/seatch?q=catslambotghini0aIIatdo"",
UtiKind.AbsoIute));
5. ThIscodecreuIesunewUtiob|ecIundspecIIIesIhuIIheUtiIsnoIIocuIIoyour
uppIIcuIIon(IhuIwouIdbeUtiKind.keIative),buIruIheruIocuIIononIhe
InIerneI(UtiKind.AbsoIute).
PressIbIodebugyouruppIIcuIIonundseeIheresuIIssoIur.YoushouIdnowseeLumborghInI
phoIos,courIesyoIIheMIcrosoIIBIngengIne.YoucuneusIIyexIendIhIsexumpIeIorespondIouser
InpuI.IorexumpIe,youcouIduseIheBIngImugeseurchIoshowphoIosoIunycurwhosenumeuuser
enIers.Here`show:
1. AdduIexIboxIoIhepugesoIhuIIheusercunchungeIhenumeoIIhecurIor
whIchBIngseurches.TodoIhuI,goIoMainlage.xamIunddIspIuyIhepugeIn
IhedesIgner(eIIherbydoubIe-cIIckIngMainlage.xamIorbyrIghI-cIIckIng
Mainlage.xamIundseIecIIngVIewDesIgner).IIIheIooIboxIsnoIvIsIbIe,seIecI
OIherWIndowsTooIboxIromIheVIewmenu,orcIIckIheIooIboxIconon
IheVIsuuISIudIouppIIcuIIonbur.CIIckunddrugIheTexIBoxIromIheIooIbox,
undposIIIonIIbeIowIhewebbtowsetconIroI.NexI,cIIckunddrugIheBuIIon
undposIIIonIInexIIoIheIexIbox.
2. BIghI-cIIckIheIexIboxundseIecIltopetties.DeIeIeeveryIhIngIromIheText
properIy.NexI,rIghI-cIIckIhebuIIonundchungeIhevuIueoIIIsContent
properIyIoShow It!.TheendresuIIshouIdresembIeIIgure8-2.
CHAPTER8THEwEBBR0w8ERC0hTR0l
197

1Igurc8-2.AddInguIcxIboxundubuIIonIoInIcrucIuIIIIIcFTQ1a^fbTaconIroI
3. II`sIImeIouddsomeInIerucIIvIIyIoyouruppIIcuIIon.WIIhMainlage.xamIsIIII
openIndesIgnvIew,doubIe-cIIckIhebuIIon.NoIIcehowIhemeIhod
buttoni_CIickopensbydeIuuIIwhenyoudoIhuI,reudyIoryourcode.PIuce
IheIoIIowIngcodeInIhebodyoIIhuImeIhod:
webbtowseti.Navigate(new Uti ("http://www.bing.com/images/seatch?q=cats "
textboxi.Text, UtiKind.AbsoIute));
4. PressIbIorunIheuppIIcuIIon.InIIIuIIy,youshouIdseeIhephoIosoIIhe
LumborghInIGuIIurdouddedInIheIIrsIpurIoIIhIsdemo.GouheudundIype
FordMustungInIheIexIbox,undcIIckIheShowII!buIIon.InIhewebbtowset
conIroI,youshouIdnowseeuseIoIphoIosoIIhIsgreuIAmerIcunmuscIecur.
BuIIhere`smore.YoucunuIsouseuwebbtowsetconIroIIodIspIuyHTMLIIIesundevensIrIngs
IhuIhuvebeensIoredIocuIIy.You`IIuseIhuIcupubIIIIyIouddheIpIuncIIonuIIIyIoIheCurBrowser
uppIIcuIIonInIhenexIsecIIon.
CHAPTER8THEwEBBR0w8ERC0hTR0l
198
Us|ngawab8rowsar0ontro|to0|sp|ayLoca|HTNL0ontant
IrequenIIy,youwIIIwunIIoIncIudedocumenIuIIonwIIhyouruppIIcuIIonIoudverIIseIIsIeuIuresIo
usersundunswerIheIrmosIcommonquesIIons.BecuuseoIIIssImpIIcIIyundubIquIIy(II`s
everywhere!),HTML,IhesumeIunguugeusedIocreuIewebpuges,husbecomeIhedeIuuIIIormuIIor
suchdocumenIuIIon.InIhIssecIIon,you`IIcreuIeusImpIeHTMLpugedescrIbInghowIoworkwIIhIhe
curphoIouppIIcuIIonIhuIyoucreuIedInIheprevIoussecIIon.IoIIowIhesesIepsIocreuIeundshow
HTMLconIenIonuWIndowsPhonedevIce:
1. BecuuseuddIngunHTMLIIIeIscurrenIIynoIunopIIonInVIsuuISIudIo
LxpressIorWIndowsPhone,youwIIIneedIouddunewXMLIIIeIoIhepro|ecI.
XMLIIIessupporIuuIomuIedsynIuxverIIIcuIIonIeuIures,mukIngIIhurderIor
youIomukeuccIdenIuImIsIukesIhunIIyouwerecreuIIngupIuInIexIIIIe.
BIghI-cIIckIhewebbtowsetSampIepro|ecIInSoIuIIonLxpIorerundseIecIAdd
NewIIem.ThenseIecIXMLIIIeIromIheIIsIoIuvuIIubIeIIemIypes.
2. TypeIheIoIIowIngInIhenewIycreuIedIIIe(youcunuIsocopyundpusIeIhIs
codeIromIheIIIesuvuIIubIeIordownIoudIorIhIschupIer):
htmI:
titIe:web btowset HeIp liIe/titIe:
body:
hi:weIcome to the windows lhone Cat btowset AppIication!
To view the cat photos, type the name oT the cat in the textbox and ptess "Show
It!"
bt/:bt/:lot exampIe, "lotd Mustang"/hi:
/body:
/htmI:
3. SuveIheIIIebycIIckIngIheSuvebuIIonInVIsuuISIudIo.NexI,rIghI-cIIck
XMlliIei.xmIInSoIuIIonLxpIorerundcIIckBenume.ChungeIhenumeoIIhuI
IIIeIoHeIp.htm,undmukesureIhuIIheBuIIducIIonIorIhuIIIIeIsseIIo
ConIenIbyrIghI-cIIckIngundseIecIIngProperIIesIobrIngupIheProperIIes
wIndow.
4. NowyouwIIIneedIocopyIheHeIp.htmIIIeIoIhesIorugeonIheWIndows
PhonedevIceorIheemuIuIor.Here`swhy:whIIeyouwouIdexpecIIhe
HeIp.htmIIIeIobeuvuIIubIeuuIomuIIcuIIyIoIheuppIIcuIIonrunnIngInsIdeIhe
WIndowsPhoneemuIuIorsInceII`supurIoIyourpro|ecI,IIIsn`I.Pro|ecIIIIes
IhuIdonoIbecomeexecuIubIecodeneedIobecopIedoverIoIheIocuIsIoruge
onIhephoneorIheemuIuIorbeIoreIheyureuvuIIubIeIormunIpuIuIIon.
Hence,HeIp.htmIIIecreuIedInIheprevIoussIepneedsIobeuvuIIubIeIoyour
uppIIcuIIonInsIdeIheWIndowsPhoneIsoIuIedSIoruge,whIchyoucunIhInk
oIusdIskspucereservedIorusebyyouruppIIcuIIononWIndowsPhone.There
IsuwhoIechupIer(ChupIer13)dedIcuIedIoIhesub|ecIoIIsoIuIedSIoruge.
Ioryourpurposeshere,however,IIwIIIbesuIIIcIenIIocopyHeIp.htmIoun
IsoIuIedSIorugeIocuIIonuponuppIIcuIIonIoud,undIhenreIrIeveIIIromIhere
IordIspIuybyIhewebbtowsetconIroI.TouccompIIshIhuI,sImpIyuddIhe
IoIIowIngusingdIrecIIvesIoIheIopoIIhecodepugeundIhencopyIhe
SaveHeIpliIeToIsoStotemeIhodInIoyourcode,usshownInLIsIIng8-1:
CHAPTER8THEwEBBR0w8ERC0hTR0l
199
using System.I0.IsoIatedStotage;
using System.windows.kesoutces;
using System.I0;
LIxtIng8-1.SucHcIFIIcTo1:oSIorcMcIIod
ptivate void SaveHeIpliIeToIsoStote()
{
stting sttliIeName = "HeIp.htm";
IsoIatedStotageliIe isoStote =
IsoIatedStotageliIe.0etUsetStotelotAppIication();

//temove the TiIe iT it exists to aIIow each tun to independentIy wtite to
// the IsoIated Stotage
iT (isoStote.liIeLxists(sttliIeName) == ttue)
{
isoStote.0eIeteliIe(sttliIeName);
}
StteamkesoutceInTo st = AppIication.0etkesoutceStteam(new Uti(sttliIeName,
UtiKind.keIative));
using (binatykeadet bt = new binatykeadet(st.Stteam))
{
byte]] data = bt.keadbytes((int)st.Stteam.length);
//save TiIe to IsoIated Stotage
using (binatywtitet bw = new
binatywtitet(isoStote.CteateliIe(sttliIeName)))
{
bw.wtite(data);
bw.CIose();
}
}
}
5. IInuIIy,youwIIIInvokeIheSaveHeIpliIeToIsoStotemeIhodIosuveundIhen
dIspIuyIheconIenIsoIHeIp.htmbynuvIguIIngIoIIInsIdeIhewebbrowser
whenIhebrowserIIrsIIouds.AddIhecuIIIoSaveHeIpliIeToIsoStoteInIhe
webbtowseti_loadedmeIhod,undseIIhewebbtowsetUBLIonuvIguIeIoIhe
HeIp.htmIIIe,usshownIoIIowIng.NoIeIhuIIheUtiob|ecIIsoIkeIativeIype,
whIchIndIcuIesIhuIyouureIoudIngconIenIIromIheIocuIsIorugeusopposed
IoIheInIerneI.
void webbtowseti_loaded(obect sendet, koutedLventAtgs e)
{
SaveHeIpliIeToIsoStote();
webbtowseti.Navigate(new Uti("HeIp.htm", UtiKind.keIative));
}
6. PressIbIorunIheuppIIcuIIon.YoushouIdseeIheHTMLheIppugedIspIuyed
InsIdeIhewebbtowsetconIroI.
InyouruppIIcuIIon,youcunuseIheIechnIqueshownprevIousIyIoprovIdedocumenIuIIonorheIp
IIIes,usweIIusconIucIInIormuIIonubouIyourcompuny.SomeIImes,however,uIIyouwunIIoshowIsu
shorI,nIceIyIormuIIedHTMLmessuge,undII`ssomewhuIIedIousIowrIIeundIncIudeuIIIhecodeIo
CHAPTER8THEwEBBR0w8ERC0hTR0l
200
suveHTMLIIIesIoIsoIuIedSIorugeundsuch,usshownInIheprevIoussecIIon.IorIunuIeIy,Ihe
webbtowsetconIroIhususoIuIIonIorscenurIosIIkeIhIs.InIhenexIsecIIon,youwIIIIeurnhowIobypuss
IsoIuIedSIorugeundshowHTMLgeneruIeddIrecIIybycode.
Us|ngawab8rowsar0ontro|to0|sp|ay0ynam|c0ontant
SupposeuuserenIersIord"InIheIexIboxoIyourphoIo-browsInguppIIcuIIon.UnIessyouqueryIhe
user,youwon`IknowwheIherIheusermeunIIoseurchIorIordMusIung"orIordI-1b0."OnewuyIo
IIndouIwouIdbeIocreuIeupugewIIhHTMLmurkupunddIspIuyIIIoIheuser,uskIngIormore
InIormuIIon.YoucouIdIhensuveIhegeneruIedIIIeIoIsoIuIedSIorugeundIoudIIusIngIheIechnIque
descrIbedInIheprevIoussecIIon.BuIIhuIwouIdcerIuInIybeucumbersomeupprouchIorsuchusImpIe
Iusk.LuckIIy,Ihere`sumucheusIerwuyIoshowudynumIcuIIygeneruIedHTMLpuge,usIngIhe
NavigateToSttingmeIhodoIIhewebbtowsetconIroI.ThIsmeIhodIukesusIngIeurgumenIusIrIng
IhuIconIuInsIhecompIeIeHTMLcodeneededIodIspIuyIhepugeInIhewebbtowsetconIroI.ThenexI
demoshows|usIhoweusyIIIsIouseIhIsmeIhod.
1. BrIngupIheMainlage.xamI.csIIIeInIhecodeedIIor,eIIherbydoubIe-cIIckIng
IIorcIIckIngIheMainlage.xamIIIIeInSoIuIIonLxpIorerundchoosIngVIew
Code.
2. NexIyouwIIIconsIrucIIheHTMLcodeIodIspIuyIoIheuser.MukeIhe
buttoni_CIickmeIhodIookIdenIIcuIIoIheIoIIowIngcode.NoIIcehow
NavigateToSttingIoudsupwhuIumounIsIoubusIcHTMLpugedIrecIIyInIo
IhewebbtowsetconIroI,wIIhouIyouhuvIngIosuveIhIsHTMLIoIsoIuIed
SIoruge.AIsonoIeIhuIbuIIdIngunHTMLsIrIngIncodebecomesubIIugIy
veryquIckIy,soNavigateToSttingshouIdnoIbeubusedIorIurgeHTML
messugesorIIIes.IIyoudoIuceIhepossIbIIIIyoIconsIrucIIngIurgechunksoI
HTMLIorusewIIhIheNavigateToSttingmeIhod,youmuywunIIoconsIder
usIngIheSttingbuiIdetcIuss,whIchwIIIuIIowyouIoconsIrucIHTMLInu
sIepwIsemunner.
iT (textboxi.Text.Tolowet() == "Totd")
{
webbtowseti.NavigateToStting("htmI:head:meta name='viewpott'
content='width=00, uset-scaIabIe=yes' /:/head:body:centet:div
styIe='Tont: AtiaI i2px;':
which lotd modeI wouId you Iike to see?bt:bt:
a hteT='http://www.bing.com/images/seatch?q=catslotdMustang':lotd
Mustang/a: ot a
hteT='http://www.bing.com/images/seatch?q=catslotdli0':lotd l-
i0/a:/styIe:/centet:/body:/htmI:");
}
eIse
{
webbtowseti.Navigate(new Uti("http://www.bing.com/images/seatch?q=cats "
textboxi.Text, UtiKind.AbsoIute));
}

3. PressIbIorunIheuppIIcuIIon.IIyouIypeFordInIheIexIboxundcIIckIhe
ShowII!buIIon,youshouIdseeudynumIcuIIygeneruIedHTMLmessugewIIh
CHAPTER8THEwEBBR0w8ERC0hTR0l
201
hyperIInksuskIngyouIocIurIIywhIchIordmodeIyouwouIdIIkeIosee,|usI
IIkeInIIgure8-3.

1Igurc8-3.DI:IuyIngdynumIcuIIygcncruIcdHMT1conIcnI
Munyweb-buseduppIIcuIIonshuvebeenbuIII,IromIrunsIuIorsIoeIuboruIee-commercesysIems,
unduIIoIIhemureeusIIyuccessIbIeundcouIdevenbeenhuncedwIIhIheuseoIIhewebbtowsetconIroI
onWIndowsPhone.BuIIhewebbtowsetconIroIcundoevenmore.InIhenexIsecIIon,youwIIIIeurnhow
IosuveIhewebpugesIocuIIysoIhuI,poIenIIuIIy,youcunpursecerIuInInIormuIIonorseurchwIIhInIhe
puges.
Sav|ngwabPagasLoca||y
YoucunuIsosuveIheconIenIsoIwebsIIesundwebpugesIoWIndowsPhoneussIrIngsoIHTMLcode
usIngIsoIuIedSIorugeundIheSaveToSttingmeIhodoIIhewebbtowsetconIroI.ThIsupprouchonIysuves
IheHTMLonupuge(oIcourse,youprobubIyuIreudyguessedIhuIIromIhenumeoIIhemeIhod!)und
CHAPTER8THEwEBBR0w8ERC0hTR0l
202
IgnoresIIsImugesundCSSIIIes.AIIersuvIngIheHTMLIoIsoIuIedSIoruge,youcunIoudIIondemund.
BeIoredoIngIhuI,however,mukesureIoreudIhesecurIIyconsIderuIIonsuIIheendoIIhIschupIer.
ThIsdemowIIIshowyouhowIosuveunHTMLwebpugeIocuIIyundIhenIoudIIuIuIuIerIIme.
1. OpenIhewebbtowsetSampIepro|ecI,undbrIngupMainlage.xamIInIhedesIgn
wIndow.
2. AddIwobuIIonsIoIheWIndowsPhonedesIgnsurIuce,usshownInIIgure8-4.
ChungeIheContentproperIyoIIheIopbuIIonIoSuveIoIocuIsIoruge."
ChungeIheContentproperIyoIIheboIIombuIIonIoLoudsuvedconIenI."

1Igurc8-4.AddIngIIcbuIIon:Iocr:I:IucbconIcnIIo1:oIuIcdSIorugc
3. MukesureIochungeIhenumesoIboIhbuIIons,usshownInIIgure8-4.You
cunchungeIhenumeInIheProperIIeswIndowbycIIckIngnexIIoIheBuIIon
IexIuIIheveryIopoIIheProperIIeswIndow.NumeIheIopbuIIonbtnSave,
undnumeIheboIIombuIIonbtnload.
4. NexI,wrIIeIheevenIhundIercodeIorIheSuvebuIIoncIIck.DoubIe-cIIckIhe
IopbuIIonIobrIngupMainlage.xamI.csIncodevIew.ChungeIhe
btnSave_CIickmeIhodusIoIIows:
CHAPTER8THEwEBBR0w8ERC0hTR0l
203
ptivate void btnSave_CIick(obect sendet, koutedLventAtgs e)
{
stting sttwebContent = webbtowseti.SaveToStting();
SaveSttingToIsoStote(sttwebContent);
}
5. NexIIsIheevenIhundIercodeIoIoudIheprevIousIysuvedwebpuge.DoubIe-
cIIckIheboIIombuIIon,undmukeIhebtnload_CIickmeIhodIookIIkeIhe
codebIockhere:
ptivate void btnload_CIick(obect sendet, koutedLventAtgs e)
{
webbtowseti.Navigate(new Uti("web.htm", UtiKind.keIative));
}
6. YouneedIouddIheImpIemenIuIIonoIIheSaveSttingToIsoStotemeIhod,
whIchwIIIperIormIheucIuuIsuveoIIheHTMLsIrIngIouIIIeInIheIocuI
sIoruge.TheIoIIowIngcodeuccompIIshes|usIIhuI:
ptivate void SaveSttingToIsoStote(stting sttwebContent)
{
IsoIatedStotageliIe isoStote =
IsoIatedStotageliIe.0etUsetStotelotAppIication();

//temove the TiIe iT it exists to aIIow each tun to independentIy wtite to
// the IsoIated Stotage
iT (isoStote.liIeLxists("web.htm") == ttue)
{
isoStote.0eIeteliIe("web.htm");
}
StteamkesoutceInTo st = new StteamkesoutceInTo(new
MemotyStteam(System.Text.Lncoding.UTl8.0etbytes(sttwebContent)), "htmI/text");

using (binatykeadet bt = new binatykeadet(st.Stteam))
{
byte]] data = bt.keadbytes((int)st.Stteam.length);
//save TiIe to IsoIated Stotage
using (binatywtitet bw = new
binatywtitet(isoStote.CteateliIe("web.htm")))
{
bw.wtite(data);
bw.CIose();
}
}
}
7. MukesureIhebuttoni_CIickevenIIooksIdenIIcuIIoIheonehere:
ptivate void buttoni_CIick(obect sendet, koutedLventAtgs e)
{
webbtowseti.Navigate(new Uti
("http://www.bing.com/images/seatch?q=cats " textboxi.Text,UtiKind.AbsoIute));
}
CHAPTER8THEwEBBR0w8ERC0hTR0l
204
8. YouurenowreudyIoIesIIheuppIIcuIIon.PressIbIorunII,IypeFord
MustungInIheIexIbox,undcIIckIheShowII!buIIon.PhoIosoIIheIord
MusIungshouIduppeurInIhebrowserwIndow.NexI,cIIckIheSuveConIenIIo
IsoIuIedSIorugebuIIon.TheneruseIhewordMu:IungIromIheIexIbox,
IeuvIngonIyFord,undcIIckIheShowII!buIIon.AIrIendIyremInderIhuIyou
needIoprovIdemoreInIormuIIonpopsup.IInuIIy,cIIckLoudSuvedConIenI
IoshowIhe(dIsIorIed)IhumbnuIIsoIIheIordMusIung.
TheconIenIIsdIsIorIedbecuuseonIyIheHTMLoIIhewebpugeIssuved.MunyCSSsIyIesheeIs
IhuIconIroIIheposIIIonIngoIeIemenIsundIheIrIookurenoIpersIsIeduspurIoIIheSaveToStting
meIhod.ImugesmuybemIssIngusweII,sInceIhepuIhsIoIhoseImugesmuyuIsonoIongerbevuIId.
0hoos|ng0|sp|ayandSacur|tySatt|ngs
InquIIeuIewcuses,IhewebpugesIookIhesumeInboIhIhedeskIopversIonoIInIerneILxpIorerund
IheWIndowsPhoneInIerneILxpIorerMobIIebrowser,onwhIchIhewebbtowsetconIroIIsbused.There
uremunycuses,however,wherespecIuIconsIderuIIonsuppIyIoIhewebbtowsetconIroIrunnIngon
WIndowsPhone.ThenexIIewsecIIonswIIIgooverIhosespecIuIcuses.
V|awport
InInIerneILxpIorerMobIIe,IhevIewporIIsurecIunguIurregIonIhuIconIroIswhereIexIwIIIwruponu
puge.AIIheIImeoIIhIswrIIIng,onIyIhreeproperIIesuresupporIedIorIhevIewporI:height,width,und
uset-scaIabIe.TheheightundwidthproperIIesconIroIIheheIghIundIhewIdIhoIIhevIewporI
uccordIngIy,wIIhvuIuesrungIngbeIween480und10,000IorIheheIghIundbeIween320und10,000Ior
IhewIdIh.Theuset-scaIabIeproperIyconIroIswheIheruusercunzoomInundouIwIIhInIheconIenI
oIIhevIewporI.(BusIcuIIy,IhIsseIIIngconIroIswheIheruusercunzoomInIoIheconIenIshownInsIde
IhewebbtowsetconIroI.)ThIsproperIyhusIwopossIbIevuIues:yesundno.ThedeIuuII(und
recommended)seIIIngIorIhIsproperIyIsyes.YouseIIheproperIIesoIIhevIewporIInsIdeIhemetaIug,
usshownInIheexumpIeInIhenexIsecIIon.
CSS
ThereIsuIsounInIerneILxpIorerMobIIespecIIIcCSSproperIy,-ms-text-size-adust,IhuIconIroIsIhe
sIzeoIIheIexIdIspIuyedonIhescreen.WhenIhebrowserIrIesIodeIermIneIhemosIreudubIeIormuI
IorgIvenconIenIwIIhInIheInIerneILxpIorervIewporI,IheconIenIIszoomedIn,undIIIexIIspresenI,
IheIexIsIzeIsud|usIeduccordIngIoIheseIIIngoIIhIsproperIy.IIIhIsCSSproperIyIsseIIoautoIoru
gIveneIemenI,WIndowsPhoneIrIesIodeIermIneIheIexIsIzeIhuIwIIIbemosIreudubIeonugIven
screen.IIIhuIproperIyIsseIIonone,WIndowsPhonedoesnoImukeunyud|usImenIsIoIexI.ThereIs
uIsouIhIrdopIIonIorIhIsproperIy:unumerIcpercenIugevuIue,whIchwIIIscuIeIheIexIIromIIs
orIgInuIsIzeuccordIngIoIhepercenIugespecIIIed.JusIIIkeunyoIherCSSproperIy,-ms-text-size-
adustcunbeseIIorIhewhoIepugeorunyporIIonoIIhepuge.LeI`sIukeuIookuIunexumpIeIhuIwIII
heIpyouvIsuuIIzeIhIsproperIy:
1. BeIerIoIheHeIp.htmIIIeyoucreuIedIorshowIngsIuIIcHTMLconIenIInIhe
webbtowsetconIroI.LdIIIhuIIIIeIomukeIIIookIIkeIheIoIIowIngHTMLbIock.
Inessence,youuresImpIyuddInguCSSdiv:eIemenIundInIroducIng-ms-
text-size-adusturoundoneoIIheeIemenIs:
CHAPTER8THEwEBBR0w8ERC0hTR0l
20b
htmI:
head:
titIe:web btowset HeIp liIe/titIe:
/head:
body:
hi:weIcome to the windows lhone Cat btowset AppIication!
To view cat photos, type the name oT the cat in the textbox and ptess "Show It!"
bt/:bt/:lot exampIe, div styIe= "-ms-text-size-adust:)0/":"lotd
Mustang"/div:
/hi:
/body:
/htmI:
2. PressIbIorunIheuppIIcuIIon.YoushouIdseeIheIexIIordMusIung"2b0
percenIIurgerIhunIheresIoIIheIexIonIhepuge(uIIhoughIheresIoIIheIexI
conIenImuybescuIedusweIIIoud|usIIoIhecurrenIvIewporI).
SecurIIy
WIIhphonesconsIunIIybecomIngsmurIerundsmurIer,"Ihere`suIwuysIhedungeroImobIIe
uppIIcuIIonsbehuvIngbudIy,wheIherunInIenIIonuIIyornoI.ToheIpproIecIphoneusersIromIhemosI
commonIypesoIsecurIIyprobIemspIuguIngdeskIopcompuIersconnecIedIoIheInIerneI,MIcrosoII
InIroduceduseIoIsecurIIyruIesIorIoudIngwebconIenIonIoIhephone.AIIWIndowsPhone
uppIIcuIIonsmusIobserveIheseruIesIIIheyureIorunonWIndowsPhonedevIces.
AsWIndowsPhonedeveIopers,wemusIbeuwureoIIhesesecurIIyresIrIcIIonsIoensureIhe
smooIhesIpossIbIeperIormunceoIouruppIIcuIIons.TheIoIIowIngIIsIsummurIzesIIemsIhuIureeIIher
dIsubIedor|usIdIIIerenIInIheInIerneILxpIorerMobIIeversIoncompuredIoIIsdeskIopcounIerpurI:
1. ScrIpIIsdIsubIedbydeIuuIIInIhewebbtowsetconIroI.ToenubIeII,Ihe
deveIopermusIexpIIcIIIyseIIheIsSctiptLnabIedproperIyoIIheconIroI.ThIs
seIIIngbecomesexIremeIyImporIunIIorHTMLbconIenI,sInceuIoIoI
munIpuIuIIonInHTMLbIsperIormedusIngJuvuScrIpI.
2. InIerneILxpIorerMobIIedoesnoIuIIowusersIodownIoudundInsIuIIIhIrd-
purIypIug-Ins,suchusAcIIveXconIroIsundAdobeIIushpIug-Ins.SIIesIhuI
reIyonsuchpIug-InsIorIheIrIuncIIonuIIIywIIInoIworkproperIyonWIndows
Phone.
3. WIIhInIhewebbtowsetconIroI,userscunnoInuvIguIeIromhttps://(secure)Io
http://(Insecure)InIerneIIocuIIons.
4. AppIIcuIIonscunnoIshurecookIeswIIhInIerneILxpIorerMobIIe.
TubIe8-1summurIzesIhedIIIerencesbeIweenInIerneILxpIorerMobIIeundIIsdeskIop
counIerpurI.
CHAPTER8THEwEBBR0w8ERC0hTR0l
206
TnhIc8-1.1nIcrncI1xIorcrMobIIc:.1nIcrncI1xIorcrDc:IIo
Feature Internet Explorer Mobile Internet Explorer Desktop
ScrIpIexecuIIon(JuvuScrIpI) DIsubIedbydeIuuII,seI
IsSctiptLnabIedproperIyexpIIcIIIy
LnubIedbydeIuuII
DownIoudIngundInsIuIIIngpIug-Ins
(AcIIveX,IIush,eIc.)
NoIuIIowed AIIowed
NuvIguIIngIromhttps://(secure)Io
http://(unsecure)InIerneIIocuIIons
NoIuIIowed AIIowed
ShurIngcookIesbeIweenuppIIcuIIons NoIuIIowed AIIowed

InuddIIIonIoIhedIIIerencesIIsIedInIheIubIe,IhereurespecIuIcross-sIIeconsIderuIIons
uppIIcubIe|usIIoIhewebbtowsetconIroI.WhenuwebpugeIoudsInIoIheWIndowsPhonewebbtowset
conIroIIromIheneIworkIocuIIon(IorInsIunce,IromIheInIerneI),IIIsprohIbIIedIrommukIngWeb
servIcecuIIsInIoudomuInoIherIhunIheoneIromwhIchIIhusbeenIouded.ThIsIsdoneIoprevenI
unuuIhorIzeduccessIosensIIIveInIormuIIonwIIhouIuuser`sknowIedge.ThIsbehuvIorIsIdenIIcuIIo
IhebehuvIoroIusIundurdSIIverIIghIuppIIcuIIonresIrIcIedIoWebservIcecuIIsInIoIIsowndomuIn
unIessuspecIuIctossdomain.xmIIIIeIspresenIuIIherooIoIunoIherdomuIn,uIIowIngremoIecuIIs.
However,onWIndowsPhone,conIenIIoudedIromIsoIuIedSIorugeorvIuIheNavigateToStting
meIhodIsnoIsub|ecIIocross-domuInresIrIcIIons.ThIsuIsoIncIudesconIenIprevIousIyIoudedIrom
IheneIworkIocuIIonundsuvedIoIsoIuIedSIorugevIuIheSaveToSttingmeIhod,usyouhuveseenInIhIs
chupIer.
.OTEltisextremel]importanttoconsiderthepossioleimplicationsofrelaxedcross-domainconsequencesof
savingweopagesintothelocalstorageandthenreloadingthem.
A8r|af|ntroduct|ontoHTNL5Faaturas
WIndowsPhone7.bIsuhugeIeupIorwurd.OneoIIhebIggesInewIeuIuresoIIhIsreIeuseIsIheIncIusIon
oIIheInIerneILxpIorer9webbrowser.InIerneILxpIorer9oIIerssupporIIorHTMLb,whIchImpIIes
cross-pIuIIormmobIIeuppIIcuIIondeveIopmenIwIIhuIIIhemu|orpIuyersInIhemobIIespuce
supporIIngIheHTMLbsIundurd.BuIwhuIIsHTMLb,undwhuImukesIIIhedeveIopmenIpIuIIormoI
IomorrowInIhIssecIIon,youwIIIIukeubrIeIIookuIsomeoIIheIeuIuresoIHTMLbIhuImukeIhIs
envIronmenIuppeuIIngIoruIurgespecIrumoImobIIeuppIIcuIIons.
CHAPTER8THEwEBBR0w8ERC0hTR0l
207
HTMLbIeuIures
HTMLbIsmuchmoreIhun|usIunewmurkupIunguuge.AIIhoughIheexucIdeIInIIIonsoIHTMLbvury,
IhebesIwuyIoIhInkubouIII,InouropInIon,IsususeIoIIeuIuresIhuIwIIImukeIhewebuppIIcuIIonsoI
IomorrowmoreIocuI,moreInIerucIIve,undeusIerIobuIId.ThewuyHTMLbuccompIIshesIhIsIs
IhroughumuIIIIudeoIIeuIures,someoIwhIchuredIscussedIoIIowIng.IIIsbeyondIhescopeoIIhIs
bookIoprovIdeucomprehensIveovervIewoIuIIHTMLbIeuIures.WerecommendreudIngIheexceIIenI
bookHTM15SoIuIIon:byMurcoCusurIo(Apress,2011).MeunwhIIe,IheHTMLbsIundurdconIInuesIo
evoIve.
hawFormF|a|dsw|thHTNL5
AIIwebdeveIoper,IrombegInnersuIIIhewuyIoproIessIonuIs,huvebuIIIsomeIormoIuserInpuI
vuIIduIIonoIbusIcwebIorms.IorexumpIe,IIyouprompIusersIoenIerIheIre-muIIuddress,youmusI
IhenvuIIduIeIhuIIheuddressIsIndeedvuIId,IIyoucoIIecIduIeInIormuIIon,youmusIverIIyIhuIIhe
InpuIIndeedconIuInsuduIevuIue,undsoon.LvenIhoughIhereureIIbrurIes(suchus|Query)und
ASP.NLTconIroIs(VuIIduIors)IhuIheIpyouwIIhIhevuIIduIIonIusk,HTMLbsImpIIIIessuchvuIIduIIon
byInIroducIngnewInpuIIypes,suchusemaiIordate.IorexumpIe,IheIoIIowIngInpuIIype,input
type="date":,wIIIuuIomuIIcuIIyvuIIduIeIheInpuIIobeIormuIIedusuduIeundevenshowudrop-down
cuIendurIIIhebrowser-specIIIcImpIemenIuIIonsupporIsII.(SomebrowsersdIspIuyIhecuIendurwhIIe
oIherspresenIspInnerconIroIsIorduIevuIues.)
input type="date" id="0ate0Tbitth" /:
II`sImporIunIIonoIeIhuInewInpuIIypesurenoIsupporIedInInIerneILxpIorer9.SupporIIorIhIs
newHTMLbIeuIure,however,husbeenuddedIoIhenexIversIonoIInIerneILxpIorer,InIerneILxpIorer
10,undIIshouIdbeuvuIIubIeonWIndowsPhonedevIcesshorIIy.
0ao|ocat|on
PerhupsIhemosIexcIIIngHTMLbIeuIureIorWIndowsPhoneundoIhermobIIedeveIopersIssupporI
IorIruckInguuser`scurrenIIocuIIonusIngHTMLb.ThIssupporIIsenubIedvIuIhegeoIocationob|ecI
undIIsmeIhods,IncIudInggeoIocation.getCuttentlosition(),whIchreIrIevesIhecurrenIgeogruphIcuI
posIIIon(IuIIIudeundIongIIude)oIIheuser.YouwIIIobserveIheuseoIIhegeoIocationob|ecIInIhe
nexIsecIIon.
Nad|aP|ayback
HTMLbmukesboIhvIdeounduudIopIuybuckexIremeIysImpIewIIhIhenewaudio:undvideo:Iugs.
AseIoIconIroIsIorperIormIngmedIupIuybuckIsuuIomuIIcuIIyuvuIIubIewIIhInIhebrowser.AnIce
bonusIorWIndowsPhonedeveIopersIsIhuIvIdeopIuybuckoIHTMLbvIdeoeIemenIsIsuuIomuIIcuIIy
perIormedInIuII-screenmodeonWIndowsPhone.AIuIIseIoIconIroIsIorpIuyIngvIdeoIsuIso
uuIomuIIcuIIyuvuIIubIe.AwordoIcuuIIonIsupproprIuIehere,howeverIhereurecurrenIIynouudIoor
vIdeoIormuIsIhuIuresupporIeducrossuIIpIuIIorms.IorInsIunce,IheH.264vIdeosIundurdIs
supporIedbyIheInIerneILxpIorer9undSuIurIbrowsers,however,IIreIoxundChromeurenoI
supporIIngIhIsIormuI.IIyouuregoIngIobereIyIngonIhesenewmedIueIemenIsInsIdeyourweb
CHAPTER8THEwEBBR0w8ERC0hTR0l
208
pugesundIoruppIIcuIIons,IIwouIdbeprudenIIoseeIIyourIurgeIdemogruphIcwIIIbeubIeIopIuy
buckyourvIdeooruudIoIIIes.
0anvas
ThenewHTMLbcanvas:eIemenIuIIowsyouIodruwonuwebpuge|usIIIkeyouwouIdonusurIuce
InsIdeunygruphIcsedIIor,suchusPuInI.NLTorPhoIoshop.AIIhemomenI,wIIhHTMLbIooIIngbeIng
InIIsInIuncy,IhIsdruwInghusIohuppenbyexpIIcIIIyspecIIyIngwhuI,where,undhowyouwunIIhe
ob|ecIsIobedruwn.YouwIIIseeunexumpIeoIdruwIngonucunvusInIhenexIsecIIon.InuddIIIonIo
druwIngob|ecIsonucunvus,IIIspossIbIeIounImuIeIhoseob|ecIsbyconIInuousIyredruwIngIhe
cunvusuIugIvenIrumes-per-secondruIeundIhuscreuIeIhemovemenIsoIIhoseob|ecIsIhroughIhe
cunvus.
SV0
ScuIubIcVccIorCruIIc:(SVC)IsIhesIundurdwuyoIencodIngIwo-dImensIonuIgruphIcsund
unImuIIonsusIngXMLIIIes.WIIhInIhoseIIIes,useIoIIugsconIroIswhuIundwheregruphIcswIIIbe
druwn.InIerneILxpIorer9supporIsSVGgruphIcs.
TheIIsIoIHTMLbIeuIures|usIdescrIbedIsIurIromucomprehensIveIreuImenIoIHTMLb.ThIsIIsI
shouId,however,gIveyouugoodIdeuoIhowexIensIveundIur-reuchIngIheImpIIcuIIonsoIIhIsnew
sIundurdure.
TesIIngHTMLbIeuIuresonWIndowsPhone
TogeIuIeeIIorworkIngwIIhHTMLbeIemenIsonumobIIedevIce,youwIIIuseIheNavigateToStting
meIhodwecoveredprevIousIyInIhIschupIer.InIhIssecIIon,youwIIIIIrsIuseIhIsmeIhodIogeIIhe
currenIgeogruphIcuIposIIIonoIIhedevIce.NexI,youwIIIuseIheaudio:eIemenIIoconIroIIhe
pIuybuckoIunMP3IIIeIromIheInIerneI.IInuIIy,youwIIIdruwuredcIrcIeonucunvus.TogeIsIurIed,
creuIeunewpro|ecIInVIsuuISIudIoLxpressIorWIndowsPhoneundchungeIheMainlage()consIrucIor
InsIdeIheMainlage.xamI.csIoIookIIkeIhIs:
pubIic Mainlage()
{
InitiaIizeComponent();
webbtowseti.IsSctiptLnabIed = ttue;
webbtowseti.Is0eoIocationLnabIed = ttue;

webbtowseti.loaded = webbtowseti_loaded;
}
NoIIcehowyouseIIheIsSctiptLnabIedproperIyoIIhewebbtowsetconIroIIottue.BecuIIIromour
dIscussIononwebbtowsetconIroIsecurIIyIhuI,bydeIuuII,scrIpIexecuIIonIsdIsubIedInsIdeIhe
webbtowsetconIroI.NoIIceuIsohowyouseIIheIs0eoIocationLnabIedproperIyIottueIouIIowHTMLb
IouccessIhegeogruphIcposIIIonoIIheuseroIIheuppIIcuIIon.TheIucIIhuIunuppIIcuIIonIrucksu
user`sgeogruphIcIocuIIonmusIbedocumenIeddurIngsubmIssIonoIIheuppIIcuIIonIoIheWIndows
PhoneMurkeIpIuce.TheuserIhenwouIdhuveuchoIcewheIherIogrunIyoupermIssIonIoIruckhIsor
herIocuIIonornoI.
CHAPTER8THEwEBBR0w8ERC0hTR0l
209
Tast|ngtha0ao|ocat|onAP|
ThesImpIesIwuyIoInIroduceHTMLbInIoyouruppIIcuIIonIsbyusIngIheNavigateToSttingmeIhodoI
IhewebbtowsetconIroI.IoIIowIhesesIepsIoIesIIhegeoIocuIIonproperIIesoIHTMLbInsIdeyour
uppIIcuIIon:
1. IIII`snoIuIreudypresenI,uddIheIoIIowIngsheIIdecIuruIIonoIIhe
webbtowseti_loadedmeIhod:
void webbtowseti_loaded(obect sendet, koutedLventAtgs e)
{

}
2. ToobIuInIhecurrenIIuIIIudeundIongIIudecoordInuIesoIIheuser,youwIII
useIhenavigatot.geoIocation.getCuttentlosition()meIhod,undpussIIIhe
cuIIbuckIuncIIononlositionkeady,whIchwIIIprInIIheIuIIIudeundIongIIude
vuIuesonIhescreen.InsIdeIhewebbtowseti_loadedmeIhod,uddIheIoIIowIng
code:
webbtowseti.NavigateToStting("
!00CTYlL htmI:
htmI:
head:
MLTA name='MobiIe0ptimized' content='}20' /:
/head:
body:

div id='message':
geoIocation data wiII be shown hete
/div:

sctipt type='text/avasctipt':
navigatot.geoIocation.getCuttentlosition(onlositionkeady);

Tunction onlositionkeady(position) {
document.getLIementbyId('message').innetHTMl = 'Iat '
position.cootds.Iatitude ' Iong ' position.cootds.Iongitude;
}

/sctipt:
/body:
/htmI:
");
3. PressIbIorunyouruppIIcuIIon.AIIerusIIghIdeIuy,youshouIdseeIhe
IuIIIudeundIongIIudevuIuesdIspIuyedonyouremuIuIorscreen.NoIe,
however,IhuIIheWIndowsPhoneemuIuIoruIwuysreIurnsIhevuIuesIorIhe
suburbsoISeuIIIe,WushIngIon,IheIocuIIonoIMIcrosoIIheudquurIers.
HuvInguccessIouuser`sIocuIIonwIIhouIuskIngpeopIeIoInsIuIIunuppIsuIruIypowerIuIIeuIure,
IIsIgnIIIcunIIyIowersIheburrIersIorusersIoIryouIyourupp.ThereuremunymoreIeuIuresInHTMLb
Iokeepusersenguged,however,undyouwIIIIesIucoupIemoreoIIheseIeuIuresInIhenexIsecIIon.
CHAPTER8THEwEBBR0w8ERC0hTR0l
210
Tast|ngNad|aP|aybackw|ththaHTNL5<aud|o>F|amant
ToIesIouIIheHTMLbaudio:Iug,youwIIIonceuguInuseIheNavigateToSttingmeIhodoIIhe
webbtowsetob|ecI.IoIIowIhesesIepsIoInIroduceunaudio:eIemenIIromIheWebInIoyourupp:
1. IIII`snoIuIreudypresenI,uddIheIoIIowIngsheIIdecIuruIIonoIIhe
webbtowseti_loadedmeIhod:
void webbtowseti_loaded(obect sendet, koutedLventAtgs e)
{

}
2. TopIuyunMP3IIIeIromIheInIerneI,youwIIIuseIheaudio:HTMLbeIemenI
undseIIIssourceproperIyIoIheIocuIIonoIIhuIIIIe.Here,boIhIhemedIu
pIuybuckundIhegeoIocuIIonIeuIureIesIureIncIudedInIhedocumenI
murkupIouIIowyouIobuIIdusIngIeHTMLbdocumenIconIuInIngIhe
IeuIuresyouIesIInIhIschupIer.InsIdeIhewebbtowseti_loadedmeIhod,udd
IheIoIIowIngcode:
webbtowseti.NavigateToStting("
!00CTYlL htmI:
htmI:
head:
MLTA name='MobiIe0ptimized' content='}20' /:
/head:
body:

audio stc='http://www.eugenechuvytov.com/iheattwp/punk.mp}' conttoIs='ttue':
Yout btowset does not suppott the audio eIement.
/audio:

div id='message':
geoIocation data wiII be shown hete
/div:

sctipt type='text/avasctipt':
navigatot.geoIocation.getCuttentlosition(onlositionkeady);

Tunction onlositionkeady(position) {

document.getLIementbyId('message').innetHTMl = 'Iat '
position.cootds.Iatitude ' Iong ' position.cootds.Iongitude;
}

/sctipt:
/body:
/htmI:
");
3. PressIbIorunyouruppIIcuIIon.AIIerusIIghIdeIuy,youshouIdseeIhe
IuIIIudeundIongIIudevuIuesdIspIuyedonyouremuIuIorscreen,usweIIusu
CHAPTER8THEwEBBR0w8ERC0hTR0l
211
seIoIuudIopIuybuckconIroIs(PIuyundPuuse)IhuIshouIdenubIeyouIopIuy
IheIuneIromIheInIerneI.
InIhenexIsecIIon,youwIIIdruwonunHTMLbcunvusIogeIusenseoIIheAPIuvuIIubIeIoyouIn
HTMLbIordruwIngpurposes.
0raw|ngonanHTNL50anvas
AIIhoughdruwIngshupesonunHTMLcunvusIsunexIremeIyIedIousmunuuIprocesscurrenIIy,IIIs
cerIuInIochungeInIheveryneurIuIure.NewHTMLbuuIomuIIonIooIsurebecomIngwIdeIyuvuIIubIe,
wIIhmu|orvendorsIInIngupIodeIIverHTMLbproducIIvIIyuppIIcuIIons.IorIhemomenI,however,
here`sIhecodeIodruwucIrcIeshupeonucunvusInsIdeIhewebpuge.NoIeIhuIIheHTMLIorIhIs
exumpIe,InuddIIIonIocunvusdruwIng,uIsoIncIudesIhegeoIocuIIonIesIundIheaudio:IugIesIIrom
IheprevIousIwosecIIons.AIIoIIheseIeuIuresIogeIherprovIdeusmuIIgIImpseInIoIhepoweroI
HTMLb-enubIeduppIIcuIIons.
1. IIII`snoIuIreudypresenI,uddIheIoIIowIngsheIIdecIuruIIonoIIhe
webbtowseti_loadedmeIhod:
void webbtowseti_loaded(obect sendet, koutedLventAtgs e)
{

}
2. TouIIowdruwIngonucunvusInsIdeHTMLb,youmusIIIrsIdecIureucanvas:
eIemenIwIIhInIhebodyoIunHTMLbdocumenI.Then,IromwIIhIn
JuvuScrIpI,youmusIgeIIhecanvas:eIemenIusIngIhe
document.getLIementbyIdIuncIIon.NexI,yougeIIheconIexIIorIhecunvus
usIngIhegetContext('20')IuncIIon.IInuIIy,youInvokeuIuncIIonIobegIn
IhepuIh,druwunurc,IIIIIhepuIh,undcIoseIhepuIh,InIhuIorder.Here`sIhe
codeIhuIdoesuIIIhIswork:
webbtowseti.NavigateToStting("
!00CTYlL htmI:
htmI:
head:
MLTA name='MobiIe0ptimized' content='}20' /:
/head:
body:
canvas id='myCanvas' width='200' height='i00' styIe='botdet:ipx soIid #c}c}c};':
Yout btowset does not suppott the canvas eIement.
/canvas:

audio stc='http://www.eugenechuvytov.com/iheattwp/punk.mp}' conttoIs='ttue':
Yout btowset does not suppott the audio eIement.
/audio:

div id='message':
geoIocation data wiII be shown hete
/div:

sctipt type='text/avasctipt':
CHAPTER8THEwEBBR0w8ERC0hTR0l
212
vat c=document.getLIementbyId('myCanvas');
vat cxt=c.getContext('2d');
cxt.TiIIStyIe='#ll0000';
cxt.beginlath();
cxt.atc(10,i8,i,0,Math.lI*2,ttue);
cxt.cIoselath();
cxt.TiII();

navigatot.geoIocation.getCuttentlosition(onlositionkeady);

Tunction onlositionkeady(position) {
document.getLIementbyId('message').innetHTMl = 'Iat '
position.cootds.Iatitude ' Iong '
position.cootds.Iongitude;
}

/sctipt:
/body:
/htmI:
");
Asyoucunsee,druwIngonucunvusIsusomewhuIIedIousprocessuIIhemomenI.TooIsureonIhe
wuyIomukeIhIsIusksIgnIIIcunIIyeusIer.CoupIedwIIhcunvus-busedunImuIIons,cunvusdruwIngIsun
exIremeIypowerIuIIeuIureoIHTMLbIhuIen|oysIhesupporIoIuIImu|orbrowservendors.
Summary
InIhIschupIer,youIeurnedIouseIhewebbtowsetconIroIIorWIndowsPhoneIoseurchIorunddIspIuy
webconIenIInunuppIIcuIIon.YoucreuIedusImpIecur-browseruppIIcuIIonusIngIhewebbtowset
conIroIunddIspIuyedIocuIsIuIIcunddynumIcuIIygeneruIedHTMLpuges.YouuIsoIeurnedhowIosIore
undreIrIevewebundHTMLconIenIIromIocuIsIorugeonIhephoneIIseII.You`IIexpIoreIocuIsIorugeIn
greuIerdepIhInChupIer13.IInuIIy,youshouIdnowhuveubusIcundersIundIngoIIhevIewporIund
cusIomInIerneILxpIorerMobIIeCSSeIemenIs,undyoushouIdhuveunupprecIuIIonoIIhesecurIIy
Issuesyou`IIencounIerwhenyouuseIhewebbtowsetconIroI.
YouuIsobecumeucquuInIedwIIhIheevoIvIngHTMLbsIundurdundIIssupporIInsIdeInIerneI
LxpIorer9onWIndowsPhone.YoubuIIIseveruIsumpIeuppIIcuIIonsIoIesIouIusmuIIsubseIoIHTMLb
IeuIures,whIchshouIduIIowyouIomukeInIormuIIvedecIsIonsInIheIuIureonwheIheryour
uppIIcuIIoncunbeneIIIIromIncIusIonoIHTMLb-specIIIcIeuIures.
InIhenexIchupIer,you`IIexpIorewhuIIsperhupsIhemosIImporIunIuspecIoIunymodern
uppIIcuIIon:IIssIyIIng.WewIIIgooverIhegeneruIprIncIpIesoIusInguppeuIIngIuyouIsundIhemesund
deIveInIoIhespecIIIcsoIvIsuuIIyengugIngconIroIswIIhInuppIIcuIIons.

C H A P T E R 9

213
Working with Controls and Themes
LveryIImeyoupussIhroughunuIrporIoruIruInsIuIIon,youexpecIIoseeumyrIudoIsIgnsdIrecIIng
youIovIIuIInIormuIIonsuchusconnecIIngguIes,IhedIrecIIonoIbuggugecIuIm,undIheIocuIIonoI
groundIrunsporIuIIon.WhIIeIhewordsonIhesesIgnsurecerIuInIyImporIunI,perhups|usIus
ImporIunIureIheuccompunyIngvIsuuIsymboIs.OurmIndsbecomesouccusIomedIovIsuuIeIemenIs
IhuIweoIIendon`IneedIoreudIhewordsIoundersIundusIgn`smeunIng.IurIhermore,Ihepresence
oIvIsuuIeIemenIsheIpsIremendousIywhenwe`reInunoIhercounIrywherewedon`IspeukIhe
Iunguuge.
ThIsunIversuIvIsuuIIunguugeoIsIgnsIsIhemuInIdeubehIndIheUIInWIndowsPhone.MIcrosoII
desIgnerswunIIheeIemenIsInIheWIndowsPhoneUIIodIrecIusersIoIheconIenIIhuIIheywunI,|usI
usuIrporIsIgnsdIrecIpeopIewhereIheyneedIogo.WIIhInMIcrosoII,IhIsconIemporuryUIhusbeen
code-numedMeIro,undperIheUIDesIgnundInIerucIIonGuIdeIorWIndowsPhone,eIemenIsoIIhe
MeIroUIuremeunIIobevIsuuIIyuppeuIIngundIoencourugeexpIoruIIonoIIheuppIIcuIIonsIhuIyou
buIId.
InIhIschupIer,youwIIIexpIoreIhemosIImporIunIdesIgnprIncIpIesIhuIureuIIheheurIoIIhe
MeIroUIundIeurnhowIoensureIhuIyouruppIIcuIIonsconIormIoIhem.YouwIIIuIsoguInun
undersIundIngoIIhemesonWIndowsPhonedevIcesundIeurnhowIomukeyouruppIIcuIIonIheme-
uwure.IInuIIy,youwIIIIukeuIookuIIheconIroIsIhuIureuvuIIubIeIoruseInWIndowsPhone
uppIIcuIIons,especIuIIyIheInnovuIIvePunorumuundPIvoIconIroIs,whIchureunIqueIoIheWIndows
PhonepIuIIorm.YouhuveuIreudyusedmunyoIIheconIroIswIIhInWIndowsPhoneInIheprevIous
chupIersoIIhIsbook,soIhIschupIerwIIIrecupIhoseconIroIsundInIroduceyouIosomeoIIheIess
commonones.
|ntroduc|ngthaNatro0as|gnSystam
ThebIgIdeubehIndIheWIndowsPhoneUI(MeIro)IsIodIrecIusersIoIheconIenIIheywunIusIng
desIgneIemenIsIhuIureboIhuIIrucIIveundeIIecIIveInconveyIngIheIrmessuge.TheUserLxperIence
GuIdeIInesIorWIndowsPhone(uvuIIubIeusuPDIdownIoudIromhttp://go.mictosoTt.com/TwIink/
?linkI0=2208ii)specIIIcuIIysIuIesIhuIvIsuuIeIemenIswIIhInuppIIcuIIonsshouIdencourugepIuyIuI
expIoruIIonsoIhuIIheuserIeeIsusenseoIwonderundexcIIemenI"whenusIngyouruppIIcuIIon.The
guIdeIInesuIsoudvIsedeveIopersIocreuIeInIerIucesIhuIureresponsIveundperIormweIIuIsoun
ImporIunIpurIoIUIdesIgn.MIcrosoIIsIrongIyencourugesuIIuppIIcuIIondeveIopersIoudopIIheMeIro
desIgnprIncIpIesInIheIruppIIcuIIons.IorIunuIeIy,IoheIpIhosewhomuynoIbepurIIcuIurIysIrongIn
gruphIcdesIgn,MIcrosoIIhusensuredIhuIuIIuppIIcuIIonconIroIs(IorexumpIe,TexIBox,BuIIon,undso
on)ureMeIro-compIIunIbydeIuuII.TheconIroIsIhuIshIpwIIhIheWIndowsPhonedeveIopmenIIooIs
uIreudyhuveIheIookundIeeIdIcIuIedbyIheMeIroUIguIdeIInes,soII`syour|obusudeveIoperIo
preserveIhuIIookundIeeIIhroughouIyouruppIIcuIIons.