Windows Phone7屏幕方向与常用控件

junwong 发布于 2012/03/05 16:55
阅读 147
收藏 0

【Gopher China万字分享】华为云的Go语言云原生实战经验!>>>

跟林永坚老师学习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();

代码下载 

 


原文链接:http://www.cnblogs.com/LittleFeiHu/archive/2012/02/27/2370382.html
加载中
返回顶部
顶部