2015-07-03 26 views
5

我在Windows Phone 8.1應用程序中顯示兩列gridview時遇到問題。Windows Phone 8.1兩列Gridview在Pivot中

這是我想要的結果:
enter image description here

審查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對象,顯示如下: Produced Layout

此佈局還不滾動

經過大量研究網絡,我相信我很困難。我認爲WrapGridMaximumRowsOrColumns設置應該是我在此之後的設置,並且它們的設置應該(至少根據其他設置)產生我預期的結果。

我的綁定代碼:

//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; 

爲什麼我沒有看到這個結果?

+0

刪除WIDTH = 「378」,也將努力 – jackjop

+0

刪除它似乎沒有太大變化。 UI看起來完全一樣,仍然不滾動。 – JcKelley

+0

好吧我會嘗試一些事情,如果有什麼作品讓你知道 – jackjop

回答

1

我所做的:

  • 當你想在你的WrapGrid be placed horizontally first項目,使用Orientation=Horizontal
  • 我已經改變了項目的網格寬度爲180,當它是190接着物品被垂直放置,因爲我的屏幕上的寬度太小,
  • 我已經改變了MaximumRowsOrColumns 2,只要你想兩個項目水平,
  • 我已經刪除了的ScrollViewer信息 - 它自動應用GridView
  • 我刪除了Canvas,所以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> 

而結果:

Items

+0

此答案不會水平渲染項目。相反,它首先垂直渲染它們(這樣當6個元素被渲染時只有1,2,4,5個顯示,你必須滾動才能看到3,6)。看看我在上述問題中的視覺信息,瞭解我所需要的更多信息。 – JcKelley

+0

@JcKelley我已經重建了答案litte - GridView的ScrollViewer現在被使用,並且項目水平放置。您必須使用項目的網格寬度和邊距稍微調整以正確定位元素。 – Romasz