101 - WPF Application Styling


Uploaded by JohnPara100 on 10.08.2011

Transcript:
right so next up we're gonna talk about WPF app styling uh...
application from infragistics
and i like to introduce mr Jason
so what we're gonna show today is how to beautifully style WPF
application with no code
no design team i think that
as Russ talk about in the beginning how designer developers don't really get
along very well
while i'm gonna make it easier for you to become more like a designer even
though you're all developers
uh... right now this is the world for the year so actually if you go to
infragistics.com uh...
WPF styling you can download this
and as well we're offering a free datagrid for WPF
and some other things up there so i encourage you to download this try out
give us feedback
in how to bring out the designer in use so let's take a look at how this work


okay so the first I bring up a WPF application I already have written
you can see that the WPF app kind of feel like windows forms it looks
good i can tell us WPF is this next-generation awesome experienced
transpose to get but it still has this gray look
so what i wanna do is
bring it into you know the twenty-first century add some office two thousand
seven collors to it but i'm not a designer so
let's close this out
i'm gonna to go expression blend and start a new WPF app
so i go to my asset gallery
grab a cup of controls
grab a cup of buttons just drag among
if you don't use blend you can see it's pretty easy design experience
drag some sliders and the reason i'm doing this is just to show how these controls
get affected
by the technology
so lets grab a tab
few taps
so we're all set hit F5 run this guy and you can see that
this is my app and again it's WPF but it doesn't feel like the WPF yet
so i want to add some style
so right-click go to references
and you'll notice here in my app reference dialogue is there some theme
assemblies this is what i want you guys to go download
this will bring out the designer in use
so let's add those theme assemblies go back to my asset library go to custom
controls
and you can see now that i have some
theme assemblies in there so let's go ahead and take office black
grab it on
nice ha
let's hit F5 and run this guy so like magic
no designer i have my office two thousand seven black colors
very cool all my states are correct
pretty neat ha?
no code
Joe Homnick told me this a years ago it's like
no code we don't want to code
give it up to Joe
now let's try the blue theme so drag blue on there now look i have the blue color
beautiful office two thousand seven blue
yeah beautiful ha? let's take a look at xaml
so what's happening here on the xaml is when you have the references
the namespace gets added to your window
so that's normal as just like any other assamblies WPF
and essentially that control is a none visual component that gets added to the
form
there's the magic that happens in there
and were refreshing the resource dictionaries
so who's gonna work with resource dictionary?
i don't think so because you're not designer as you're developers so why
should we should have to worry about this
this is where we can help out here
so let's take a look at this in visual studio
so i have themeTester app same thing i ran in the very beginning
and what i wanna do here
as i'm not gonna write code i'm just gonna highlights some code so here what we wanna
do is kind of switch themes at runtime
so i'm loading the theme
in the window load event here
and i wanna show you one key piece of this the theme target here is
application
so i'd drag this component onto the main form the main window of my app
every other window get styled with this color i don't have to do this for every
single form
now if i want to
i can change the scope to local which would be the panel that the control is in
and so maybe a canvas
uh... stack panel or grid
or I could do just the window that i'm on
so let's just keep it with application
like so i'll hit F5 run the same theme tester app
and like a magic we have a beautifully styled WPF brought office two thousand
seven blue app
so these are some infragistics controls
here's the system controls so look at that
no design team
no code
all right
i know david loves office two thousand seven blacks so lets switch the theme up
without having to restart the app
i've just applied the theme and now it magically changed office two thousand
seven black
and now it's tries silver
and there we go no code
no restarting of the add like magic we have
no design team of beautiful styling
that's incredible
thank you