Question

我正在开发windows phone 8应用程序，我想在Horizontal中的网格视图上显示图像。但它没有得到我想要的。

<phone:LongListSelector Name="DataSource"  ItemsSource="{Binding Source}" SelectionChanged="DataSource_SelectionChanged">
                <phone:LongListSelector.ItemTemplate>
                <DataTemplate>
                    <Grid x:Name="gridNews">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="80" />
                        </Grid.RowDefinitions>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="120"/>
                        </Grid.ColumnDefinitions>
                        <Image Grid.Row="0" Grid.Column="0" Source="{Binding icon}" Stretch="Fill" Height="70" Width="70"></Image>

                    </Grid>
                </DataTemplate>
            </phone:LongListSelector.ItemTemplate>
        </phone:LongListSelector>

这个结果：

image 1
image 2
image 3
image 4
....

但我想显示如下：

image 1 image 2 image 3

image 4.....

Answer 1

如果您使用的是网格，则可能需要将每个图像放在网格的新“单元格”或部分中。为此，您需要添加网格列，然后使用grid.column =“＃”

将图像放入各自的网格中。

示例：

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="100" />
        <ColumnDefinition Width="Auto" />
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="5*" />
    </Grid.ColumnDefinitions>
    <Image grid.column="0" />
    <Image grid.column="1" />
    <Image grid.column="2" />
</Grid>

我可能会建议使用堆栈面板。您可以使方向水平，然后堆叠面板中的所有元素将以水平方向显示。

示例：

<StackPanel Orientation="Horizontal" Height="100" Margin="0,0" VerticalAlignment="Top"     Width="100">
     <Image />
     <Image />
     <Image />
</StackPanel>

第二个想法是，Wrap面板可能更适合您的手机应用程序，因为它会水平显示图像，然后在第一行填满后开始换行。它的工作方式几乎与Stack Panel完全相同。

示例：

<WrapPanel Orientation="Horizontal" Height="100" Margin="0,0" VerticalAlignment="Top"     Width="100">
     <Image />
     <Image />
     <Image />
</WrapPanel>

我希望有所帮助！

Answer 2

您可以在WPToolKit中使用WrapPanel使数据水平显示。

.XAML：

xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"

<ListBox 
                     ScrollViewer.HorizontalScrollBarVisibility="Visible"
                     ScrollViewer.VerticalScrollBarVisibility="Disabled"
                     >
                <ListBox.ItemsPanel>
                    <ItemsPanelTemplate>
                        <toolkit:WrapPanel Orientation="Vertical"/>
                    </ItemsPanelTemplate>
                </ListBox.ItemsPanel>
                <ListBox.ItemTemplate>
                    <DataTemplate>
                       //Binding data here
                       <Image Source={Binding img} />
                    </DataTemplate>
                </ListBox.ItemTemplate>
            </ListBox>

在我的应用程序中，我在listbox中使用wrapPanel，我不确定它在longListSelector中是否有效。

这是一个关于wrapPanel的一个很好的例子：http://www.geekchamp.com/articles/wp7-wrappanel-in-depth

希望它有所帮助。

如何动态地绑定数据

2 个答案: