Hands-On Lab

Building a Data-Driven Master/Detail

Business Form using Visual Studio 2010
Lab version: 1.0.0
Last updated: 5/7/2014
Page 1
Contents
OVERVIEW................................................................................................................................................. 3
EXERCISE 1: CREATING THE APPLICATIONS DATA SCAFFOLDING, MAKING BASIC
CUSTOMIZATIONS..................................................................................................................................... 5
EXERCISE : CREATING MASTER!DETAIL DATA SCAFFOLDING, MAKING MORE DETAILED
CUSTOMIZATIONS................................................................................................................................... 13
EXERCISE 3: CREATING AND USING RESOURCES............................................................................
SUMMAR"................................................................................................................................................ 5
Page 2
Overview
In this lab, you ill learn all the ne!essary steps "or !reating and !usto#i$ing a #aster%detail
business "or# in &P' 4.0 using (isual )tudio 2010 tools.
Objectives
*n!e you have !o#pleted this lab you ill understand:
.1 +o to use the ,ata )our!es indo ith a &P' pro-e!t, to !reate initial s!a""olding
"or the data bindings o" your appli!ation
.2 +o to use the ,ata )our!es indo to .paint/ a databinding on an e0isting &P'
!ontrol
.1 +o to !reate #aster%detail s!a""olding ith the ,ata )our!es indo
.4 +o to !usto#i$e the output o" the data sour!es indo to !reate !usto# visuals
using the ,atabinding e0pression builder in the (isual )tudio 2010 property broser
.5 +o to use #ar2up e0tension intellisense to !reate databinding e0pressions
.3 +o to e0tra!t a !o##on loo2 into a resour!e using the e0tra!t resour!e "eature o"
(isual )tudio 2010
.7 +o to apply a !o##on loo2 to a !ontrol using the resour!e pi!2er "eature o" (isual
)tudio 2010
.4
Scenario
5he appli!ation being built in this lab is a si#ple read%only representation o" the sort o"
appli!ation that #ight be used to #anage and vie entries in a real estate agent6s o""i!e. 5he
te!hni7ues used !ould easily be applied to nearly any data%driven !lient appli!ation s!enario.
Prerequisites
8ou should have a basi! "a#iliarity ith the "olloing produ!ts or te!hnologies be"ore you begin
this lab:
,ata%driven appli!ation 9I develop#ent
&indos Presentation 'oundation
System Requirements
Page 1
8ou #ust have the "olloing ite#s to !o#plete this lab:
.1 :i!roso"t (isual )tudio 2010
.2 .;<5 'ra#eor2 4
.1
Setup
=ll the re7uisites "or this lab are veri"ied using the Configuration Wizard. 5o #a2e sure that
everything is !orre!tly !on"igured, "ollo these steps:
Note: 5o per"or# the setup steps you need to run the s!ripts in a !o##and indo ith
ad#inistrator privileges.
.4 >un the Configuration Wizard "or the 5raining ?it i" you have not done it previously.
5o do this, brose to Source\Setup "older o" this lab, and double%!li!2 the
Dependencies.dep "ile. Install any pre%re7uisites that are #issing @res!anning i"
ne!essaryA and !o#plete the i$ard.
Note: 5he Bon"iguration &i$ard is used "or !he!2ing dependen!ies and setting up the
environ#ent. I" the Bon"iguration &i$ard is not installed on your #a!hine, you #ust
install it running the ,ependen!yBhe!2er.#si "ile lo!ated on the
C()20105?Installation'olderCD=ssetsD,ependen!yBhe!2er "older @e.g. by de"ault the
5raining ?it is installed under B:D()20105raining?itA.
'or !onvenien!e, #u!h o" the !ode you ill be #anaging along this lab is available as
(isual )tudio !ode snippets. 5he Dependencies.dep "ile laun!hes the (isual )tudio
installer "ile that installs the !ode snippets.
Exercises
5his +ands%*n Lab is !o#prised by the "olloing e0er!ises:
.1 Breating the =ppli!ation6s ,ata )!a""olding
.2 Breating :aster%,etail )!a""olding
.1 Breating and 9sing >esour!es
.4
<sti#ated ti#e to !o#plete this lab: 45 minutes.
Note: <a!h e0er!ise is a!!o#panied by an End "older !ontaining the resulting solution you
should obtain a"ter !o#pleting the e0er!ises. 8ou !an use this solution as a guide i" you need
additional help or2ing through the e0er!ises.
Page 4
Note: <a!h e0er!ise !ontains a (isual Easi! and a BF versionG Inside the End/Begin solution
"older you ill "ind to "olders: VB, !ontaining the (isual Easi! version o" the e0er!ise, and C,
!ontaining the BF version o" it.
For More Information
)ee the "olloing videos in hi!h this appli!ation is built up:
.5 .&hatHs ;e "or :i!roso"t )ilverlight and :i!roso"t &indos Presentation 'oundation
@&P'A ,evelopers in :i!roso"t (isual )tudio 2010/:
http://videos.visit#i0.!o#/:II0J/571:
.3 .&hatHs ;e in &indos Presentation 'oundation @&P'A 4/:
http://videos.visit#i0.!o#/:II0J/51J'
.7
Next Step
<0er!ise 1: Breating the =ppli!ation6s ,ata )!a""olding, :a2ing Easi! Busto#i$ations
.4
Exercise 1: Creating the Applications Data
Scaffolding, Making asic C!sto"i#ations
In this e0er!ise, you ill !reate the databinding s!a""olding "or your appli!ation, and display your
"irst data. 8ou ill #a2e so#e initial !usto#i$ations o" the data sour!es indo6s output.
!as" # $ %dding a Data&ase to t'e (ro)ect *sing Data Sources
.J ;avigate to Start K %++ (rograms K ,icrosoft Visua+ Studio -.#. K ,icrosoft Visua+
Studio -.#..
.10 )ele!t the /i+e K 0pen K (ro)ect/So+ution #enu !o##and. In the 0pen (ro)ect
dialog, navigate to \Ex01-CreatingTheAppDataScaffolding\begin\ 1c'oosing t'e
fo+der t'at matc'es t'e +anguage of 2our preference3 and sele!t )outhridge.sln "ile.
.11 *pen the Windo4#.5am+ "ile by double%!li!2ing on the "ile in the )olution <0plorer.
.12 )ele!t the root indo @be !are"ul that you have the &indo not the Lrid sele!ted M
you !an tell hat is sele!ted by !he!2ing the property broser indo or the do!u#ent
outline indo in (isual )tudioA. 9se the Property Eroser to set the Widt' o" the
indo to 400 and the 6eig't to 300.
Page 5
/igure #
Updating Window1 Height and Width- C#
Page 3
/igure -
Updating Window1 Height and Width- Visual Basic
.11 *pen the ,ata )our!es indo by !li!2ing Data K S'o4 Data Sources #enu option.
.14 Breate a ne ,ata )our!e by !li!2ing the %dd Ne4 Data Source hyperlin2 in the
,ata )our!es indo.
Page 7
/igure 7
Data Sources
.15 Bhoose the ,ata )our!e 5ype o" Data&ase. Bli!2 Ne5t.
.13 Bhoose DataSet as the ,atabase :odel and !li!2 Ne5t.
.17 Bli!2 Ne4 Connection8 and !hoose the "olloing options:
.14 Data source: :i!roso"t )NL )erver ,atabase 'ile
.1J Data&ase fi+e name: D=ssetsD)outhridge.#d"
.20 9og on to ser:er: 9se &indos =uthenti!ation
.21 Bli!2 Ne5t. Bli!2 ;es to !opy the "ile to your lo!al pro-e!t.
.22 Bli!2 Ne5t, 2eeping the de"ault !onne!tion string na#e.
.21 *n the Bhoose 8our ,atabase *b-e!ts s!reen:
.24 9nder !a&+es K 9istings, !he!2 ,9S, !it+e, (rice and (rimar2('oto
.25 Bhe!2 !a&+es K Neig'&or'oods
.23 Bhe!2 !a&+es K Vie4ings
.27 Bli!2 /inis'.
.24 8ou should no see the ,ata )our!es indo populated already ith database
s!he#a. 8ou ill also see the related I), strongly typed ,ata)et in the )olution
<0plorer.
.2J Euild the solution M you should see no build errors.
.10
!as" - $ *sing Data Sources to %dd Data<Bound Contro+s to t'e Windo4
.11 In the ,ata )our!es indo, !li!2 the 9istings dropdon and sele!t Detai+s.
Page 4
/igure 4
Listings Details
.12 ,rag and drop "ro# the Listing dropdon onto &indos1.
.11 ;ote that the ,ata%Eindings and Bontrols are !reated auto#ati!ally. Inspe!t the
I=:L that as !reated "or you and observe its relationship to the )outhridge,ata)et
data sour!e.
Page J
/igure 5
Listing Details in WPF Designer C#
Page 10
/igure =
Listing Details in WPF Designer Visual Basic
.14 *n the ,esign pane, delete the Pri#ary Photo 9a&e+ and !e5t&o5.
.15 ,rag and drop and >mage !ontrol "ro# the !oo+&o5 and pla!e to the right o" the
details grid.
.13 In the Data Sources indo, e0pand the 9istings table and then drag and drop the
Pri#aryPhoto "ield onto the >mage !ontrol. 5his ill .paint/ the data binding in"or#ation
on to the !ontrol.
Page 11
/igure ?
!dding an "#age Control
.17 Press B5>LO'5 to run the appli!ation. 8ou should see data appearing "ro# the "irst
ro in the database, and a pi!ture shoing.
Page 12
/igure @
$unning the !pplication
Next Step
<0er!ise 2: Breating :aster%,etail ,ata )!a""olding, :a2ing :ore ,etailed Busto#i$ations
.1
Exercise $: Creating Master%Detail Data
Scaffolding, Making More Detailed
C!sto"i#ations
In this e0er!ise, you ill add so#e additional detail to the indo. 8ou ill also provide a ay
"or the user to navigate "orard and ba!2ard through the listings. 5o help visuali$e the data a
Page 11
little better, you ill also override one o" the de"ault te#plates and provide a visual indi!ation i" a
listing is pro!eeding or not.
!as" # $ %dding a 9isting Detai+s Arid to t'e Windo4
.2 'or this e0er!ise, you !an !ontinue to use the solution "ro# <0er!ise 1 or open the
begin solution lo!ated at \Ex02-CreatingMasterDetailDataScaffolding\begin\
1C'oosing t'e fo+der t'at matc'es t'e +anguage of 2our preference.3 8ou ill need
to build the solution @!li!2 Bui+d K Bui+d So+utionA be"ore the designer ill sho the
&P' or2 done in <0er!ise 1.
.1 I" the ,ata )our!es indo is not sho, !li!2 Data K S'o4 Data Sources.
/igure B
Viewings in Data Sources
.4 ,rag the Vie4ings 'oreign ?ey table "ro# under 9istings in the ,ata )our!es
indo onto the &indo to #a2e a #aster%details vie. ;ote that the data sour!es
indo ta2es !are o" all the details o" 2eeping the to vies in syn!, and !reates a
DataArid ith all your "ields in di""erent !olu#ns:
Page 14
/igure #.
!dding the Viewings "nto the Designer
!as" - $ (ro:iding /or4ard and Bac" Buttons for Na:igation
.1 ,rag 2 ne Buttons onto the design sur"a!e "ro# the toolbo0
.2 )et the Name o" the "irst Eutton to %orwardButton.
.1 )et the Content property o" the for4ardButton to Forward.
Page 15
/igure ##
Forward Button Properties
.4 ,ouble%!li!2 the for4ardButton on the designer sur"a!e. (isual )tudio ill sit!h to
!ode vie and add a !li!2 handler "or this button.
.5 Insert the "olloing !ode into this ne !li!2 handler.
@Bode )nippet M WPF &asterDetail La' ()* ForwardClic+Handler C#A
C
private void forwardButton_Click(object sender, RoutedEventArgs e)
{
Collectioniew!ource cvs "
(t#is$%indResource(&listingsiew!ource&))
as Collectioniew!ource'
cvs$iew$(oveCurrent)o*e+t()'
,
@Bode )nippet M WPF &asterDetail La' ()* ForwardClic+Handler VBA
Visua+ Basic
-rivate !ub forwardButton_Click(B.al sender As !.ste/$0bject, B.al e
As !.ste/$1indows$RoutedEventArgs) 2andles forwardButton$Click
Page 13
3i/ cvs " )r.Cast((e$%indResource(&4istingsiew!ource&),
Collectioniew!ource)
cvs$iew$(oveCurrent)o*e+t()
End !ub
.3 )it!h ba!2 to by right%!li!2ing in the !ode editor and sele!t Vie4 Designer.
.7 )et the Name o" the se!ond Eutton to 'ac+Button.
.4 )et the Content property o" the &ac"Button to Bac+.
/igure #-
Bac+ Button Properties
.J ,ouble%!li!2 the &ac"Button on the designer sur"a!e. (isual )tudio ill sit!h to
!ode vie and add a !li!2 handler "or this button.
.10 Insert the "olloing !ode into this ne !li!2 handler.
@Bode )nippet M WPF &asterDetail La' ()* Bac+Clic+Handler C#A
C
private void backButton_Click(object sender, RoutedEventArgs e)
{
Collectioniew!ource cvs "
(t#is$%indResource(&listingsiew!ource&))
Page 17
as Collectioniew!ource'
cvs$iew$(oveCurrent)o-revious()'
,
@Bode )nippet M WPF &asterDetail La' ()* Bac+Clic+Handler VBA
Visua+ Basic
-rivate !ub backButton_Click(B.al sender As !.ste/$0bject, B.al e As
!.ste/$1indows$RoutedEventArgs) 2andles backButton$Click
3i/ cvs " )r.Cast((e$%indResource(&4istingsiew!ource&),
Collectioniew!ource)
cvs$iew$(oveCurrent)o-revious()
End !ub
.11 Bli!2 De&ug K Start 4it'out De&ugging @or press B5>LO'5A to run the app and note
that you !an page ba!2 and "orth through your data set, seeing the details "or ea!h ite#
as you sele!t it.
.12
!as" 7 $ (ro:iding a Visua+ization for t'e Data in t'e 9istings DataArid
In this tas2, you ill #a2e a #ore detailed !usto#i$ation o" the ,ataLrid you -ust !reated. 5he
goal is to !hange one o" the !olu#ns "ro# shoing Bhe!2Eo0 !ontrols to shoing a si#ple
>ed/Lreen tra""i! light style re!tangle as an indi!ator. 5o do this, you ill use a
Boo+ean!oBrus'Con:erter already !reated in the pro-e!t, to !onvert the Eoolean value in a
!olu#n to a >ed or Lreen brush.
.1 )ele!t the ,ataLrid !ontrol on the design sur"a!e by !li!2ing on it. >ight%!li!2 the
design sur"a!e and !hoose ,o!u#ent *utline.

