quickstart_ data binding to controls (windows store apps using c#_vb_c++ and xaml) (windows)

08/03/2014 Quickstart: Data binding to controls (Windows Store apps using C#/VB/C

1/12msdn.microsoft.com/en-us/library/windows/apps/hh464965.aspx

Quickstart: Data binding to controls (WindoZs Storeapps using C#/VB/C++ and XAML)ThiV WRSic VhRZV \RX hRZ WR biQd a cRQWURO WR a ViQgOe iWeP RU biQd a OiVW cRQWURO WR a cROOecWiRQ Rf iWePV iQ a WiQdRZV

SWRUe aSS XViQg C++, C#, RU ViVXaO BaVic. IQ addiWiRQ, WhiV WRSic VhRZV \RX hRZ WR cXVWRPi]e Whe diVSOa\ Rf cRQWURO

iWePV, iPSOePeQW a deWaiOV YieZ baVed RQ a VeOecWiRQ, aQd cRQYeUW daWa fRU diVSOa\. FRU PRUe deWaiOed iQfR, Vee

binding Zith XAML.

RRadmaS: HRZ dReV WhiV WRSic UeOaWe WR RWheUV? See:

Roadmap for WindoZs Store apps using C# or Visual Basic

Roadmap for WindoZs Store apps using C++

Prerequisites

ThiV WRSic aVVXPeV WhaW \RX caQ cUeaWe a baVic WiQdRZV SWRUe aSS XViQg MicURVRfW ViVXaO BaVic, MicURVRfW ViVXaO C#, RU

MicURVRfW ViVXaO C++. FRU iQVWUXcWiRQV RQ cUeaWiQg \RXU fiUVW WiQdRZV SWRUe aSS, Vee

app Zith XAML.

Binding a control to a single item

A daWa biQdiQg cRQViVWV Rf a WaUgeW aQd a VRXUce. The WaUgeW iV XVXaOO\ a SURSeUW\ Rf a cRQWURO, aQd Whe VRXUce iV XVXaOO\

a SURSeUW\ Rf a daWa RbjecW. FRU iQfR RQ Whe WaUgeW aQd VRXUce UeTXiUePeQWV, Vee

The fROORZiQg VhRZV aQ e[aPSOe Rf biQdiQg a cRQWURO WR a ViQgOe iWeP. The WaUgeW iV Whe

R e c o U d i n g cOaVV.

XAML



< G r i d x : N a m e = " L a y o u t R o o t " B a c k g r o u n d = " # F F 0 C 0 C 0 C "

< T e x t B o x x : N a m e = " t e x t B o x 1 " T e x t = " { B i n d i n g } " F o n t S i z e = " 3 0 "

H e i g h t = " 1 2 0 " W i d t h = " 4 4 0 " I s R e a d O n l y = " T r u e "

T e x t W r a p p i n g = " W r a p " A c c e p t s R e t u r n = " T r u e " /

< / G r i d

/ / C o n s t r u c t o r

p u b l i c M a i n P a g e ( )

{

I n i t i a l i z e C o m p o n e n t ( ) ;

/ / S e t t h e d a t a c o n t e x t t o a n e w R e c o r d i n g .

t e x t B o x 1 . D a t a C o n t e x t = n e w R e c o r d i n g ( " C h r i s S e l l s " , " C h r i s S e l l s L i v e "

n e w D a t e T i m e ( 2 0 0 8 , 2 , 5 ) ) ;

}

/ / A s i m p l e b u s i n e s s o b j e c t

p u b l i c c l a s s R e c o r d i n g

{

p u b l i c R e c o r d i n g ( ) { }

p u b l i c R e c o r d i n g ( s t r i n g a r t i s t N a m e , s t r i n g c d N a m e , D a t e T i m e r e l e a s e )

{

A r t i s t = a r t i s t N a m e ;

N a m e = c d N a m e ;

R e l e a s e D a t e = r e l e a s e ;

}

p u b l i c s t r i n g A r t i s t { g e t ; s e t ; }

p u b l i c s t r i n g N a m e { g e t ; s e t ; }



The pUeceding code pUodXceV oXWpXW WhaW iV VimilaU Wo Whe folloZing illXVWUaWion.

To diVpla\ a mXVic UecoUding in a We[W bo[, Whe conWUol'V Te[t pUopeUW\ iV VeW Wo a

b\ defaXlW, Zhich meanV WhaW daWa iV UeWUieYed fUom Whe VoXUce, bXW changeV aUe noW pUopagaWed back Wo Whe VoXUce.

The R e c o U d i n g claVV haV WhUee pXblic pUopeUWieV and a ToString meWhod oYeUUide. The pUopeUWieV aUe

VignificanW, becaXVe if no foUmaWWing iV Vpecified, Whe ToSWring meWhod iV called on a boXnd objecW foU diVpla\ pXUpoVeV. The

binding iV noW VeW diUecWl\; inVWead, Whe DataConte[t pUopeUW\ foU Whe Te[tBo[

Binding a conWUol Wo a collecWion of objecWV

p u b l i c D a t e T i m e R e l e a s e D a t e { g e t ; s e t ; }

/ / O v e r r i d e t h e T o S t r i n g m e t h o d .

p u b l i c o v e r r i d e s t r i n g T o S t r i n g ( )

{

r e t u r n N a m e " b y " A r t i s t " , R e l e a s e d : " R e l e a s e D a t e . T o S t r i n g (

}

}



The pUeYioXV e[ample demonVWUaWeV Whe V\nWa[ \oX XVe Wo bind daWa Wo conWUolV, bXW iW iV noW YeU\ UealiVWic. A moUe common VcenaUio iV Wo bind Wo a

collecWion of bXVineVV objecWV. In C# and ViVXal BaVic, Whe geneUic ObservableCollection

implemenWV Whe INotif\Propert\Changed and INotif\CollectionChanged inWeUfaceV. TheVe inWeUfaceV pUoYide change noWificaWion Wo boXnd conWUolV Zhen an

iWem in Whe liVW changeV oU a pUopeUW\ of Whe liVW iWVelf changeV. If \oX ZanW \oXU boXnd conWUolV Wo XpdaWe ZiWh changeV Wo pUopeUWieV of objecWV in Whe

collecWion, Whe bXVineVV objecW VhoXld alVo implemenW INotif\Propert\Changed

The folloZing e[ample bindV a collecWion of mXVic R e c o U d i n g objecWV Wo a ComboBo[

liVW of boXnd UecoUdingV.

< G r i d x : N a m e = " C o n t e n t P a n e l " G r i d . R o w = " 1 " M a r g i n = " 1 2 , 0 , 1 2 , 0 "

< C o m b o B o x x : N a m e = " C o m b o B o x 1 " I t e m s S o u r c e = " { B i n d i n g } "

F o r e g r o u n d = " B l a c k " F o n t S i z e = " 3 0 " H e i g h t = " 5 0 " W i d t h =

< / G r i d

p u b l i c O b s e r v a b l e C o l l e c t i o n < R e c o r d i n g M y M u s i c = n e w O b s e r v a b l e C o l l e c t i o n < R e c o r d i n g ( ) ;

p u b l i c P a g e ( )

{

I n i t i a l i z e C o m p o n e n t ( ) ;

/ / A d d i t e m s t o t h e c o l l e c t i o n .

M y M u s i c . A d d ( n e w R e c o r d i n g ( " C h r i s S e l l s " , " C h r i s S e l l s L i v e "

n e w D a t e T i m e ( 2 0 0 8 , 2 , 5 ) ) ) ;

M y M u s i c . A d d ( n e w R e c o r d i n g ( " L u k a A b r u s " ,

" T h e R o a d t o R e d m o n d " , n e w D a t e T i m e ( 2 0 0 7 , 4 , 3 ) ) ) ;

M y M u s i c . A d d ( n e w R e c o r d i n g ( " J i m H a n c e " ,

" T h e B e s t o f J i m H a n c e " , n e w D a t e T i m e ( 2 0 0 7 , 2 , 6 ) ) ) ;

;AML

C#




To diVpla\ Whe mXVic UecoUdingV in Whe ComboBo[, Whe conWUol'V ItemsSource

conWUol iV VeW Wo Whe collecWion of R e c o U d i n g objecWV, Zhich pUoYideV Whe VoXUce foU Whe binding. A

ToString iV aXWomaWicall\ called on each R e c o U d i n g objecW Wo diVpla\ iW in Whe combo bo[ iWem.

Displa\ing items in a control b\ using a data template

YoX can diVpla\ iWemV in a liVW b\ XVing Whe iWem'V ToString meWhod. HoZeYeU, a moUe common VcenaUio iV Wo pUoYide a cXVWomi]ed diVpla\ of daWa boXnd

iWemV b\ XVing a DataTemplate. A DaWaTemplaWe enableV \oX Wo cXVWomi]e hoZ liVW iWemV aUe diVpla\ed in a conWUol. T\picall\, \oX VeW Whe daWa WemplaWe b\

XVing Whe ContentTemplate pUopeUW\ of a conWenW conWUol oU Whe ItemTemplate

The folloZing e[ample VhoZV Whe Vame liVW of UecoUdingV boXnd Wo a combo bo[ b\ XVing a daWa WemplaWe. A combo bo[ iV an

WhaW \oX eVWabliVh a daWa WemplaWe foU each iWem b\ VeWWing iWV ItemTemplate

Whe liVW of UecoUdingV. NoWice hoZ Whe UecoUdingV look diffeUenW fUom Whe pUeYioXV e[ample. The aUWiVW and CD name aUe diVpla\ed in a cXVWom foUmaW.

/ / S e t t h e d a t a c o n t e x t f o r t h e c o m b o b o x .

C o m b o B o x 1 . D a t a C o n t e x t M y M u s i c ;

}



The preceding code produces output that is similar to the folloZing illustration.


F o r e g r o u n d = " B l a c k " F o n t S i z e = " 3 0 " H e i g h t = " 5 0 " W i d t h = " 4 5 0 "

< C o m b o B o x . I t e m T e m p l a t e

< D a t a T e m p l a t e

< S t a c k P a n e l O r i e n t a t i o n = " H o r i z o n t a l " M a r g i n = " 2 "

< T e x t B l o c k T e x t = " A r t i s t : " M a r g i n = " 2 " /

< T e x t B l o c k T e x t = " { B i n d i n g A r t i s t } " M a r g i n = " 2 " /

< T e x t B l o c k T e x t = " C D : " M a r g i n = " 1 0 , 2 , 0 , 2 " /

< T e x t B l o c k T e x t = " { B i n d i n g N a m e } " M a r g i n = " 2 " /

< / S t a c k P a n e l

< / D a t a T e m p l a t e

< / C o m b o B o x . I t e m T e m p l a t e

< / C o m b o B o x

;AML



In Whe XAML, \oX can Vee Whe daWa WemplaWe definiWion. The daWa WemplaWe conWainV a

hoUi]onWal oUienWaWion Vo WhaW Whe foXU We[W block conWUolV appeaU Vide b\ Vide. TZo of Whe

a R e c o U d i n g objecW. The oWheU WZo Te[tBlock conWUolV diVpla\ VWaWic We[W. FoU each boXnd iWem, Whe binding pUoYideV Whe paWh Wo Whe pUopeUW\ on Whe

R e c o U d i n g objecW. AV in Whe pUeYioXV e[ample, WhiV binding UelieV on Whe daWa conWe[W Wo be VeW Wo Whe liVW of UecoUdingV.

ThiV XAML XVeV Whe pUopeUW\ elemenW V\nWa[. FoU moUe infoUmaWion aboXW XAML V\nWa[, Vee

infoUmaWion aboXW conWUol la\oXW, Vee Quickstart: Defining la\outs.

Adding a details view

To diVpla\ Whe deWailV of an iWem Zhen iW iV VelecWed fUom a collecWion, \oX haYe Wo cUeaWe Whe appUopUiaWe UI and bind Whe UI Wo Whe daWa WhaW \oX ZanW iW Wo

diVpla\. AddiWionall\, \oX mXVW XVe a CollectionVieZSource aV Whe daWa conWe[W Wo enable Whe deWailV YieZ Wo bind Wo Whe cXUUenW iWem.

The folloZing e[ample VhoZV Whe Vame liVW of UecoUdingV, bXW WhiV Wime Whe liVW iV Whe daWa VoXUce of a

enWiUe page oU XVeU conWUol iV VeW Wo Whe collecWion YieZ VoXUce, and Whe combo bo[ and deWailV YieZ inheUiW Whe daWa conWe[W. ThiV enableV Whe combo bo[ Wo

bind Wo Whe collecWion and diVpla\ Whe Vame liVW of iWemV Zhile Whe deWailV YieZ aXWomaWicall\ bindV Wo Whe cXUUenW iWem. The deWailV YieZ doeV noW need Wo

e[pliciWl\ bind Wo Whe cXUUenW iWem becaXVe Whe collecWion YieZ VoXUce aXWomaWicall\ pUoYideV Whe appUopUiaWe leYel of daWa.

To WU\ WhiV e[ample, click Whe doZn aUUoZ and VelecW diffeUenW UecoUdingV. NoWice WhaW Whe aUWiVW, CD name, and UeleaVe daWe appeaU in a deWailV YieZ beloZ Whe

combo bo[.

< ! - - T h e U I f o r t h e d e t a i l s v i e w - -

< S t a c k P a n e l x : N a m e = " R e c o r d i n g D e t a i l s "

< T e x t B l o c k T e x t = " { B i n d i n g A r t i s t } " F o n t W e i g h t = " B o l d " F o n t S i z e

< T e x t B l o c k T e x t = " { B i n d i n g N a m e } " F o n t S t y l e = " I t a l i c " F o n t S i z e

< T e x t B l o c k T e x t = " { B i n d i n g R e l e a s e D a t e } " F o n t S i z e = " 3 0 " /


XAML

C#




In WhiV e[ample, a StackPanel iV added Wo Whe XVeU conWUol WhaW conWainV Whe e[iVWing combo bo[. Ne[W iV a VWack panel WhaW conWainV WhUee We[W blockV Wo

diVpla\ Whe UecoUding deWailV. The Te[t pUopeUW\ of each We[W block iV boXnd Wo a pUopeUW\ on Whe

Converting data for displa\ in controls

If \oX ZanW Wo foUmaW and diVpla\ a non-VWUing W\pe in a conWUol, VXch aV a Te[tBo[

foUmaWWed daWe inVWead of diVpla\ing jXVW Whe daWe.

The folloZing e[ample VhoZV a conYeUWeU implemenWaWion foU Whe UeleaVe daWe in Whe liVW of UecoUdingV. To WU\ WhiV e[ample, click Whe doZn aUUoZ and VelecW

diffeUenW UecoUdingV. NoWice WhaW Whe UeleaVe daWe in Whe dUop-doZn liVW and deWailV YieZ iV diVpla\ed in a cXVWom foUmaW.

/ / S e t t h e D a t a C o n t e x t o n t h e p a r e n t o b j e c t i n s t e a d o f t h e C o m b o B o x

/ / s o t h a t b o t h t h e C o m b o B o x a n d d e t a i l s v i e w c a n i n h e r i t i t .

/ / C o m b o B o x 1 . D a t a C o n t e x t M y M u s i c ;

t h i s . D a t a C o n t e x t n e w C o l l e c t i o n V i e w S o u r c e { S o u r c e M y M u s i c } ;

XAML



< U s e r C o n t r o l x : C l a s s = " T e s t D a t a B i n d i n g Q S . P a g e 2 "

x m l n s = " h t t p : / / s c h e m a s . m i c r o s o f t . c o m / w i n f x / 2 0 0 6 / x a m l / p r e s e n t a t i o n

x m l n s : x = " h t t p : / / s c h e m a s . m i c r o s o f t . c o m / w i n f x / 2 0 0 6 / x a m l "

x m l n s : d = " h t t p : / / s c h e m a s . m i c r o s o f t . c o m / e x p r e s s i o n / b l e n d / 2 0 0 8

x m l n s : m c = " h t t p : / / s c h e m a s . o p e n x m l f o r m a t s . o r g / m a r k u p - c o m p a t i b i l i t y / 2 0 0 6

x m l n s : l o c a l = " u s i n g : T e s t D a t a B i n d i n g Q S "

m c : I g n o r a b l e = " d "

d : D e s i g n H e i g h t = " 7 6 8 " d : D e s i g n W i d t h = " 1 3 6 6 "

< U s e r C o n t r o l . R e s o u r c e s

< l o c a l : S t r i n g F o r m a t t e r x : K e y = " S t r i n g C o n v e r t e r " /

< / U s e r C o n t r o l . R e s o u r c e s

< G r i d x : N a m e = " L a y o u t R o o t " B a c k g r o u n d = " # F F 0 C 0 C 0 C "

< S t a c k P a n e l W i d t h = " 7 5 0 " H e i g h t = " 2 0 0 "

V e r t i c a l A l i g n m e n t = " C e n t e r " H o r i z o n t a l A l i g n m e n t = " C e n t e r


F o r e g r o u n d = " B l a c k " F o n t S i z e = " 3 0 " H e i g h t = " 5 0 " W i d t h =

< C o m b o B o x . I t e m T e m p l a t e

< D a t a T e m p l a t e

< S t a c k P a n e l O r i e n t a t i o n = " H o r i z o n t a l " M a r g i n = " 2 "

< T e x t B l o c k T e x t = " A r t i s t : " M a r g i n = " 2 " /

< T e x t B l o c k T e x t = " { B i n d i n g A r t i s t } " M a r g i n = " 2 "

< T e x t B l o c k T e x t = " C D : " M a r g i n = " 1 0 , 2 , 0 , 2 " /

< T e x t B l o c k T e x t = " { B i n d i n g N a m e } " M a r g i n = " 2 " /


< / D a t a T e m p l a t e

< / C o m b o B o x . I t e m T e m p l a t e

< / C o m b o B o x

< ! - - T h e U I f o r t h e d e t a i l s v i e w - -

< S t a c k P a n e l x : N a m e = " R e c o r d i n g D e t a i l s "



< T e x t B l o c k T e x t = " { B i n d i n g A r t i s t } " F o n t S i z e = " 3 0 " F o n t W e i g h t

< T e x t B l o c k T e x t = " { B i n d i n g N a m e } " F o n t S i z e = " 3 0 " F o n t S t y l e

< T e x t B l o c k T e x t = " { B i n d i n g R e l e a s e D a t e ,

C o n v e r t e r = { S t a t i c R e s o u r c e S t r i n g C o n v e r t e r } ,

C o n v e r t e r P a r a m e t e r = R e l e a s e d : \ { 0 : d \ } } " F o n t S i z e = " 3 0 " /



< / G r i d

< / U s e r C o n t r o l

p u b l i c c l a s s S t r i n g F o r m a t t e r : I V a l u e C o n v e r t e r

{

/ / T h i s c o n v e r t s t h e v a l u e o b j e c t t o t h e s t r i n g t o d i s p l a y .

/ / T h i s w i l l w o r k w i t h m o s t s i m p l e t y p e s .

p u b l i c o b j e c t C o n v e r t ( o b j e c t v a l u e , T y p e t a r g e t T y p e ,

o b j e c t p a r a m e t e r , S y s t e m . G l o b a l i z a t i o n . C u l t u r e I n f o c u l t u r e )

{

/ / R e t r i e v e t h e f o r m a t s t r i n g a n d u s e i t t o f o r m a t t h e v a l u e .

s t r i n g f o r m a t S t r i n g = p a r a m e t e r a s s t r i n g ;

i f ( ! s t r i n g . I s N u l l O r E m p t y ( f o r m a t S t r i n g ) )

{

r e t u r n s t r i n g . F o r m a t ( c u l t u r e , f o r m a t S t r i n g , v a l u e ) ;

}

/ / I f t h e f o r m a t s t r i n g i s n u l l o r e m p t y , s i m p l y

/ / c a l l T o S t r i n g ( ) o n t h e v a l u e .

r e t u r n v a l u e . T o S t r i n g ( ) ;

}




A conYeUWeU iV a claVV WhaW deUiYeV fUom Whe IValXeConYerWer inWeUface. IValXeConYerWer

fUom Whe daWa VoXUce Wo Whe binding WaUgeW, \oX onl\ haYe Wo implemenW Whe

Whe deViUed VWUing foUmaW aV a paUameWeU, and Whe conYeUWeU XVeV Whe SWring.FormaW

conYeUWeU UeWXUnV Whe UeVXlW of calling ToSWring on Whe objecW.

Once \oX implemenW Whe conYeUWeU, \oX cUeaWe an inVWance of Whe conYeUWeU claVV and Well Whe bindingV Wo XVe WhiV inVWance. In WhiV e[ample, WhiV iV peUfoUmed

in XAML. An inVWance of Whe conYeUWeU iV cUeaWed aV a VWaWic UeVoXUce and aVVigned a ke\. The ke\ iV XVed Zhen Whe conYeUWeU pUopeUW\ iV VeW on Whe binding.

FoU moUe infoUmaWion aboXW hoZ Wo conYeUW daWa foU diVpla\ in conWUolV, Vee

/ / N o n e e d t o i m p l e m e n t c o n v e r t i n g b a c k o n a o n e - w a y b i n d i n g

p u b l i c o b j e c t C o n v e r t B a c k ( o b j e c t v a l u e , T y p e t a r g e t T y p e ,

o b j e c t p a r a m e t e r , S y s t e m . G l o b a l i z a t i o n . C u l t u r e I n f o c u l t u r e )

{

t h r o w n e w N o t I m p l e m e n t e d E x c e p t i o n ( ) ;



RelaWed WopicV

RoadmapV

Roadmap foU WindoZV SWoUe appV XVing C# oU ViVXal BaVic

Roadmap foU WindoZV SWoUe appV XVing C++

SampleV

XAML daWa binding Vample

XAML GUidVieZ gUoXping and SemanWicZoom Vample

SWoUageDaWaSoXUce and GeWViUWXali]edFileVVecWoU Vample

RefeUence

Binding

DaWaConWe[W

Dependenc\ProperW\

CollecWionVieZSoXrce

IValXeConYerWer

INoWif\ProperW\Changed

INoWif\CollecWionChanged

DaWaTemplaWe

ConcepWV

DaWa binding ZiWh XAML

HoZ Wo bind Wo hieUaUchical daWa and cUeaWe a maVWeU/deWailV YieZ

Binding maUkXp e[WenVion

PUopeUW\-paWh V\nWa[

RelaWiYeSoXUce maUkXp e[WenVion

Dependenc\ pUopeUWieV oYeUYieZ

CXVWom dependenc\ pUopeUWieV

AWWached pUopeUWieV oYeUYieZ

DeVign \oXU fiUVW WindoZV SWoUe app bXilW XVing XAML

2014 Microsoft. All rights reserved.

quickstart_ data binding to controls (windows store apps using c#_vb_c++ and xaml) (windows)

Documents

t e t i

g e t s e t

r t i s t n

c o n t e x t t o

c c e p t s r e t u

p o n e n t s e t t

t r u e t e x t w r

i c s t r i n g n