Friday, February 25, 2011

Silverlight 4

Things I got from watching the videos in TekPub on Silverlight

Nice things from the Video:

<ItemsControl ItemsSource="{Binding}"

does a data binding to the current DataContext, ItemsControl is a list of items



specify how the items are going to be shown, binding here will be to the inside items



Attribute for how far from the outside is the element



Attribute for how is the distance from the context inside of it to the edge


Binding has a StringFormating good for date fields


<UserControl … d:DataContext="{d:DesignInstance Type=local:DemoClass, IsDesignTimeCreatable=True}"

Does a databinding in design time to see how the control will look like


Markup Extension has a default property, binding has Path:

{Binding Path=Hello} is the same as {Binding Hello}


Attached Properties, for example in grid: (ClassName.Property)

<Button Grid.Column=1


x:Name or Name are interchangeable when there is a Name property (one sets the other). You should use the x:Name because it always exists.



Canvas specify the exact location of the controls from the top and the left, by Canvas.Top and Canvas.Left. CAnvas.ZIndex sets which control is top/bottom, a higher value renders on top. Control can be set outside of the canvas.



Height = * (Weighted proportion can be 2* or 2.5*) / 50 (fixed value) / Auto (collapse to the smallest possible height)

the default is *

HorizontalAlignment: Left, Center, Right, Stretch. Center is the same as Stretch when the width is set

VerticalAlignment: Top, Center, Bottom, Stretch. Center is the same as Stretch when the heightis set


StackPanel no attached propertiies

Orientation – Vertical (default), Horizontal


Silverlight Toolkit:


toolkit:DockpanelDock=”Top” will cause the control to dock to the top


WrapPanel like the StackPanel but wraps the controls to the next row/column



Controls and Dialog Boxes – MSDN page that lists almost all the official controls

Sources: Runtime, SDK, Toolkit


Border Control (Runtime without a namespace) – adds a border with color, margin, padding.

Has only one child element.


ScrollViewer add a scroll to content when needed. The horizontal is by default disabled.


ViewBox the default stretches the child elements.

StretchDirection: UpOnly (larger only), DownOnly (small only), both


GridSplitter (SDK) dynamically change the size of the grid column/rows

Grid.Column tells it which columns to effect is

It overlaps the controls, so you should add a column for the splitter and add HorizontolAlligment=”Center”


ChildWindow show a model popup

need to add Silverlight Child Window control

Has a Show method to show the child window


Open/save file

var a = new OpenFileDialog();


a.Filter = “(*.cad)|*.cad;*.cdw|(images) ;*.bmp”;

a.ShowDialog(); returns true/false

var result = a.File;

a.Files (when Multiselect = true)

var b = SaveFileDialog();





(not mine taken from the presentation)


Change Notifications:

INotifyPropertyChanged – notify the UI that a property was changed

Passing an empty string gives a notification that everything was changed


Value Convertor:

bool to visibility


Convert has a parameter



OneTime (take first binding), OneWay (default readonly), TwoWay (changes is from the control and source)


Binding to other controls:

{Binding ElementName=ControlName, Path=PropertyName}


Building Business Applications

WCF RIA Services, Project Building Business Applications

Asset – Graphic styles, resources

Models – domain models

Views – screens in SL

GlobalSuppressions.cs – turn off some of the code analysis that is on by default


Web - Models\Shared code compile on both projects (In it is under Genereated_Code hidden folder)


Add EntityFramework of the DB in the Web Project – name myEf

Add Domain Service class to the Web Project


<ds:DomainDataSource x:Name="blahData" QueryName="BlahQuery">


       <my: MyEfDomainContext />


<sdk:DataGrid ItemSource="{Binding Data, ElementName=blahData}"


<sdK:DataPager Source="{Binding Data, ElementName=blahData}" PageSize="30"/>

The data in the service needs to be ordered before doing this


Building Business Applications, part 2


Navigation Framework -




             <uriMapper:UriMapping Uri="" MappedUri="/Views/Home.xaml"/> <—Default page

             <uriMapper:UriMapping Uri="/{pageName}" MappedUri="/Views/{pageName}.xaml"/> <—Default page




<LinkButton NavigateUri="/Customer" …/>

Navigates to /Views/Customer.xaml page


Ctrl+K, Ctrl+D To reformat the XAML


Using the CustomDataForm (created by the project template)

<c:CustomDataForm AutoGenerateFields="True" ItemsSource="{Binding Data, ElementName=blahData}"

EditEnded="Event_a" CommandButtonsVisibility="All"/>

Should be used with Pager, show by default read only fields, must fields


if(e.EditAction == DataFormEditAction.Commit ){

if(!CustomerData.IsSubmittingChanges) CustomerData.SubmitChanges();



Data Annotations in Web:


Possible Attributes:





[EnumDataType] – must be a value in the enum


[Display] – the text of the field

[Editable] – readonly


Setting up the wanted fields:

<c:CustomDataForm AutoGenerateFields="True" ItemsSource="{Binding Data, ElementName=blahData}" >




<TextBox Text="{Binding Company, Mode=TwoWay}"/>






Add/Delete is built in

Delete doesn’t commit out of the box, the pattern seen is an extra button to submit all the changes


BusyIndicator – when busy any control inside the control are readonly and a busy pop up is being shown

Wrap all the controls in a BusyIndicator, one of the controls the template creates

<c:BusyIndicator BusyContent="Loading…" IsBusy="{Binding IsLoadingData, ElementName=InvoiceData}">