如何动态绑定数据水平

Question

我正在开发Windows Phone 8应用程序，我想在Horizo​​ntal中的网格视图上显示图像。

<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面板可能更适合您的电话应用程序，因为它将水平显示图像，然后在第一行填满后开始新的一行。 它的工作原理几乎与堆栈面板一样。

例：

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

在我的应用程序中，我在列表框中使用wrapPanel，但不确定在longListSelector中是否可以使用。

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

希望能帮助到你。