windows phone7 学习笔记08——屏幕方向
2012-02-14 21:54
267 查看
wp7支持竖屏和横屏,但是默认情况下,Silverlight程序以纵向开始,XNA程序以横向开始(游戏通常在宽屏下表现会更好)。我们可以通过修改SupportedOrientations="Portrait" Orientation="Portrait"来更改屏幕支持和启动的方向。
SupportedOrientations:支持屏幕的方向。有三种可选:
Portrait (默认值)
Landscape
PortraitOrLandscape
Orientation:启动屏幕的方向:
Landscape
LandscapeLeft (将电话向左翻转,头部在左)
LandscapeRight (将电话向右翻转,头部在右)
Portrait
PortraitDown (正常的竖直方向)
PortraitUp (倒置)
如果支持的方向为SupportedOrientations,那么当翻转屏幕时,系统会自动翻屏。但是一般系统自动翻转处理的都不好,那么就需要我们来重新布局,这是就要重写OrientationChanged。
下面提两个布局的技巧,如何是页面翻转后仍然好看。
1、使用自动调整大小和滚动
这个技巧需要在ScrollViewer控件中使用StackPanel,适用于需要显示列表数据或者一个控件接着一个控件显示的情况。StackPanel允许将其内部的控件一个接一个地显示,ScrollViewer控件允许转屏的过程中当控件超出屏幕的时候在StackPanel中显示滚动条。
步骤是替换(不是在Grid下面添加)Grid为ScrollViewer和StackPanel。如:
2、使用Grid布局
这个技巧的元素布局在Grid中。当方向改变的时候,通过编程的方式对元素的在Grid中的行和列重新定位(即更改子元素的Grid.Row和Grid.Column属性)。
XAML
C#
(1)在 MainPage.xaml 文件的 XAML 代码中,将以下代码添加到页面顶部的 phone:PhoneApplicationPage 下。
(2)转到 MainPage.xaml.cs 并找到事件处理程序。下面的代码根据方向更改来切换按键列表的位置。
还有一篇文章是讲解使用VisualState布置屏幕方向处理的,这个有需要的童鞋可以去看下:/article/5296008.html
参考文章:http://msdn.microsoft.com/zh-cn/library/ff769553(VS.92).aspx
SupportedOrientations:支持屏幕的方向。有三种可选:
Portrait (默认值)
Landscape
PortraitOrLandscape
Orientation:启动屏幕的方向:
Landscape
LandscapeLeft (将电话向左翻转,头部在左)
LandscapeRight (将电话向右翻转,头部在右)
Portrait
PortraitDown (正常的竖直方向)
PortraitUp (倒置)
如果支持的方向为SupportedOrientations,那么当翻转屏幕时,系统会自动翻屏。但是一般系统自动翻转处理的都不好,那么就需要我们来重新布局,这是就要重写OrientationChanged。
public About() { InitializeComponent(); OrientationChanged += new EventHandler<OrientationChangedEventArgs>(About_OrientationChanged); }
void About_OrientationChanged(object sender, OrientationChangedEventArgs e) { if (e.Orientation == PageOrientation.LandscapeLeft || e.Orientation== PageOrientation.LandscapeRight) { TitlePanel.Visibility = Visibility.Collapsed; //横屏不可见 } else if (e.Orientation == PageOrientation.PortraitDown || e.Orientation== PageOrientation.PortraitUp) { TitlePanel.Visibility = Visibility.Visible; //竖屏可见 } }
下面提两个布局的技巧,如何是页面翻转后仍然好看。
1、使用自动调整大小和滚动
这个技巧需要在ScrollViewer控件中使用StackPanel,适用于需要显示列表数据或者一个控件接着一个控件显示的情况。StackPanel允许将其内部的控件一个接一个地显示,ScrollViewer控件允许转屏的过程中当控件超出屏幕的时候在StackPanel中显示滚动条。
步骤是替换(不是在Grid下面添加)Grid为ScrollViewer和StackPanel。如:
<ScrollViewer x:Name="ContentGrid" Grid.Row="1" VerticalScrollBarVisibility="Auto"> <!--You must apply a background to the StackPanel control or you will be unable to pan the contents.--> <StackPanel Background="Transparent" > <!--Adding various controls and UI elements.--> <Button Content="This is a Button" /> <Rectangle Width="100" Height="100" Margin="12,0" HorizontalAlignment="Left" Fill="{StaticResource PhoneAccentBrush}"/> <Rectangle Width="100" Height="100" HorizontalAlignment="Center" Fill="{StaticResource PhoneAccentBrush}"/> <Rectangle Width="100" Height="100" Margin="12,0" HorizontalAlignment="Right" Fill="{StaticResource PhoneAccentBrush}"/> <TextBlock Text="This is a line of text that will wrap in portrait orientation but not landscape orientation." TextWrapping="Wrap" /> <CheckBox Content="A CheckBox"/> <RadioButton Content="A RadioButton" /> </StackPanel> </ScrollViewer>
2、使用Grid布局
这个技巧的元素布局在Grid中。当方向改变的时候,通过编程的方式对元素的在Grid中的行和列重新定位(即更改子元素的Grid.Row和Grid.Column属性)。
XAML
<!--Create a 2 x 2 grid to store an image and button layout.--> <Grid.RowDefinitions> <RowDefinition Height="Auto"/> <RowDefinition Height="*"/> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition Width="Auto"/> <ColumnDefinition Width="*"/> </Grid.ColumnDefinitions> <!--Add an image to the grid. Ensure that the image height and width are set to 300 and 500, respectively, for this example.--> <Image x:Name="Image1" Grid.Row="0" Grid.Column="0" Stretch="Fill" HorizontalAlignment="Center" Source="TestImage.jpg" Height="300" Width="500"/> <!--Add a StackPanel with buttons to the row beneath the image.--> <StackPanel x:Name="buttonList" Grid.Row="1" Grid.Column="0" HorizontalAlignment="Center" > <Button Content="Action 1" /> <Button Content="Action 2" /> <Button Content="Action 3" /> <Button Content="Action 4" /> </StackPanel>
C#
(1)在 MainPage.xaml 文件的 XAML 代码中,将以下代码添加到页面顶部的 phone:PhoneApplicationPage 下。
OrientationChanged="PhoneApplicationPage_OrientationChanged"
(2)转到 MainPage.xaml.cs 并找到事件处理程序。下面的代码根据方向更改来切换按键列表的位置。
private void PhoneApplicationPage_OrientationChanged(object sender, OrientationChangedEventArgs e) { // Switch the placement of the buttons based on an orientation change. if ((e.Orientation & PageOrientation.Portrait) == (PageOrientation.Portrait)) { Grid.SetRow(buttonList, 1); Grid.SetColumn(buttonList, 0); } // If not in the portrait mode, move buttonList content to a visible row and column. else { Grid.SetRow(buttonList, 0); Grid.SetColumn(buttonList, 1); } }
还有一篇文章是讲解使用VisualState布置屏幕方向处理的,这个有需要的童鞋可以去看下:/article/5296008.html
参考文章:http://msdn.microsoft.com/zh-cn/library/ff769553(VS.92).aspx
相关文章推荐
- 方向梯度直方图(HOG,Histogram of Gradient)学习笔记二 HOG正篇
- 【django 学习笔记】08-模板高级进阶
- java学习笔记08--泛型
- HTML5学习笔记——屏幕自适应的问题
- java学习笔记_08_Java IO
- Java学习笔记_08
- IOS学习笔记2-IOS屏幕 [[UIScreen mainScreen] bounds] 与[UIScreen mainScreen] applicationFrame]区别
- Java学习笔记08——持久层框架Hibernate
- Vray材质学习笔记08——陶瓷材质
- iOS学习笔记 不断进化的屏幕适配
- 【学习笔记】day2数据存储和界面展现第一天 08_使用api获取内部存储空间路径09_files文件夹与cache文件夹
- 嵌入式开发之C基础学习笔记08--结构体和共用体
- (原创)c#学习笔记08--面向对象编程简介01--面向对象编程的含义03--对象的生命周期--构造函数和析构函数
- WP7应用开发笔记-技巧 使用VisualState布置屏幕方向处理
- Hibernate学习笔记_08_一对一单向、双向主键关联
- 机器学习实战笔记(Python实现)-08-线性回归
- 方向梯度直方图(HOG,Histogram of Gradient)学习笔记二 HOG正篇
- 学习之随堂笔记——屏幕适配
- C语言学习笔记:08_循环结构
- java学习笔记08--泛型