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; }
        }

Ands这是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

**** **** EDIT 对 - 我已经设法让代码在一些更改后工作。更改您的Library属性以从数据库对象返回Uri的集合列表 - 确保您实际返回了一些内容。我为您的属性建议以下内容（如果您需要更强大的属性，并且每次获取都不会重新获取，请更改它...

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}"/>

WPF自定义ItemsControl和Binding

2 个答案: