Windows Phone 8 全景布局
Posted
技术标签:
【中文标题】Windows Phone 8 全景布局【英文标题】:Windows Phone 8 panorama layouts 【发布时间】:2013-05-13 13:34:50 【问题描述】:我是 Windows phone 8 开发的新手,无法查看全景视图。
当我创建一个基本的“Windows Phone Portrait Page”时,我可以毫无困难地创建网格并在这些网格之间对齐 Toolbox 控件。 但是,对于全景页面,当我创建网格时,这些网格将应用于全景中的每个页面,因此我不能为每个页面使用不同的布局。
如何在全景页面上实现不同的布局? 我应该改用 WindowsPhoneControl 吗?
感谢您的宝贵时间。
<phone:PhoneApplicationPage
x:Class="SmarterPower.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
FontFamily="StaticResource PhoneFontFamilyNormal"
FontSize="StaticResource PhoneFontSizeNormal"
Foreground="StaticResource PhoneForegroundBrush"
SupportedOrientations="Portrait" Orientation="Portrait"
shell:SystemTray.IsVisible="False">
<!--LayoutRoot is the root grid where all page content is placed-->
<Grid x:Name="LayoutRoot" Background="Transparent">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="148*"/>
<ColumnDefinition Width="225*"/>
<ColumnDefinition Width="107*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="351*"/>
<RowDefinition Height="201*"/>
<RowDefinition Height="248*"/>
</Grid.RowDefinitions>
<!--Panorama control-->
<phone:Panorama Title="smarter power for you" Grid.RowSpan="3" Grid.ColumnSpan="3">
<phone:Panorama.Background>
<ImageBrush ImageSource="/SmarterPower;component/Assets/PanoramaBackground.png"/>
</phone:Panorama.Background>
<!--Panorama item one-->
<phone:PanoramaItem>
<!--Double line list with image placeholder and text wrapping using a floating header that scrolls with the content-->
<phone:LongListSelector Margin="0,-38,-22,2" ItemsSource="Binding Items" VerticalContentAlignment="Top" VerticalAlignment="Top">
<phone:LongListSelector.ListHeaderTemplate>
<DataTemplate>
<Grid Margin="12,0,0,38">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<TextBlock Text="menu"
Style="StaticResource PanoramaItemHeaderTextStyle"
Grid.Row="0"/>
</Grid>
</DataTemplate>
</phone:LongListSelector.ListHeaderTemplate>
<phone:LongListSelector.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" Margin="0,0,0,0" Height="50" Width="432">
<!--Replace rectangle with image-->
<Image Source="Binding Image" />
<StackPanel Width="311" Margin="8,-5,0,5">
<TextBlock Text="Binding LineOne" TextWrapping="Wrap" Margin="0,5,10,0" Style="StaticResource PhoneTextSmallStyle" FontSize="StaticResource PhoneFontSizeLarge" VerticalAlignment="Center" />
</StackPanel>
</StackPanel>
</DataTemplate>
</phone:LongListSelector.ItemTemplate>
</phone:LongListSelector>
</phone:PanoramaItem>
<!--Panorama item two-->
<phone:PanoramaItem>
<TextBlock HorizontalAlignment="Left" Height="105" TextWrapping="Wrap" Text="TextBlock" VerticalAlignment="Top" Width="154" Margin="0,-10,0,0"/>
</phone:PanoramaItem>
</phone:Panorama>
</Grid>
【问题讨论】:
您能否从您的应用中复制并粘贴 XAML 代码?这会让我看到错误在哪里。可能发生的事情是您将新网格嵌套在错误的位置。 我已根据您的要求进行了更新。感谢您的关注。 供以后参考。请不要在没有代码的情况下在堆栈上发布问题。当你这样做时,人们往往会变得非常讨厌。您应该始终发布问题、代码和您尝试过的内容。我会看一下代码,如果我有任何想法,请告诉你。 很抱歉。感谢您的提示。 为什么要将 LayoutRoot 划分为列和行,而不是每个全景项?你想要的结果是什么? 【参考方案1】:您应该在全景项目内的 Grid 控件中定义行和列,而不是在布局根网格中定义它们:
<!--LayoutRoot is the root grid where all page content is placed-->
<Grid x:Name="LayoutRoot" Background="Transparent">
<!--Panorama control-->
<phone:Panorama Title="My Panorama" >
<!--Panorama item one-->
<phone:PanoramaItem Header="item 1">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="148*"/>
<ColumnDefinition Width="225*"/>
<ColumnDefinition Width="107*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="351*"/>
<RowDefinition Height="201*"/>
<RowDefinition Height="248*"/>
</Grid.RowDefinitions>
</Grid>
</phone:PanoramaItem>
<!--Panorama item two-->
<phone:PanoramaItem Header="item 2">
</phone:PanoramaItem>
</phone:Panorama>
</Grid>
【讨论】:
这正是我想要的。我很感激。谢谢,@anderZubi。以上是关于Windows Phone 8 全景布局的主要内容,如果未能解决你的问题,请参考以下文章
带有 AngularJS 的 Windows Phone 全景图