在网格的一行中绑定更多元素

本文关键字：绑定 元素 一行 网格 | 更新日期: 2023-09-27 18:18:30

我想有5列并绑定元素列表。每个元素都有一个图片。我想显示一行5个元素的图片。

实际上这是我的代码

<ListBox ItemsSource="{Binding Buildings}" Width="350" Margin="0,5,0,10">
    <ListBox.ItemTemplate>
        <DataTemplate>
            <StackPanel Orientation="Horizontal" CanHorizontallyScroll="True">
                <!--<TextBlock Padding="5,0,5,0" Text="{Binding Name}" />-->
                <Image Source="{Binding Name,Converter={StaticResource CivToImage}}" Height="50px" Width="50px"/>
            </StackPanel>
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>

我也想给信息，如名称(建筑名称)和成本(建筑成本)与一个工具提示。

不幸的是，我只能显示一行中的一个元素…我尝试了一个网格的解决方案，但它只显示每行一个图像:

<DataGrid ItemsSource="{Binding Buildings}">
    <DataGrid.Columns>
        <DataGridTemplateColumn Header="Name" Width="SizeToCells" IsReadOnly="True">
            <DataGridTemplateColumn.CellTemplate>
                <DataTemplate>
                    <Image Source="{Binding Name,Converter={StaticResource CivToImage}}" Height="50px" Width="50px"/>
                </DataTemplate>
            </DataGridTemplateColumn.CellTemplate>
        </DataGridTemplateColumn>
    </DataGrid.Columns>
</DataGrid>

谢谢你的帮助。

在网格的一行中绑定更多元素

当你使用像:

<Grid>
    <Image Name ="Image1" Source="{Binding Name,Converter={StaticResource CivToImage}}"  Height="50px" Width="50px"/>
    <Image Name ="Image2" Source="{Binding Name,Converter={StaticResource CivToImage}}" Height="50px" Width="50px"/>
</Grid>

所有的项目将定位在0,0，所以你将只看到一个将在顶部。你可以将这些图像的位置设置为第一个为0,0第二个为50px,0.

但我认为最好的方法是加上:

<StackPanel Orientation="Horizontal">
    <Image Name ="Image1" Source="{Binding Name,Converter={StaticResource CivToImage}}" Height="50px" Width="50px"/>
    <Image Name ="Image2" Source="{Binding Name,Converter={StaticResource CivToImage}}" Height="50px" Width="50px"/>
 </StackPanel>

这将使您的所有项目彼此相邻。希望这是情况，因为我不是100%确定我理解了这个问题。

相关文章：