装订影像清单 [英] Binding A List of Images
问题描述
我试图将图像列表(List)绑定到StackPanel,我试图使用<
I was trying to bind a list of images (List) to a StackPanel, I tried to separate those Images by using <Separator
> but sadly it's not working. Anyone has a clue why? (i'm kinda rookie on wpf..so sry)
我的代码: 后面的代码:
My Code: Code Behind:
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>
请帮我:D 顺便说一句:图像也很小.他们不是40宽度\高度
Ty for helping me :D btw: The Images are very small aswell. they're not 40 Width\Height
它应该是这样工作的: http://imgur.com/a/bZbLf (有效当我正在使用仅具有图像的课程时
edit: This is how it supposed to work: http://imgur.com/a/bZbLf (It works when I'm using a class who has only Image)
这是它的工作方式: http://imgur.com/a/uptlo >
this is how it works: http://imgur.com/a/uptlo
推荐答案
您不应使用List<Image>
,而应使用List<ImageSource>
:
You should not have a List<Image>
, but a List<ImageSource>
instead:
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}"
将其直接绑定到collection元素:
You would then declare an Image control with a fixed size in the ItemTemplate and bind it directly to the collection element, by Source="{Binding}"
:
<ItemsControl.ItemTemplate>
<DataTemplate>
<Image Source="{Binding}" Width="40" Height="40" Margin="10"/>
</DataTemplate>
</ItemsControl.ItemTemplate>
不确定分隔符应该做什么.在上面的示例中,我仅设置了Image的Margin
属性.
Not sure what the Separator was supposed to do. In the example above, I've simply set the Image's Margin
property.
这篇关于装订影像清单的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!