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

 

<ItemsControl.ItemTemplate>

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

 

Margin

Attribute for how far from the outside is the element

 

Padding

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.

 

Panels

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.

 

Grid

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: Silverlight.codeplex.com

DockPanel

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

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.MultiSelect

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

a.ShowDialog(); returns true/false

var result = a.File;

a.Files (when Multiselect = true)

var b = SaveFileDialog();

b.ShowDialog();

 

Databinding:

Silverlight-databinding

(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

IValueConvertor

Convert has a parameter

 

Mode:

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">

   <ds:DomainDataSource.DomainContext>

       <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

DataFormControl

Navigation Framework -

<navigation:Frame>

    <navigation:Frame.UriMapper>

        <uriMapper:UriMapper>

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

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

        </uriMapper:UriMapper>

    </navigation:Frame.UriMapper>

</navigation:Frame>

<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

Event_a(…){

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

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

}}

 

Data Annotations in Web:

XDomainService.metadata.cs

Possible Attributes:

[Required(ErrorMessage="you…")]

[StringLength]

[RegularExpression]

[Range]

[EnumDataType] – must be a value in the enum

[CustomValidation]

[Display] – the text of the field

[Editable] – readonly

 

Setting up the wanted fields:

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

<c:CustomDataForm.EditTemplate>

<DataTemplate>

<StackPanel>

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

</StackPanel>

</DataTemplate>

</c:CustomDataForm.EditTemplate>

</c:CustomDataForm>

 

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}">