在Pivot中的Windows Phone 8.1双列Gridview

Question

我在Windows Phone 8.1应用程序中显示两列gridview时遇到问题。

这是我的预期结果：

在审核了处理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个对象的list元素时，会显示以下内容：

此布局不会滚动。

在对网络进行大量研究后，我相信自己很困难。我认为WrapGrid和MaximumRowsOrColumns设置应该是我在此之后所做的设置，并且它们的设置应该（至少根据其他设置）产生我的预期结果。

我的绑定代码：

//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 自动应用。
• 我已删除 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>

结果：