如何动态水平绑定数据

本文关键字：水平 绑定 数据 动态 何动态 | 更新日期: 2023-09-27 17:59:05

我正在开发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.....

如何动态水平绑定数据

如果使用网格，则可能需要将每个图像放在网格的新"单元格"或部分中。要做到这一点，你需要添加网格列，然后使用网格将图像放在各自的网格中。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>

我希望这能有所帮助！

您可以使用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

希望能有所帮助。

相关文章：