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();

代碼下載