Windows Phone 8.1 Two Column Gridview внутри Pivot

Question

У меня возникли проблемы с отображением сетки с двумя столбцами в приложении Windows Phone 8.1.

Это мой предполагаемый результат:

После рассмотрения other SO questions дело с similar issues, я произвел следующий код:

<Canvas> 

    <Grid Tapped="Grid_Tapped"> 
     <Grid.RowDefinitions> 
      <RowDefinition Height="93*"/> 
      <RowDefinition Height="35*"/> 
     </Grid.RowDefinitions> 


     <Pivot Name="centerPivot" Margin="0,109,0,0" Grid.Row="0" Grid.RowSpan="2" Canvas.ZIndex="2" Tapped="centerPivot_Tapped"> 
      <PivotItem Name="FindPivotItem" Margin="11,10,13,0.333"> 
       <PivotItem.Header> 
        <Grid> 
         <TextBlock Name="FindTitle" FontSize="31" Text="Store Finds" Foreground="#FF878787" FontFamily="Global User Interface" /> 
        </Grid> 
       </PivotItem.Header> 
       <!--<GridView 
        ScrollViewer.VerticalScrollBarVisibility="Visible" 

        ItemTemplate="{Binding ManyListingStyle}" 

        Grid.Row="1" 
        VerticalAlignment="Top" 
        VerticalContentAlignment="Top" Height="450" Margin="0,0,-0.167,0" 
      />--> 

       <GridView 

       Name="GridGridView" 

       ItemsSource="{Binding}" 
       Grid.Row="4" 
       IsSwipeEnabled="True" 
       SelectionMode="Single" 
       ScrollViewer.VerticalScrollBarVisibility="Visible" 
       ScrollViewer.VerticalScrollMode="Enabled" Margin="0,0,0,0.333" HorizontalAlignment="Left" 
       > 
        <GridView.ItemsPanel> 
         <ItemsPanelTemplate> 
          <WrapGrid Orientation="Vertical" 
            MaximumRowsOrColumns="3" 

            > 

          </WrapGrid> 
         </ItemsPanelTemplate> 
        </GridView.ItemsPanel> 
        <GridView.ItemTemplate> 
         <DataTemplate> 

          <Grid HorizontalAlignment="Left" Width="190" Height="240"> 
           <Rectangle Fill="#FFF4F4F5" HorizontalAlignment="Left" Height="193" Stroke="Black" VerticalAlignment="Top" Width="176" Margin="0,0,0,-8"/> 
           <Image HorizontalAlignment="Left" Height="128" Margin="13,8,0,0" VerticalAlignment="Top" Width="150" Source="Assets/example.jpg"/> 
           <TextBlock HorizontalAlignment="Left" Margin="13,141,0,0" TextWrapping="Wrap" Text="{Binding title}" VerticalAlignment="Top" Foreground="Black" FontSize="16" Width="150" FontFamily="Global User Interface"/> 
           <TextBlock HorizontalAlignment="Left" Margin="118,165,0,0" TextWrapping="Wrap" Text="{Binding price}" VerticalAlignment="Top" Foreground="#FFFF9700" FontSize="16" Width="48"/> 

          </Grid> 


         </DataTemplate> 
        </GridView.ItemTemplate> 
        <GridView.ItemContainerStyle> 
         <Style TargetType="FrameworkElement"> 

         </Style> 
        </GridView.ItemContainerStyle> 

        <!--<Grid Margin="214,10,10,421"> 
       <Rectangle Fill="#FFF4F4F5" HorizontalAlignment="Left" Height="209" Stroke="Black" VerticalAlignment="Top" Width="176"/> 
       <Image HorizontalAlignment="Left" Height="150" Margin="13,8,0,0" VerticalAlignment="Top" Width="150" Source="{Binding}"/> 
       <TextBlock HorizontalAlignment="Left" Margin="13,163,0,0" TextWrapping="Wrap" Text="{Binding GetListTitle}" VerticalAlignment="Top" Foreground="Black" FontSize="16" Width="150"/> 
       <TextBlock HorizontalAlignment="Left" Margin="115,187,0,0" TextWrapping="Wrap" Text="{Binding GetPrice}" VerticalAlignment="Top" Foreground="#FFFF9700" FontSize="16" Width="48"/> 

      </Grid>--> 
        <!--</GridView.ItemTemplate>--> 
       </GridView> 

      </PivotItem> 
     </Pivot> 
     <Rectangle x:Name="ScreenDimRectangle" Fill="#FF555453" HorizontalAlignment="Left" Height="640" Stroke="Black" VerticalAlignment="Top" Width="400" Opacity="0.5" 
       Grid.Row="0" Grid.RowSpan="2" Visibility="Collapsed" Canvas.ZIndex="9"/> 


    </Grid> 
</Canvas> 

Этот код, однако, когда привязан к элементу списка с 8 объектов, отображается следующее:

Этот макет также не прокручивает.

