Windows Phone7屏幕方向与常用控件

跟林永坚老师学习wp7

• 屏幕方向（Orientation）
•  常用控件（Canvas,Grid,StackPanel,TextBlock,Image,MediaElement）

屏幕方向感应页面（Portraint,LandScape）

• 在VS里可以新增 Portraint,LandScape的页面；
• 页面可以支持横屏 竖屏 或者同时支持两者
• 不能通过代码来改变屏幕方向

SupportedOrientations表示页面支持的屏幕方向，Orientation代表页面启动的方向；

可以通过注册事件来实现元素的控制：

namespace PageNavigation.views
{
    public partial class About : PhoneApplicationPage
    {
        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;
            }
        }
    }
}

　　使用TextBlock来格式化文本：

            <TextBlock Height="183" HorizontalAlignment="Left" Margin="56,126,0,0" Name="textBlock1"  VerticalAlignment="Top" Width="335">
<LineBreak></LineBreak>
                <Run Foreground="Beige" FontSize="32">文字一</Run>
                <LineBreak/>
                   <Run Foreground="Green" FontSize="20">文字2</Run>
            </TextBlock>

　　Img控件：支持png，jpeg，支持网络文件和本地文件（本地文件的Build Action为content）

 

     <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
            <Image Height="121" Source="http://cn.bing.com/az/hprichbg?p=rb%2fPipefishes_ZH-CN1693383898.jpg" HorizontalAlignment="Left" Margin="9,6,0,0" Name="image1" Stretch="Fill" VerticalAlignment="Top" Width="398" />
            <Image Height="350" Source="/pictures/DSCF0885.JPG" HorizontalAlignment="Left" Margin="6,154,0,0" Name="image2" Stretch="Fill" VerticalAlignment="Top" Width="462" />
        </Grid>

　　UI布局控件比较：

•  Canvas绝对定位控件，速度快，
• Grid网格定位，
• StackPanel自动定位控件

在使用canvas的时候往往会出现竖屏的时候是完整的，横屏的时候就会缺少元素的情况，这里有两个解决办法，一是通过注册事件，二是通过使用ScrollViewer；

 public partial class Picture : PhoneApplicationPage
    {
        public Picture()
        {
            InitializeComponent();
            OrientationChanged += new EventHandler<OrientationChangedEventArgs>(Picture_OrientationChanged);
        }

        void Picture_OrientationChanged(object sender, OrientationChangedEventArgs e)
        {
            if (e.Orientation == PageOrientation.LandscapeLeft || e.Orientation == PageOrientation.LandscapeRight)
            {
                Canvas.SetTop(button1, 200);
            }
            else if (e.Orientation == PageOrientation.PortraitDown || e.Orientation == PageOrientation.PortraitUp)
            {
                Canvas.SetTop(button1,466);
            }
        }
    }

　　Stackpanel控件：自动定位控件，不能指定具体子控件的布局；

可以通过注册事件调整子控件的方向

 if (e.Orientation == PageOrientation.LandscapeLeft || e.Orientation == PageOrientation.LandscapeRight)
            {
                stackpaneltest.Orientation = System.Windows.Controls.Orientation.Horizontal;
            }
            else if (e.Orientation == PageOrientation.PortraitDown || e.Orientation == PageOrientation.PortraitUp)
            {
                stackpaneltest.Orientation = System.Windows.Controls.Orientation.Vertical;
            }

　　Grid控件：优点容易支持翻屏的控件布局

注册事件的代码

  if (e.Orientation == PageOrientation.LandscapeLeft || e.Orientation == PageOrientation.LandscapeRight)
            {
                Grid.SetRow(stackpaneltest1, 0);
                Grid.SetColumn(stackpaneltest1, 1);
            }
            else if (e.Orientation == PageOrientation.PortraitDown || e.Orientation == PageOrientation.PortraitUp)
            {
                Grid.SetRow(stackpaneltest1, 1);
                Grid.SetColumn(stackpaneltest1, 0);
            }

　　MediaElement控件支持音频和视频，支持网络文件和本地文件，如果文件时本地文件，builaction设置为content

  mediaElement1.AutoPlay = true;
            mediaElement1.Source = new Uri("/vedio/my girl - 爱上鲨鱼的人鱼.mp3", UriKind.RelativeOrAbsolute);
            mediaElement1.Volume = 10;
            mediaElement1.Position = TimeSpan.FromMilliseconds(0);
            mediaElement1.Play();

代码下载