Windows Phone- Basic Orientation , Dynamic Layout and Events (2)

Hello

Orientation 

Take the program that we did in "Introduction - First Windows Phone Application (1.2)".
Use the emulator to turn the emulator sideways e.g. 90 degree clockwise. What happened ?
The display did not cope with orientation change.


Go to MainPage.xaml and change 

SupportedOrientations="Portrait" Orientation="Portrait"

to

SupportedOrientations="PortraitOrLandscape" Orientation="Portrait"

Now turn the emulator sideways. Much better , isn't it ?

Notice that the default Orientation is Portrait. Change it to Landscape and run the application again. What happened?

Horizontal and Vertical Alignment


Both describe how a child element is position or stretched within a parent layout.
Vertical alignment has four values : Top, Bottom, Center, Stretch
Horizontal alignment has four values : Right,Left,Center,Stretch.

Source sample
Orientation.zip (Use Firefox in case of error 310)

Following xaml snippet put 9 TextBlock in 3x3 matrix

And the result looks like this

Turning the emulator sideways :

Margin
Margin is a property of an element.
Margin is type Thickness which has four properties : Left, Top, Right, Bottom (in this order)
Following is a xaml snippet which define a Grid with 2x2 matrix.
The Text box both margin is 15(Left),10(Top),15(Right),10(Bottom)

It is very easy to understand the meaning of margin viewing this. You can think of margin as thickness of the element.

Padding
Padding is a property type Thickness . Only few UIElements has this property e.g. TextBox.
For TextBox it is defined as the space between the content area and the content displayed.

It is best understood via a sample

Events
You can handle event such as Loaded,Orientation changed etc.
It can be done via the IDE or directly by changing the XAML and code behind.
I will  add handling of OrientationChanged event via the IDE :

the resulting top of MainPage.xaml

and MainPage  (MainPage.xaml.cs - code behind)

Points of notice :

• You can add event handling by directly manipulating MainPage.xaml and MainPage.xaml.cs.

• Notice in MainPage.xaml that the event OrientationChanged is attached a handler name PhoneApplicationPage_OrientationChanged. MainPage.xaml.cs has the definition of PhoneApplicationPage_OrientationChanged.
• OrientationChangedEventArgs is an argument of the handle, can you imagine what info it contains  ?

Lets experiment a little with this event.
I will add TextBlock to write orientation info :

and compile.

Note that i used Name and not x:Name. What's the difference ?
x:Name can be used with anything while Name can be applied only to FrameworkElement because it has a Name property (FrameworkElement Class)

Now Look at the created file MainPage.g.cs Notice two interesting things :

• internal System.Windows.Controls.TextBlock tbOrientationChanged; - The new TextBlock name tbOrientationChanged is declared as part of class MainPage (notice that i have added it in xaml)
• this.tbOrientationChanged = ((System.Windows.Controls.TextBlock)

                (this.FindName("tbOrientationChanged"))); - object is accessed by the name given in xaml file

Now i will change the handler :

Run the application and rotate the emulator. You will see something like this :

OrientationChangedEvent.zip  (Use Firefox in case of error 310)

Nathan