panorama控件

panorama控件是wp开发常用的控件，与metro风格相当吻合..

控件对应重要属性如下图:

    <phone:PhoneApplicationPage.Resources>
        <ResourceDictionary>
            <Style x:Key="galleryStyle" TargetType="TextBlock">
                <Setter Property="FontSize"  Value="30"/>
            </Style>
            <Style x:Key="recentStyle" TargetType="TextBlock">
                <Setter Property="FontSize"  Value="34"/>
            </Style>
        </ResourceDictionary>
    </phone:PhoneApplicationPage.Resources>
    <!--LayoutRoot 是包含所有页面内容的根网格-->
    <Grid x:Name="LayoutRoot" Background="Transparent">
        <!--Title对应全景图大标题,英文尽量以小写字母开头-->
        <controls:Panorama Name="panorama1" Title="pictures">
            <!--全景图-->
            <controls:Panorama.Background>
                <ImageBrush ImageSource="images/PanoramaBackground.png" />
            </controls:Panorama.Background>
            <!--Header对应item的标题-->
            <controls:PanoramaItem Header="gallery">
                <Grid>
                    <StackPanel>
                        <TextBlock Text="albums" Style="{StaticResource galleryStyle}"/>
                        <TextBlock Text="all" Style="{StaticResource galleryStyle}"/>
                        <TextBlock Text="favorites" Style="{StaticResource galleryStyle}"/>
                    </StackPanel>
                </Grid>
            </controls:PanoramaItem>
            <controls:PanoramaItem Header="recent">
                <Grid>
                    <StackPanel>
                        <TextBlock Text="Chrysanthemum"  Style="{StaticResource recentStyle}"/>
                        <TextBlock Text="Desert"  Style="{StaticResource recentStyle}"/>
                        <TextBlock Text="Hydrangeas"   Style="{StaticResource recentStyle}"/>
                        <TextBlock Text="Chrysanthemum"  Style="{StaticResource recentStyle}"/>
                        <TextBlock Text="Jellyfish"  Style="{StaticResource recentStyle}"/>
                        <TextBlock Text="Koala"  Style="{StaticResource recentStyle}"/>
                        <TextBlock Text="Lighthouse"  Style="{StaticResource recentStyle}"/>
                    </StackPanel>
                </Grid>
            </controls:PanoramaItem>
            <!--Orientation值 horizontal设置后可以让一个item占用空间超过一屏-->
            <controls:PanoramaItem Header="samples" Orientation="Horizontal"> 
                <Grid>
                    <TextBlock
                    Text="这是呈现多于一屏的文本信息......."
                    Style="{StaticResource PhoneTextExtraLargeStyle}"
                    HorizontalAlignment="Center"
                    VerticalAlignment="Center" >
                    </TextBlock>
                </Grid>
            </controls:PanoramaItem>
        </controls:Panorama>
    </Grid>

 效果图:

转载于:https://www.cnblogs.com/linsage/archive/2012/08/14/2638930.html