`

WP7 学习之panorama 全景控件应用

    博客分类:
  • WP7
阅读更多

引入命名空间xmlns:controls="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls"

 

Panorama控件用来在一个很长的横向面板上显示相关的内容,屏幕之外的内容可以依次切入到屏幕中,可以通过左右滑动的方式来切换它们。当看到其中的一个元素的时候,可以在屏幕右边显示出了一点下一屏的内容,这样你就可以知道在当前屏幕的下一屏还是有内容的。当浏览到内容的最后一屏再继续切换的话,则会回到第一屏。另外Panorama控件自身内置了触控和导航,通常来说这些已经够用,基本上不需要再为其实现特殊的手势功能。

 

在Windows Phone系统下,内置的People和Music+Videos界面就是一个典型的案例

 

xaml:

<controls:Panorama Title="pictuper and note">
<controls:Panorama.Background>
<ImageBrush ImageSource="/Image/4.jpg"></ImageBrush>
</controls:Panorama.Background>
<controls:PanoramaItem Header="图片1" Orientation="Horizontal">
<Image Source="/Image/1.jpg"></Image>
</controls:PanoramaItem>
<controls:PanoramaItem Header="图片2" Orientation="Horizontal">
<Image Source="/Image/2.jpg"></Image>
</controls:PanoramaItem>
<controls:PanoramaItem Header="图片3" Orientation="Horizontal">
<Image Source="/Image/3.jpg"></Image>
</controls:PanoramaItem>
<controls:PanoramaItem Header="文本">
<ListBox FontSize="30">
<ListBoxItem Content="aaaaaaaaaaaaaaaa"></ListBoxItem>
<ListBoxItem Content="aaaaaaaaaaaaaaaa"></ListBoxItem>
<ListBoxItem Content="aaaaaaaaaaaaaaaa"></ListBoxItem>
</ListBox>
</controls:PanoramaItem>

<controls:PanoramaItem Header="first item">
<ListBox Margin="0,0,-12,0" ItemsSource="{Binding Items}">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Margin="0,0,0,17" Width="432">
<TextBlock Text="{Binding LineOne}" TextWrapping="Wrap" Style="{StaticResource PhoneTextExtraLargeStyle}"/>
<TextBlock Text="{Binding LineTwo}" TextWrapping="Wrap" Margin="12,-6,12,0" Style="{StaticResource PhoneTextSubtleStyle}"/>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</controls:PanoramaItem>
</controls:Panorama>

 

尽量控制PanoramaItems的个数最大不超过四个。

 

除非PanoramaItems有内容显示,否则最好是把Visibility属性设置成Collapsed以隐藏。

 

通过设置Orientation属性为Horizontal使PanoramaItems可以显示比屏幕边界更宽的内容。

 

使用合适的背景图片大小,建议为高度800像素,宽度在2000像素以内。

 

尽量设置Panorama的Title属性为应用程序在开始界面的名称。

 

尽量避免为Panorama的Title填加动画或者动态更改其大小。

分享到:
评论
发表评论

文章已被作者锁定,不允许评论。

相关推荐

Global site tag (gtag.js) - Google Analytics