时间戳

首页 > 解决方案 > 图片绑定wpf

c# - 图片绑定wpf

问题描述

我正在尝试生成一个元素，让我可以将一些图像显示到treeview使用 WPF 中。我认为我必须生成自己TreeViewItem的才能将我想要的属性绑定到TreeView控件中。这是我自己的TreeViewItem：

public class TreeViewItem : System.Windows.Controls.TreeViewItem
{
    public ImageSource Image { get; set; }

    public TreeViewItem(string text, ImageSource displayedImage)
    {
        this.Header = text;
        this.Image = displayedImage;
    }
}

生成此对象后，我定义了自定义 TreeView 的结构以绑定所有数据：

<UserControl x:Class="test.TreeControl"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
         mc:Ignorable="d" 
         d:DesignHeight="200" d:DesignWidth="100">

<Grid>
    <TreeView Name="TVTree" x:FieldModifier="public">            
        <TreeView.ItemTemplate>
            <HierarchicalDataTemplate ItemsSource="{Binding Children}">                    
                <Grid Margin="2" MinHeight="25" MaxHeight="25" MinWidth="60">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="16"/>
                        <ColumnDefinition Width="*"/>
                    </Grid.ColumnDefinitions>

                    <Image Grid.Column="0" Source="{Binding Image}" Height="16" Width="16"/>
                    <TextBlock Grid.Column="1" Text="{Binding Header}" Margin="5,0"/>
                </Grid>
            </HierarchicalDataTemplate>
        </TreeView.ItemTemplate>
    </TreeView>
</Grid>

据我所知，我正在尝试将图像源与自定义控件的图像源绑定，并将文本块的文本与我的treeviewItem. 问题是控件不显示图像，我发现标题也没有显示。它只显示ToString()方法的结果（与定义为对象的Header的字符串相同）。

有人知道如何正确绑定这些数据吗？提前致谢

标签： c#.netwpf

解决方案

当您使用数据模板时，您需要将您的数据定义为类型，例如TreeItem及其在模板中的外观，这里的 aHierarchicalDataTemplate代表TreeView. ATreeItem可能看起来像这样。

public class TreeItem
{
   public string Header { get; }

   public ImageSource Image { get; }

   public ObservableCollection<TreeItem> Children { get; }

   public TreeItem(string header, ImageSource displayedImage, ObservableCollection<TreeItem> children)
   {
      Header = header;
      Image = displayedImage;
      Children = children;
   }
}

您不继承自TreeViewItem，因为您定义了数据。ATreeViewItem是视图中的一个容器，它将您的数据模板包装为TreeView. 在 aTreeView中存在项目层次结构，因此您必须为任何项目提供子项目的集合。null如果没有其他项目，此集合可以是或为空。

然后，您需要一个用于用户控件的视图模型，它公开了TreeItems您可以绑定到的集合。我刚刚创建了一个包含三个嵌套项的虚拟数据列表Children以显示层次结构。

public class TreeControlViewModel
{
   public ObservableCollection<TreeItem> TreeItems { get; }

   public TreeControlViewModel()
   {
      TreeItems = new ObservableCollection<TreeItem>
      {
         new TreeItem("Item 1", null, null),
         new TreeItem("Item 2", null, null),
         new TreeItem("Item 3", null, null),
         new TreeItem("Item 4", null, new ObservableCollection<TreeItem>
         {
            new TreeItem("Item 41", null, null),
            new TreeItem("Item 42", null, new ObservableCollection<TreeItem>
            {
               new TreeItem("Item421", null, null)
            })
         }),
         new TreeItem("Item 5", null, null)
      };

   }
}

接下来，您必须创建 的实例TreeControlViewModel并将其分配给TreeControl用户控件，这样您就可以绑定到它的TreeItems属性，即TreeView.

<UserControl x:Class="test.TreeControl"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             mc:Ignorable="d" 
             d:DesignHeight="200"
             d:DesignWidth="100">
   <UserControl.DataContext>
      <local:TreeControlViewModel/>
   </UserControl.DataContext>

   <!-- ...your tree view XAML code. -->

</UserControl

最后，请务必通过 实际绑定到TreeItems集合ItemsSource，否则不会显示任何项目。

<TreeView Name="TVTree" ItemsSource="{Binding TreeItems}">

请注意，当您使用例如或修改项目集合时，ObservableCollection将通知并触发更新。如果您也对修改类似 的属性感兴趣，您应该看看它是如何实现的，以便在用户界面中为它们启用更新。为了简单起见并专注于您的问题，我将跳过这一部分。TreeViewAddRemoveHeaderINotifyPropertyChanged

推荐阅读