После тщательного изучения сети, я считаю, что я достаточно застрял. Я думаю, что настройки WrapGrid и MaximumRowsOrColumns должны быть такими, какие я действительно здесь, и их настройки должны (по крайней мере, согласно другим) привести к моему предполагаемому результату.

Мой Binding Код:

//Create new Fake Listings 
     var listings = new List<Listing>(); 

     var fakelisting1 = new Listing(); 
     fakelisting1.title = "Brand new Product!"; 
     fakelisting1.price = "9.99"; 
     listings.Add(fakelisting1); 

     var fakelisting2 = new Listing(); 
     fakelisting2.title = "Here is the new Product!"; 
     fakelisting2.price = "19.99"; 
     listings.Add(fakelisting2); 

     var fakelisting3 = new Listing(); 
     fakelisting3.title = "Here is the new 2Product!"; 
     fakelisting3.price = "29.99"; 
     listings.Add(fakelisting3); 

     var fakelisting4 = new Listing(); 
     fakelisting4.title = "Here is the new 3Product!"; 
     fakelisting4.price = "39.99"; 
     listings.Add(fakelisting4); 

     var fakelisting5 = new Listing(); 
     fakelisting5.title = "Here is the new 4Product!"; 
     fakelisting5.price = "49.99"; 
     listings.Add(fakelisting5); 

     var fakelisting6 = new Listing(); 
     fakelisting6.title = "Here is the new 5Product!"; 
     fakelisting6.price = "59.99"; 
     listings.Add(fakelisting6); 

     var fakelisting7 = new Listing(); 
     fakelisting7.title = "Here is the new 6Product!"; 
     fakelisting7.price = "49.99"; 
     listings.Add(fakelisting7); 

     var fakelisting8 = new Listing(); 
     fakelisting8.title = "Here is the new 7Product!"; 
     fakelisting8.price = "49.99"; 
     listings.Add(fakelisting8); 

     GridGridView.DataContext = listings; 

Почему я не вижу, что результат?

Answer 1

Что я сделал:

• , когда вы хотите, чтобы ваши пункты в WrapGrid be placed horizontally first, используйте Orientation=Horizontal,
• Я изменил ширину сетки элемента на 180, когда он был 190, то элементы были расположены вертикально , так как на моем экране ширина была слишком мала,
• Я изменил MaximumRowsOrColumns до 2, как вы хотите, два элемента по горизонтали,
• я удалил ScrollViewer информация - применяется автоматически GridView.
• Я удалил Холст, поэтому GridView знает, сколько места у него есть.

код выглядеть следующим образом:

<Grid Margin="0,150,0,0" Tapped="Grid_Tapped" > 
    <Grid.RowDefinitions> 
     <RowDefinition Height="93*"/> 
     <RowDefinition Height="35*"/> 
    </Grid.RowDefinitions> 

    <Pivot Name="centerPivot" Margin="0,0,0,0" Grid.Row="0" Grid.RowSpan="2" Canvas.ZIndex="2" Tapped="centerPivot_Tapped"> 
     <PivotItem Name="FindPivotItem" Margin="11,10,13,0.333"> 
      <PivotItem.Header> 
       <Grid> 
        <TextBlock Name="FindTitle" FontSize="31" Text="Store Finds" Foreground="#FF878787" FontFamily="Global User Interface" /> 
       </Grid> 
      </PivotItem.Header> 

      <GridView Name="GridGridView" ItemsSource="{Binding}" 
         SelectionMode="Single" Margin="0,0,0,0.333" HorizontalAlignment="Left"> 
       <GridView.ItemsPanel> 
        <ItemsPanelTemplate> 
         <WrapGrid Orientation="Horizontal" MaximumRowsOrColumns="2"/> 
        </ItemsPanelTemplate> 
       </GridView.ItemsPanel> 
       <GridView.ItemTemplate> 
        <DataTemplate> 
         <Grid HorizontalAlignment="Left" Width="180" Height="240"> 
          <Rectangle Fill="#FFF4F4F5" HorizontalAlignment="Left" Height="193" Stroke="Black" VerticalAlignment="Top" Width="176" Margin="0,0,0,-8"/> 
          <Image HorizontalAlignment="Left" Height="128" Margin="13,8,0,0" VerticalAlignment="Top" Width="150" Source="Assets/example.jpg"/> 
          <TextBlock HorizontalAlignment="Left" Margin="13,141,0,0" TextWrapping="Wrap" Text="{Binding title}" VerticalAlignment="Top" Foreground="Black" FontSize="16" Width="150" FontFamily="Global User Interface"/> 
          <TextBlock HorizontalAlignment="Left" Margin="118,165,0,0" TextWrapping="Wrap" Text="{Binding price}" VerticalAlignment="Top" Foreground="#FFFF9700" FontSize="16" Width="48"/> 
         </Grid> 
        </DataTemplate> 
       </GridView.ItemTemplate> 
      </GridView> 
     </PivotItem> 
    </Pivot> 
</Grid> 

И результат: