Windows Phone

Programming Windows Phone 7 : Silverlight and Dynamic Layout (part 1)

- Free product key for windows 10
- Free Product Key for Microsoft office 365
- Malwarebytes Premium 3.7.1 Serial Keys (LifeTime) 2019
12/28/2010 4:00:56 PM
If you run the SilverlightHelloPhone program from this article, and you turn the phone or emulator sideways, you’ll discover that the display doesn’t change to accommodate the new orientation. That’s easy to fix. In the root PhoneApplicationPage tag, of MainPage.xaml change the attribute

SupportedOrientations is a property of PhoneApplicationPage. It’s set to a member of the SupportedPageOrientation enumeration, either Portrait, Landscape, or PortraitOrLandscape.

Recompile. Now when you turn the phone or emulator sideways, the contents of the page shift around accordingly:

The SupportedOrientations property also allows you to restrict your program to Landscape if you need to.

This response to orientation really shows off dynamic layout in Silverlight. Everything has moved around and some elements have changed size. Silverlight originated in WPF and the desktop, so historically it was designed to react to changes in window sizes and aspect ratios. This facility carries well into the phone.

Two of the most important properties in working with dynamic layout are HorizontalAlignment and VerticalAlignment.Using these properties to center text in a Silverlight program was certainly easier than performing calculations based on screen size and text size that XNA required.

On the other hand, if you now needed to stack a bunch of text strings, you would probably find it straightforward in XNA, but not so obvious in Silverlight.

Rest assured that there are ways to organize elements in Silverlight. A whole category of elements called panels exist solely for that purpose. You can even position elements based on pixel coordinates, if that’s your preference.

In the meantime, you can try putting multiple elements into the content grid. Normally a Grid organizes its content into cells identified by row and column, but this program puts nine TextBlock elements in a single-cell Grid to demonstrate the use of HorizontalAlignment and VerticalAlignment in nine different combinations:

Example 1. Silverlight Project: SilverlightCornersAndEdges File: MainPage.xaml
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<TextBlock Text="Top-Left"
HorizontalAlignment="Left" />

<TextBlock Text="Top-Center"
HorizontalAlignment="Center" />

<TextBlock Text="Top-Right"
HorizontalAlignment="Right" />

<TextBlock Text="Center-Left"
HorizontalAlignment="Left" />

<TextBlock Text="Center"
HorizontalAlignment="Center" />

<TextBlock Text="Center-Right"
HorizontalAlignment="Right" />

<TextBlock Text="Bottom-Left"
HorizontalAlignment="Left" />

<TextBlock Text="Bottom-Center"
HorizontalAlignment="Center" />

<TextBlock Text="Bottom-Right"
HorizontalAlignment="Right" />

I’ve set the SupportedOrientations property of MainPage to PortraitOrLandscape. And here it is turned sideways:

Although this screen appears to show all the combinations, the program does not actually show the default settings of the HorizontalAlignment and VerticalAlignment properties. The default settings are enumeration members named Stretch. If you try them out, you’ll see that the TextBlock sits in the upper-left corner, just as with values of Top and Left. But what won’t be so obvious is that the TextBlock occupies the entire interior of the Grid. The TextBlock has a transparent background (and you can’t set an alternative) so it’s a little difficult to tell the difference. 

Obviously the HorizontalAlignment and VerticalAlignment properties are very important in the layout system in Silverlight. So is Margin. Try adding a Margin setting to the first TextBlock in this program:

<TextBlock Text="Top-Left"
Margin="100" />

Now there’s a 100-pixel breathing room between the TextBlock and the left and top edges of the client area. The Margin property is of type Thickness, a structure that has four properties named Left, Top, Right, and Bottom. If you specify only one number in XAML, that’s used for all four sides. You can also specify two numbers like this:

Margin="100 200"

The first applies to the left and right; the second to the top and bottom. With four numbers

Margin="100 200 50 300"

they’re in the order left, top, right, and bottom. Watch out: If the margins are too large, the text or parts of the text will disappear. Silverlight preserves the margins even at the expense of truncating the element.

If you set both HorizontalAlignment and VerticalAlignment to Center, and set Margin to four different numbers, you’ll notice that the text is no longer visually centered in the content area. Silverlight bases the centering on the size of the element including the margins.

TextBlock also has a Padding property:

<TextBlock Text="Top-Left"
Padding="100 200" />

Padding is also of type Thickness, and when used with the TextBlock, Padding is visually indistinguishable from Margin. But they are definitely different: Margin is space on the outside of the TextBlock; Padding is space inside the TextBlock not occupied by the text itself. If you were using TextBlock for touch events, it would respond to touch in the Padding area but not the Margin area.

Other -----------------
- Programming Windows Phone 7 : An XNA Program for the Phone (part 3)
- Programming Windows Phone 7 : An XNA Program for the Phone (part 2)
- Programming Windows Phone 7 : An XNA Program for the Phone (part 1)
- Programming Windows Phone 7 : Points and Pixels
- Windows Phone 7 : Changing Caller ID Settings
- Windows Phone 7 : Forwarding Calls
- Windows Phone 7 : Checking Voicemail
- Windows Phone 7 : Making Conference Calls
- Programming Windows Phone 7 : Color Themes
- Programming Windows Phone 7 : The Standard Silverlight Files
- Programming Windows Phone 7 : A First Silverlight Phone Program
- Programming Windows Phone 7 : Sensors and Services
- Programming Windows Phone 7 : The Hardware Chassis
- Windows Phone 7 : Deleting Music or Video
- Windows Phone 7 : Pinning Favorites to Start
- Windows Phone 7 : Listening to FM Radio
- Windows Phone 7 : Playing Podcasts
- Windows Phone 7 : Watching Videos
- Windows Phone 7 : Controlling Music Playback
- Windows Phone 7 : Playing Music
Top 10
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Finding containers and lists in Visio (part 2) - Wireframes,Legends
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Finding containers and lists in Visio (part 1) - Swimlanes
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Formatting and sizing lists
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Adding shapes to lists
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Sizing containers
- Microsoft Access 2010 : Control Properties and Why to Use Them (part 3) - The Other Properties of a Control
- Microsoft Access 2010 : Control Properties and Why to Use Them (part 2) - The Data Properties of a Control
- Microsoft Access 2010 : Control Properties and Why to Use Them (part 1) - The Format Properties of a Control
- Microsoft Access 2010 : Form Properties and Why Should You Use Them - Working with the Properties Window
- Microsoft Visio 2013 : Using the Organization Chart Wizard with new data
- First look: Apple Watch

- 3 Tips for Maintaining Your Cell Phone Battery (part 1)

- 3 Tips for Maintaining Your Cell Phone Battery (part 2)
programming4us programming4us