绑定图像列表答案

【问题标题】：Binding A List of Images绑定图像列表
【发布时间】：2017-11-11 14:28:20
【问题描述】：

我试图将图像列表 (List) 绑定到 StackPanel，我尝试使用 Separator> 分隔这些图像，但遗憾的是它不起作用。任何人都知道为什么？（我在 wpf 上有点菜鸟..so sry）

我的代码：代码背后：

            List<Image> v2 = new List<Image>();
        for (int i = 0; i < 10; i++)
        {
            Image v2image = new Image();
            v2image.BeginInit();

            v2image.Source = new BitmapImage(new Uri("http://static.lolskill.net/img/champions/64/xayah.png"));
            v2image.Width = 40;
            v2image.Height = 40;
            v2.Add(v2image);
        }

        BlueTeam.ItemsSource = v2;

XAML：

<Window x:Class="FML.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:local="clr-namespace:FML"
    mc:Ignorable="d"
    Title="MainWindow" Height="525.885" Width="809.974">
<Grid>
    <ItemsControl Grid.Column="0" x:Name="BlueTeam">
        <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
                <StackPanel Orientation="Horizontal" >

                </StackPanel>
            </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>
        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <StackPanel Orientation="Vertical" >
                    <Image Source="{Binding v2image.Source}"></Image>
                    <Separator Opacity="0" Height="20" Width="20"/>
                </StackPanel>
            </DataTemplate>
        </ItemsControl.ItemTemplate>   
    </ItemsControl>
</Grid>

Ty 帮助我 :D 顺便说一句：图像也非常小。它们不是 40 宽度\高度

编辑：它应该是这样工作的：http://imgur.com/a/bZbLf（当我使用只有图像的类时它工作）

它是这样工作的：http://imgur.com/a/uptlo

【问题讨论】：

标签： c# wpf image list binding

【解决方案1】：

你不应该有一个List<Image>，而是一个List<ImageSource>：

var v2 = new List<ImageSource>();

for (int i = 0; i < 10; i++)
{
    v2.Add(new BitmapImage(
        new Uri("http://static.lolskill.net/img/champions/64/xayah.png")));
}

BlueTeam.ItemsSource = v2;

然后，您将在 ItemTemplate 中声明一个具有固定大小的 Image 控件，并将其直接绑定到集合元素，Source="{Binding}"：

<ItemsControl.ItemTemplate>
    <DataTemplate>
        <Image Source="{Binding}" Width="40" Height="40" Margin="10"/>
    </DataTemplate>
</ItemsControl.ItemTemplate>

不确定分隔符应该做什么。在上面的示例中，我只是设置了 Image 的 Margin 属性。

【讨论】：