/igure #7
Data,rid in Docu#ent -utline
Page 14
.2 <0pand the DataArid node in the ,o!u#ent *utline, and "ind the
DataAridC'ec"Bo5Co+umn 1proceedingCo+umn3 inside the Co+umns node. 8ou ill
noti!e that the I=:L editor highlights the related !ode.
/igure #4
Data,ridChec+Bo)Colu#n .proceedingColu#n/ in Docu#ent -utline
.1 In the I=:L editor, !o##ent out the ,ataLridBhe!2Eo0Bolu#n and insert the
"olloing ,ataLrid5e#plateBolu#n.
C%,9
5677 53ata8ridC#eckBo+Colu/n Binding"&{Binding -at#"-roceeding,&
2eader"&-roceeding& 1idt#"&!i9e)o2eader& :; 77;
53ata8rid)e/plateColu/n 2eader"&-roceeding& 1idt#"&!i9e)o2eader&;
53ata8rid)e/plateColu/n$Cell)e/plate;
53ata)e/plate;
5Rectangle :;
5:3ata)e/plate;
5:3ata8rid)e/plateColu/n$Cell)e/plate;
5:3ata8rid)e/plateColu/n;
.4 Pla!e your !ursor on the P>e!tangle /Q !ode and the Properties pane ill sho the
properties "or the >e!tangle.
Page 1J
.5 In the Properties indo, use the )ear!h "ield to "ind the 'ill attribute.
/igure #5
$ectangle Fill Propert0
.3 Bli!2 the s#all bla!2 s7uare lo!ated right ne0t to the ord 'ill. Bli!2 %pp+2 Data
Binding.
.7 In the ,ata Einding indo, !li!2 the Bonverter pane and sele!t Sout'ridge,
Boo+ean!oBrus'Con:erter and Create Ne48
/igure #=
Page 20
!dding Boolean1oBrushCon2erter
.4 Bli!2 0D in the Breate >esour!e dialogue, 2eeping the de"ault value "or ?ey.
.J 5ype Proceeding in the (arameter "ield. 5his ill tell the Bonverter hi!h "ield to get
the value "ro# in the !urrent >o.
/igure #?
Boolean1oBrushCon2erter Para#eter
.10 Bli!2 De&ug K Start 4it'out De&ugging @or press B5>LO'5A and see your tra""i!
lights in the pro!eeding !olu#nR
Page 21
/igure #@
$unning the !pplication
Next Step
<0er!ise 1: Breating and 9sing >esour!es
.1
Exercise &: Creating and 'sing (eso!rces
!as" # $ Creating a Eesource from t'e Bac"ground (ropert2 of a Button
.2 'or this e0er!ise, you !an !ontinue to use the solution "ro# <0er!ise 2 or open the
begin solution lo!ated at \Ex03-CreatedAndsing!eso"rces\begin\ 1C'oosing t'e
fo+der t'at matc'es t'e +anguage of 2our preference.3 8ou ill need to build the
solution @!li!2 Bui+d K Bui+d So+utionA be"ore the designer ill sho the &P' or2 e
did in <0er!ise 2.
.1 *pen &indo1.0a#l and sele!t the for4ardButton !reated in <0er!ise 2.
.4 In the Properties indo, use the )ear!h tool to "ind the Bac"ground property.
Page 22
/igure #B
Setting Bac+ground Propert0
.5 Bli!2 the Ea!2ground property and the Erush editor ill appear. Bli!2 the eyedropper
tool and sele!t a !olor "ro# anyhere on your s!reen. 8ou ill see the ba!2ground o"
the button has !hanged.
.3 ;o !li!2 the bla!2 s7uare ne0t to ba!2ground label in the property broser to pi!2
the .<0tra!t to >esour!e/ option.
/igure -.
()tract Value to $esource
Page 21
.7 Bli!2 0D in the Breate >esour!e dialogue, a!!epting the de"ault values. 5his indo
lets you e0tra!t the property6s value into a resour!e that you !an re%use. In this !ase, the
resour!e ill be !reated in &indo1.0a#l.
.4 Loo2 in the I=:L !ode editor and you6ll "ind a So+idCo+orBrus' ele#ent inside the
Windo4.Eesources node.
C%,9
51indow$Resources;
5677 Additional Resources 0/itted 77;
5!olidColorBrus#
+<=e."&4ig#t0rangeBrus#=e.&;>%%%%%?3?5:!olidColorBrus#;
5:1indow$Resources;
!as" - $ *sing t'e Eesource to *pdate Bac"ground (ropert2 of %not'er Button
.1 )ele!t the &ac"Button and lo!ate the Ea!2ground property in the properties
indos.
.2 Bli!2 the bla!2 s7uare in the properties indo ne0t to the Ea!2ground property label
and sele!t %pp+2 Eesource.
/igure -#
!ppl0 $esource
.1 )ele!t the resour!e "ro# the 9oca+ e0pander.
Page 24
/igure --
!ppl0 $esource
.4 5he for4ardButton and &ac"Button no share the sa#e resour!e, de"ining the
Ea!2ground.
.5
Next Step
)u##ary
.3
S!""ar)
In this lab, you have learned ho to !reate and !usto#i$e a #aster%detail business "or# in &P'
4.0. 8ou have !reated data s!a""olding "or the appli!ation both si#ple and #aster%detail.
=#ong other "eatures, you have seen ho to !usto#i$e the output o" datasour!es to !reate
!usto# visuals using the ,atabinding e0pression builder "ro# the property broser, and used
#ar2up e0tension intellisense to !reate databinding e0pressions.
:oreover, you have seen ho to e0tra!t a !o##on loo2 into a resour!e and ho to apply it
using the resour!e pi!2er.
=ll these tools, plat"or#, and languages in the latest release o" (isual )tudio 2010 should boost
your ability to !reate poer"ul #aster%detailed business appli!ations.
Page 25