WPF and Silverlight Master Class

W h a t w e ’ re g o in g to co ve r ju st
n•o w …
Brief overview of WPF and Silverlight
• Why are we using WPF??
• System Requirements
• Layout and Structure of code
• Telerik Controls…
• Questions??
Brief overview of WPF and
Silverlight
Further explination of WPF

This picture sums up a lot of whats good

•

about WPF
Why are we using WPF
• The main reason, because we can
create dynamic applications FAST!
• It allows us major revamp to the
existing controls
• most of the code behind can remain
the same, its only the UI interface
that needs freshened up, WPF has
the same “code-behind” as existing
WinForms dialogs
System Requirements
Layout of code
• Both WPF and Silverlight use XAML
code for the UI layer, and C# for
the backend code…
• Very similar to ASP.NET style layout
(nested controls)
• Example :
• <grid>
• <button>
• <textblock/>
• <button>
• </grid>
Panels…

• Code is nested inside each other…

• Different types of panels… 4 major
types…
– Canvas – Co-ordinates based and
drawing support
– Grid – Coordinates based
– StackPanel orders items either
vertically or horizontally (change of
orientation!)
– DockPanel (fills to 100% height/width)
–
 Control Composition…

Just to give you an idea of what we mean when we say controls can easily
be composed …

< Button >

< StackPanel O rie n ta tio n =" Horizontal " >
< Image S o u rce =" speaker . png “
S tre tch =" Uniform " />
< TextBlock Text=" Play Sound " />
< / StackPanel >
< / Button >    
Styling and Templating
• With WPF you can create Templates/Styles that effect certain controls, or
ALL controls of that type..
For example:
<!--A Style that affects all TextBlocks-->

• <Style TargetType="TextBlock">
<Setter Property="HorizontalAlignment" Value="Center" />
<Setter Property="FontFamily" Value="Comic Sans MS"/>
<Setter Property="FontSize" Value="14"/>
</Style>

However if we give this an x:key property… not all textblocks will be set… only the ones
we want…
<!--A Style that affects all TextBlocks-->
<Style TargetType="TextBlock“ x:key=“MyTextBlockStyle“ >
<Setter Property="HorizontalAlignment" Value="Center" />
<Setter Property="FontFamily" Value="Comic Sans MS"/>
<Setter Property="FontSize" Value="14"/>
</Style>
I.E.
<TextBlock Style="{StaticResource MyTextBlockStyle}" Name="textblock1">
My Pictures
</TextBlock>
Backwards Compatibility

• We can also use windows forms controls in our

code… it doesn’t look that pretty in the
designer, but looks as expected when running
the application
•
• For Example:
<WindowsFormsHost Name="wfh" Height="300">
<WindowsControls.NumericUpDown/>
</WindowsFormsHost>
Events
• Events are much the same as in existing languages, however
there are subtle differences to the naming convention for
things…
•

• For Example :
• Windows Forms WPF
– OnClick  C licC
– OnTextChanged  TextC hanged
– C nC croll  Scrolled
–
• …C C tc… C ou get the idea! Drop the C n For most
things!!!
Telerik Controls…
• Another one of the reason that we
are using the WPF and Silverlight
controls is the vast array of Telerik
WPF and Silverlight controls
available to us, this adds another
degree of functionality…
o heavy support for Drag and Drop,
o Data binding
o Rich Controls (Ribbon Bars, Carosels, ListViews etc.)
Questions???

• Thanks for listening and bearing with

me!... Any questions?