Панорамные макеты Windows Phone 8

Я новичок в разработке для Windows phone 8, и у меня возникают проблемы с панорамным видом.

Когда я создаю базовую «Портретную страницу Windows Phone», у меня не возникает проблем с созданием сеток и выравниванием элементов управления Toolbox между этими сетками. Однако на странице Panorama, когда я создаю сетки, эти сетки применяются к каждой странице панорамы, и поэтому я не могу использовать разные макеты для каждой страницы.

Как мне добиться разных макетов на моей странице с панорамой? Должен ли я вместо этого использовать 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>


panorama-control windows-phone-8
person Stephen Paul    schedule 13.05.2013    source источник
comment
Не могли бы вы скопировать и вставить код XAML из своего приложения? Это позволит мне увидеть, где ошибка. Скорее всего, вы вкладываете новую сетку не в то место.   -  person Anthony Russell    schedule 13.05.2013
comment
Я обновил по вашей просьбе. Спасибо за внимание.   -  person Stephen Paul    schedule 13.05.2013
comment
для дальнейшего использования. Пожалуйста, никогда не публикуйте вопрос в стеке без кода. Люди, как правило, становятся очень противными, когда вы делаете это. Вы всегда должны публиковать проблему, код и то, что вы пробовали. Я посмотрю на код и дам вам знать, если я что-нибудь придумаю.   -  person Anthony Russell    schedule 13.05.2013
comment
Извини за это. Спасибо за совет.   -  person Stephen Paul    schedule 13.05.2013
comment
Почему вы делите LayoutRoot на столбцы и строки, а не на каждый элемент панорамы? Каков ваш желаемый результат?   -  person anderZubi    schedule 13.05.2013
comment
Спасибо @anderZubi, я безуспешно пытался добавить сетки к отдельному элементу панорамы. Знаете, как бы я это сделал?   -  person Stephen Paul    schedule 13.05.2013
comment
В чем проблема? Каков желаемый результат?   -  person anderZubi    schedule 13.05.2013
comment
Если я попытаюсь добавить эти сетки в теги ‹phone:panorama item›: ‹Grid.RowDefinitions› ‹RowDefinition Height=180*/› ‹/Grid.RowDefinitions› ... он жалуется, что определения строк не распознаются или не доступны   -  person Stephen Paul    schedule 13.05.2013
comment
Вы должны определить строки и столбцы внутри элемента управления Grid. Смотрите ответ.   -  person anderZubi    schedule 13.05.2013

Ответы (1)


arrow_upward
1
arrow_downward

Вы должны определить свои строки и столбцы в элементе управления 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>
person anderZubi    schedule 13.05.2013
comment
Это именно то, что я искал. Я очень благодарен. Спасибо, @anderZubi. - person Stephen Paul; 13.05.2013