Question

嗨我正在开发windows phone 8 app.i想要在网格视图格式上显示图像，我在网格中使用列表框但我的输出中没有得到任何更改。我的代码如下，我想显示数据在网格视图格式。

<Grid x:Name="ContentPanel" Margin="0,115,0,0" Background="#424340" Grid.RowSpan="5" />

    <StackPanel Margin="0,0,0,0.083" Grid.Row="2"  VerticalAlignment="Top" HorizontalAlignment="Center" Grid.RowSpan="2">
        <ListBox x:Name="List12" ItemsSource="{Binding}"  VerticalAlignment="Top" SelectionChanged="NotchsList12_SelectionChanged"
           Margin="0,0,0,0"  HorizontalAlignment="left" Width="Auto"  Grid.RowSpan="2">
            <ListBox.ItemsPanel>
                <ItemsPanelTemplate>
                    <StackPanel Orientation="Horizontal"  VerticalAlignment="Top">
                    </StackPanel>
                </ItemsPanelTemplate>
            </ListBox.ItemsPanel>
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <Grid HorizontalAlignment="Stretch">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="*" />
                        </Grid.RowDefinitions>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*" />
                            <ColumnDefinition Width="*" />
                        </Grid.ColumnDefinitions>

                        <TextBlock Text="{Binding Titles}" Foreground="Black" Width="189" Height="34" TextWrapping="Wrap" Padding="0,0,0,0"></TextBlock>

                        <Image Source="{Binding Images}"  Width="189" Height="195" Name="value"  Stretch="Fill" VerticalAlignment="Top" ></Image>
                        <TextBlock Text="Text1" Margin="0,0,10,0" HorizontalAlignment="Stretch" Grid.Column="0" Grid.Row="1" />

                    </Grid>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>
    </StackPanel>

</Grid>


XDocument xmlDoc = XDocument.Parse(dataInXmlFile);

            var query = from l in xmlDoc.Descendants("Category")
                        select new Class
                        {
                            Titles = l.Attribute("title").Value,
                            Images = l.Attribute("image").Value,

                       Articles = l.Element("SubCategory").Elements("Subcategory")
                                         .Select(article => new Subclass
                                         {
                                             name = article.Attribute("name").Value,

                                             Subimage = article.Attribute("subimage").Value,
                                             Product = article.Element("Product").Elements("product")
                                                            .Select(articles => new Product
                                                            {
                                                                Price = articles.Element("productprice").Value,
                                                                ProductName = articles.Attribute("name").Value,
                                                                ProductImage = articles.Element("productimage").Value,
                                                                Shortdescription = articles.Element("productshortdiscription").Value
                                                            }).ToList(),

                                         })
                                         .ToList(),



                        };

            foreach (var result in query)
            {
                Console.WriteLine(result.Titles);
                Console.WriteLine(result.Images);

            }

            List12.DataContext = query;

我下面给出了

1.Door 2.window 3.table 4.chair

我需要在图片下面给出图片

1.Door 2.window

3.table 4.chair

Answer 1

使stackPanel方向Vertical代替Horizontal

            <ListBox.ItemsPanel>
                <ItemsPanelTemplate>
                    <StackPanel Orientation="Vertical"  VerticalAlignment="Top">
                    </StackPanel>
                </ItemsPanelTemplate>
            </ListBox.ItemsPanel>

Answer 2

不要使用网格，而是使用LayoutMode = Grid

使用LongListSelector

示例：

<phone:LongListSelector ItemsSource="{Binding Categories}" LayoutMode="Grid" GridCellSize="200,200">
<phone:LongListSelector.ItemTemplate>
<DataTemplate>
<Border Background="#e67e22" Height="190" Width="190" Margin="6,0,0,0" Tap="Border_Tap" >
<TextBlock Text="{Binding Name}"></TextBlock>
</Border>
</DataTemplate>
</phone:LongListSelector.ItemTemplate>
</phone:LongListSelector>

如何在windows phone中绑定gridview格式的数据？

2 个答案: