WPF自定义ItemsControl和Binding

Question

我创建了一个名为 Toolbox 的自定义 ItemsControl。我希望能够在该工具箱中显示图像 - 它是图表设计器的一部分。

我的 xaml 看起来像这样：

<d:Toolbox ItemsSource="{Binding}">
                            <ItemsControl.ItemTemplate>
                                <DataTemplate>

                                    <Image Source="{Binding Library}"/>

                                </DataTemplate>

                            </ItemsControl.ItemTemplate>
                        </d:Toolbox>

和我的 ViewModel：

 public ObservableCollection<ElectricalLibrary> l = null;
        public ObservableCollection<Image> _images = null;
        public ObservableCollection<Image> Library

        {
            get
            {
                if (l == null)
                {
                    DataAccessLayerClass dc = new DataAccessLayerClass();
                    dc.LoadComponents();
                    l = dc.Library;
                    foreach (ElectricalLibrary lib in l) { 
                        Image finalImage = new Image();
                        finalImage.Width = 80;
                        BitmapImage logo = new BitmapImage();
                        logo.BeginInit();
                        logo.UriSource = new Uri(lib.url.ToString());
                        logo.EndInit();

                        finalImage.Source = logo;
                        MessageBoxResult result = MessageBox.Show(logo.UriSource.ToString());  

                        _images.Add(finalImage);
                    }



                }
                return _images;
            }
            set { _images = value; }
        }

这是 Toolbox 本身的资源文件：

<Style TargetType="{x:Type s:Toolbox}">
        <Setter Property="SnapsToDevicePixels"
                Value="true" />
        <Setter Property="Focusable"
                Value="False" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate>
                    <Border BorderThickness="{TemplateBinding Border.BorderThickness}"
                            Padding="{TemplateBinding Control.Padding}"
                            BorderBrush="{TemplateBinding Border.BorderBrush}"
                            Background="{TemplateBinding Panel.Background}"
                            SnapsToDevicePixels="True">
                        <ScrollViewer VerticalScrollBarVisibility="Auto">
                            <ItemsPresenter SnapsToDevicePixels="{TemplateBinding UIElement.SnapsToDevicePixels}" />
                        </ScrollViewer>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
        <Setter Property="ItemsPanel">
            <Setter.Value>
                <ItemsPanelTemplate>
                    <WrapPanel Margin="0,5,0,5"
                               ItemHeight="{Binding Path=DefaultItemSize.Height, RelativeSource={RelativeSource AncestorType=s:Toolbox}}"
                               ItemWidth="{Binding Path=DefaultItemSize.Width, RelativeSource={RelativeSource AncestorType=s:Toolbox}}" />
                </ItemsPanelTemplate>
            </Setter.Value>
        </Setter>
    </Style>

我只将图像的 URL 存储在数据库中，图像存储在光盘上。我获取实体对象并创建一个图像，将其添加到图像的 ObservableCollection 中，并将 Image 控件绑定到 xaml 中的 LIbrary。

显然，该代码不起作用。但如何让它发挥作用呢？包含图像的列表已正确加载。

感谢您的帮助。

Answer 1

****编辑****
是的 - 经过一些更改后，我已经设法使代码正常工作。更改您的 Library 属性以从数据库对象中返回 Uri 集的列表 - 确保您确实返回了某些内容。我建议您的属性进行以下操作（如果您需要一个更强大的属性，并且每次 get 时都不会重新获取，请更改它...

public ObservableCollection<Uri> Library
{
    get
    {
        OberservableCollection<Uri> library = new OberservableCollection<Uri>();
        DataAccessLayerClass dc = new DataAccessLayerClass();
        dc.LoadComponents();

        foreach (ElectricalLibrary lib in dc.Library)
        {
            library.Add(new Uri(lib.url.ToString()));
        }

        return library;
    }

然后您的 XAML 可以如下所示：

                      <d:Toolbox ItemsSource="{Binding Library}">
                            <ItemsControl.ItemTemplate>
                                <DataTemplate>

                                    <Image Source="{Binding}"/>

                                </DataTemplate>

                            </ItemsControl.ItemTemplate>
                        </d:Toolbox>

这样做可以使我的工作正常。

原始文本由于历史原因而留下

您似乎将图像绑定到整个集合如果它只是您需要的单个图像列表，那么工具箱的 ItemsSource 应该是 Library 集合，其中图像作为 DataTemplate 的一部分。 （我现在无法测试这个，所以它可能不是 100% 准确的代码）

<d:Toolbox ItemsSource="{Binding Library}">
    <ItemsControl.ItemTemplate>
        <DataTemplate>
                <Image Source="{Binding}"/>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</d:Toolbox>

Answer 2

试试这个：

<d:Toolbox ItemsSource="{Binding Library}"> 
<Image Source="{Binding}"/>