Windows Phone - XAML (7)

Hello

Windows Phone Silverlight application is a mix of XAML for the visual part and code (.cs) for handling events like user input.

XAML is an XML

Every thing you do in silverlight can be divided to three categories :

• Can be done in XAML and code behind e.g. object instantiation
• Can be done only in XAML e.g. template
• Can be done only in code behind e.g. event handling  , methods

"Commnication" between XAML  and code behind is done via data binding and event handlers.

Property Inheritence

Sample source


ExperimentXaml_NK.zip

Note some properties of PhoneApplicationPage in every "Windows Phone Application" project  : FontFamily, FontSize, Forground. All UI Elements e.g. TextBlock inside PhoneApplicationPage inherit these properties.

Neverthless the TextBlock can override it e.g.  use different Forground and FontSize

Run the application to notice it

Property - Element Syntax
The following TextBlock has the same functionality as in above sample.

However, it use TextBlock  as XML attribute and Foreground as XML element - this is Property - Element syntax.
This  illustrate the following :

• TextBlock is an object element - a .Net object based on XML element
• HorizontalAlignment,  VerticalAlignment, FontSize,Text are property attributes - a .Net object properties based on XML attributes
• Foreground is a property element - a .Net object property based on XML element

Content Property
Content property is an attribute of .Net class.

e.g Border defines one property name Child to be the content of the class

This means that on xaml  we can write :

Or omit the child because it's content property

Resources Collection
Resources collection is a sharing mechanism of resources.
Every FrameworkElement has a Resources  property which is a collection of resources and they are available within the element and it's nested elements. Application resources are available throughout the application.


XAML resource is an object of .Net class\structure.


sample source
ResourcesSharing_NK.zip
This sample demonstrate resource definition and use. It defines two brushes : a red one called Error and a green one called Ok inside PhoneApplicationPage and a FontSize name fontSize inside LayoutRoot Grid element.

Remarks :

•  x:Key is the actual key to the Resources dictionary.
• system is defined as  

The sample use the resources as follows

Note that ContentPanel can be written equivalently using StaticResource without the shortcut  as follows :

Note that Windows Phone contains predefined resources such as Brushs,Colors,Fonts. In fact it is used in MainPage.xaml :  PhoneFontFamilyNormal, PhoneFontSizeNormal, PhoneForegroundBrush

x:Key and x:Name
Supose you ned to access XAML resource from your code. This is done by using key e.g.
this.ContentPanel.Resource[fontSize] will access the fontSize defined for ContentPanel Grid.
If the resource is not found in ContenetPanel then it is searched up the visual tree i.e. first on LayoutRoot , then on PhoneApplicationPage and so on.


You can use x:Name instead of x:Key and you will be able to do the following :

• Get : this.ContentPanel.Resource[fontSize] 
• Set : ContentPanel.Forground = fontSize

But this x:Name must be unique a cross the XAML file.

Basic Style

Style is a collection of properties for an element e.g. TextBlock.

Style is a resource with key,TargetType and Setters.

Sample source
BasicStyle_NK.zip

Style defintion :

Using style :

Property precedence :

• Local setting 
• Style
• Property inheritence
• Default values (constructor)

Style inheritance
Style may be inherited using BasedOn

Sample source
StyleInheritance_NK.zip

StyleBase has two properties : Forground and FontFamily.

StyleDerived inherit StyleBase and add FontSize property.

Style defintion :

Using style :

Nathan