c# gridview windows-phone-8.1 windows-phone

c# - Vista de cuadrícula de dos columnas de Windows Phone 8.1 dentro de Pivot

gridview windows-phone-8.1 (1)

Tengo problemas para mostrar una vista en cuadrícula de dos columnas en una aplicación Windows Phone 8.1.

Este es mi resultado previsto:

Después de revisar otras preguntas de SO que tratan problemas similares , produje el siguiente código:

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

Sin embargo, este código cuando se vincula a un elemento de lista con 8 objetos, muestra lo siguiente:

Este diseño tampoco se desplaza .

Después de investigar mucho sobre la web, creo que estoy bastante atrapado. Creo que las configuraciones WrapGrid y MaximumRowsOrColumns deberían ser lo que realmente busco aquí, y su configuración debería (al menos según los demás) producir mi resultado previsto.

Mi código de enlace:

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

¿Por qué no estoy viendo ese resultado?

Qué he hecho:

cuando desee que sus artículos en WrapGrid se coloquen horizontalmente primero , use Orientation=Horizontal ,
Cambié el ancho de la cuadrícula del elemento a 180, cuando era 190, los elementos se colocaron verticalmente, ya que en la pantalla el ancho era demasiado pequeño,
Cambié MaximumRowsOrColumns a 2 porque quieres dos elementos horizontalmente,
Eliminé la información de ScrollViewer , se está aplicando automáticamente por GridView .
He eliminado Canvas , por lo que GridView sabe cuánto espacio tiene.

El código se ve así:

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

Y el resultado: