zoukankan      html  css  js  c++  java
  • windows phone7 学习笔记08——屏幕方向

      wp7支持竖屏和横屏,但是默认情况下,Silverlight程序以纵向开始,XNA程序以横向开始(游戏通常在宽屏下表现会更好)。我们可以通过修改SupportedOrientations="Portrait" Orientation="Portrait"来更改屏幕支持和启动的方向。

      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布置屏幕方向处理的,这个有需要的童鞋可以去看下:http://www.cnblogs.com/kiminozo/archive/2012/02/12/2347903.html

      参考文章:http://msdn.microsoft.com/zh-cn/library/ff769553(VS.92).aspx


  • 相关阅读:
    Codeforces Gym 100571A A. Cursed Query 离线
    codeforces Gym 100500 J. Bye Bye Russia
    codeforces Gym 100500H H. ICPC Quest 水题
    codeforces Gym 100500H A. Potion of Immortality 简单DP
    Codeforces Gym 100500F Problem F. Door Lock 二分
    codeforces Gym 100500C D.Hall of Fame 排序
    spring data jpa 创建方法名进行简单查询
    Spring集成JPA提示Not an managed type
    hibernate配置文件中的catalog属性
    SonarLint插件的安装与使用
  • 原文地址:https://www.cnblogs.com/zhangkai2237/p/2351854.html
Copyright © 2011-2022 走看看