Now you're ready to run the application. Complete the following steps:
1. From the Debug menu, select Start Debugging. Your application will open in the Windows Phone emulator and will appear similar to the following:
2. Click the Rotate Right or Rotate Left button in the menu to view how the application would appear in landscape mode. Notice that the application does not rotate. In the next step you'll customize the application so that it rotates when the phone is turned.
3. Click the Stop Debugging button to close the application.
4. Edit the <phone:PhoneApplicationPage> tag to set the SupportedOrientations property to PortraitOrLandscape. It will appear similar to the following:
<phone:PhoneApplicationPage x:Class="C1WP7.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone" xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:c1="clr-namespace:C1.Phone;assembly=C1.Phone" mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768" FontFamily="{StaticResource PhoneFontFamilyNormal}" FontSize="{StaticResource PhoneFontSizeNormal}" Foreground="{StaticResource PhoneForegroundBrush}" SupportedOrientations="PortraitOrLandscape" Orientation="Portrait" shell:SystemTray.IsVisible="True">
By default when the phone is rotated, the application's interface does not rotate. By setting the SupportedOrientations property to PortraitOrLandscape the application will now rotate when the phone is rotated. In the next step you'll customize the appearance of the application when the phone is rotated to landscape mode.
5. In XAML view, click once on the <phone:PhoneApplicationPage> tag to select it, navigate to the Properties window, and select the Event tab to view the available events.
6. In the Properties window, locate and double-click the space next to the OrientationChanged event. This will create the OrientationChanged event handler and switch to Code view.
7. Add code to the OrientationChanged event handler so it appears similar to the following:
Private Sub PhoneApplicationPage_OrientationChanged(ByVal sender As System.Object, ByVal e As Microsoft.Phone.Controls.OrientationChangedEventArgs) Handles MyBase.OrientationChanged
If (e.Orientation) = (PageOrientation.Landscape) Then
Me.c1wrappanel1.Orientation = System.Windows.Controls.Orientation.Horizontal
Else If ((e.Orientation) = (PageOrientation.Portrait))
Me.c1wrappanel1.Orientation = System.Windows.Controls.Orientation.Vertical
End If
End Sub
•C#
private void PhoneApplicationPage_OrientationChanged(object sender, OrientationChangedEventArgs e)
{
if ((e.Orientation) == (PageOrientation.Landscape))
{
this.c1wrappanel1.Orientation = System.Windows.Controls.Orientation.Horizontal;
}
else if ((e.Orientation) == (PageOrientation.Portrait))
{
this.c1wrappanel1.Orientation = System.Windows.Controls.Orientation.Vertical;
}
}
The Orientation property determines if items in the panel are displayed horizontally or vertically. By default Orientation is set to Vertical and the panel displays content vertically; setting Orientation property to Horizontal will display content horizontally. In the above code, the Orientation property is set in the OrientationChanged event handler so that when the phone is in portrait mode the C1WrapPanel content will be displayed vertically and when the phone is in landscape mode the content will be displayed horizontally
8. Click Start Debugging again in the Debug menu. When the application is displayed in landscape mode it will now appear like the following:
Congratulations! You have successfully completed the WrapPanel for Windows Phone quick start.