技术开发 频道

Windows Phone7开发之:全景视图

  向PanoramaItem中添加内容

  你完全可以不用,但我还是建议你以ListBox开始。如果有很多内容的话它能让这些内容垂直滚动。说到布局你可以有很多很多选项,但一个ListBox可能会给你带来最大的便利。(另外,在代码中绑定一个列表的数据项是一种很简单的方法。参见来自Scott Guthrie的教程)

  我的这个例子,提供了5个你可以从这个屏幕中启动的应用程序。我创建了一些自定义XAML,并放到了ListBox中。下面是XAML代码,以及模拟器中“Play”这个项的截图:

<controls:PanoramaItem Header="play">
    
<ListBox Margin="0,0,-12,0">
        
<StackPanel Orientation="Horizontal" Margin="0,0,0,17">
            
<Image Height="100" Width="100" Source="icons/tictactoe.png" Margin="12,0,9,0"/>
            
<StackPanel Width="311">                                    
                
<TextBlock Text="tic tac toe"  TextWrapping="Wrap" Style="{StaticResource PhoneTextExtraLargeStyle}"/>
                
<TextBlock Text="the classic two player game" TextWrapping="Wrap" Margin="12,-6,12,0" Style="{StaticResource PhoneTextSubtleStyle}"/>
            
</StackPanel>
        
</StackPanel>
        
<StackPanel Orientation="Horizontal" Margin="0,0,0,17">
            
<Image Height="100" Width="100" Source="icons/numbers.png" Margin="12,0,9,0"/>
            
<StackPanel Width="311">
                
<TextBlock Text="numbers"  TextWrapping="Wrap" Style="{StaticResource PhoneTextExtraLargeStyle}"/>
                
<TextBlock Text="learn your digits from 1 - 20" TextWrapping="Wrap" Margin="12,-6,12,0" Style="{StaticResource PhoneTextSubtleStyle}"/>
            
</StackPanel>
        
</StackPanel>
        
<StackPanel Orientation="Horizontal" Margin="0,0,0,17">
            
<Image Height="100" Width="100" Source="icons/wordsearch.png" Margin="12,0,9,0"/>
            
<StackPanel Width="311">
                
<TextBlock Text="word search"  TextWrapping="Wrap" Style="{StaticResource PhoneTextExtraLargeStyle}"/>
                
<TextBlock Text="find as many words as you can" TextWrapping="Wrap" Margin="12,-6,12,0" Style="{StaticResource PhoneTextSubtleStyle}"/>
            
</StackPanel>
        
</StackPanel>
        
<StackPanel Orientation="Horizontal" Margin="0,0,0,17">
            
<Image Height="100" Width="100" Source="icons/animals.png" Margin="12,0,9,0"/>
            
<StackPanel Width="311">
                
<TextBlock Text="animals"  TextWrapping="Wrap" Style="{StaticResource PhoneTextExtraLargeStyle}"/>
                
<TextBlock Text="hear and learn your favorites" TextWrapping="Wrap" Margin="12,-6,12,0" Style="{StaticResource PhoneTextSubtleStyle}"/>
            
</StackPanel>
        
</StackPanel>
        
<StackPanel Orientation="Horizontal" Margin="0,0,0,17">
            
<Image Height="100" Width="100" Source="icons/alphabet.png" Margin="12,0,9,0"/>
            
<StackPanel Width="311">
                
<TextBlock Text="alphabet"  TextWrapping="Wrap" Style="{StaticResource PhoneTextExtraLargeStyle}"/>
                
<TextBlock Text="learn your letters" TextWrapping="Wrap" Margin="12,-6,12,0" Style="{StaticResource PhoneTextSubtleStyle}"/>
            
</StackPanel>
        
</StackPanel>
    
</ListBox>
</controls:PanoramaItem>
  

  好了,就这些!这里的每个图标都链接到它们自己的独立XAML文件,但这个全景视图为用户提供了在实际玩儿任何游戏之前都能从我的应用程序导航的能力。

  这个示例代码包含了我所讲的所有内容。快下载下来并亲自学习全景视图控件吧!

0
相关文章