I.Introduction:
– Một ứng dụng Windows Phone 7 , như HelloWindowsPhone chẳng hạn, nếu các bạn để ở chế độ mặc định khi thực thi ứng sẽ theo chiều thẳng đứng của màn hình Emulator. Và khi chúng ta xoay chiều màn hình Emulator sang nằm ngang thì chuyện gì sẽ xảy ra ???? Những Control trong ứng dụng sẽ không thay đổi theo, và vẫn đc bố trí “Cố định” theo màn hình thẳng đứng.
-Trong bài này mình xin chia sẻ cách giải quyết vấn đề “Thay đổi chiều Control theo chiều màn hình điện thoại”.
II.Creating Project And Coding:
-Trước tiên chúng ta mở Vusual Studio lên và tạo Windows Phone Application Project:
-Bây giờ chúng ta thử xuất ra một dòng Hello Windows Phone như đoạn XAML sau :
1: <phone:PhoneApplicationPage
2: x:Class="SupportOrientation.MainPage"
3: xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
4: xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
5: xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
6: xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
7: xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
8: xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
9: mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768"
10: FontFamily="{StaticResource PhoneFontFamilyNormal}"
11: FontSize="{StaticResource PhoneFontSizeNormal}"
12: Foreground="{StaticResource PhoneForegroundBrush}"
13: SupportedOrientations="Portrait" Orientation="Portrait"
14: shell:SystemTray.IsVisible="True">
15:
16: <!--LayoutRoot is the root grid where all page content is placed-->
17: <Grid x:Name="LayoutRoot" Background="Transparent">
18: <Grid.RowDefinitions>
19: <RowDefinition Height="Auto"/>
20: <RowDefinition Height="*"/>
21: </Grid.RowDefinitions>
22:
23: <!--TitlePanel contains the name of the application and page title-->
24: <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
25: <TextBlock x:Name="ApplicationTitle" Text="MY APPLICATION" Style="{StaticResource PhoneTextNormalStyle}"/>
26: <TextBlock x:Name="PageTitle" Text="page name" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
27: </StackPanel>
28:
29: <!--ContentPanel - place additional content here-->
30: <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
31: <TextBlock Name="lbl_Result" Text="Hello Windows Phone 7"/>
32: </Grid>
33: </Grid>
34:
35: <!--Sample code showing usage of ApplicationBar-->
36: <!--<phone:PhoneApplicationPage.ApplicationBar>
37: <shell:ApplicationBar IsVisible="True" IsMenuEnabled="True">
38: <shell:ApplicationBarIconButton IconUri="/Images/appbar_button1.png" Text="Button 1"/>
39: <shell:ApplicationBarIconButton IconUri="/Images/appbar_button2.png" Text="Button 2"/>
40: <shell:ApplicationBar.MenuItems>
41: <shell:ApplicationBarMenuItem Text="MenuItem 1"/>
42: <shell:ApplicationBarMenuItem Text="MenuItem 2"/>
43: </shell:ApplicationBar.MenuItems>
44: </shell:ApplicationBar>
45: </phone:PhoneApplicationPage.ApplicationBar>-->
46:
47: </phone:PhoneApplicationPage>
Chạy ứng dụng xem thử kết quả :
Bây giờ chúng ta thử xoay chiều màn hình Emulator sang nằm ngang :
Rõ ràng là ứng dụng vẫn cố định, và không xoay các Control, thay đổi kích thước theo chiều nằm ngang, chúng ta dể dàng Khác phục tình trạng này bằng cách chỉnh lại thuộc tính SupportedOrientations
từ
SupportedOrientations="Portrait"
Sang
SupportedOrientations="PortraitOrLandscape"
Bây giờ chúng ta chạy lại ứng dụng để xem điều gì xảy ra khi xoay màn hình Emulator sang nằm ngang:
Chú Ý:
Thuộc tính SupportedOrientations hổ trợ 3 mode chính :
– Portrait: Ứng dụng theo chiều thẳng đứng của màn hình Emolator.
-Landscape: Ứng dụng theo chiều nằm ngang của màn hình Emolator.
-PortraitOrLandscape: Ứng dụng sẽ thay đổi tất các Control có trong ứng dụng theo chiều màn hình Emulator (Portrait hay Landscape).
Pham Nguyen 