如何使用 XAML 将属性附加到对象

Question

我正在尝试格式化我的 ListBoxItem 模板以包含图像。我可以将图像添加到 ListBoxItem，但我不太确定如何设置该图像的值。

ListBoxItem 的模板：

        <Style TargetType="{x:Type ListBoxItem}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="ListBoxItem">
                    <Border Name="Border" Padding="2" SnapsToDevicePixels="true">
                        <StackPanel Orientation="Horizontal" >
                            <Image Source="{Binding Path=Source}" Height="16" Width="16" HorizontalAlignment="Center" VerticalAlignment="Center" />
                            <ContentPresenter Name="ContentPresenter" HorizontalAlignment="Stretch" Width="Auto" />
                        </StackPanel>
                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsSelected" Value="true">
                            <Setter TargetName="Border" Property="Background" Value="{StaticResource ListBoxItem_BackgroundBrush_Selected}"/>
                            <Setter TargetName="ContentPresenter" Property="TextElement.FontWeight" Value="Bold"/>
                        </Trigger>
                        <Trigger Property="IsEnabled" Value="false">
                            <Setter Property="Foreground" Value="{StaticResource TabItem_BackgroundBrush_Disabled}"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

示例列表框代码：

   <ListBox Name="listBox_LibAll" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
       <ListBoxItem Content="Item 1" />
       <ListBoxItem Content="Item 2" />
       <ListBoxItem Content="Item 3" />                                
   </ListBox>

输出：

如果你看图片你会注意到图片有一个地方，我只是不知道如何设置它的值。我在想我可以以某种方式将“源”属性附加到 ListBoxItem

Answer 1

您可以将RelativeSource 绑定到Tag 或一些attached property。

Source="{Binding Tag, RelativeSource={RelativeSource AncestorType=ListBoxItem}}"

<ListBoxItem Tag="SomePath" />

Source="{Binding (ns:AttachedProperties.Source), RelativeSource={RelativeSource AncestorType=ListBoxItem}}"

<ListBoxItem ns:AttachedProperties.Source="SomePath" />

您还可以使用here 所示的动态资源。

然而，最简洁的解决方案是使内容复杂化，即使 ListBoxItem 主机成为 UserControl 或自定义控件，例如实际上具有图像的 proper 属性。你通常也不应该覆盖ListBoxItems的控件模板，而是使用ListBox的ItemTemplate来data template数据。

Answer 2

你快到了。

Code:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace WpfApplication1
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }
    }

    public class ImageItem: DependencyObject
    {
        public static readonly DependencyProperty SourceProperty =
            DependencyProperty.RegisterAttached("Source",
            typeof(string),
            typeof(DependencyObject),
            new PropertyMetadata((o, e) => 
            {
                //System.Diagnostics.Debugger.Break();
            }));

        public static string GetSource(DependencyObject o)
        {
            return (string)o.GetValue(ImageItem.SourceProperty);
        }

        public static void SetSource(DependencyObject o, string e)
        {
            o.SetValue(ImageItem.SourceProperty, e);
        }
    }
}

标记：

<Window x:Class="WpfApplication1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:WpfApplication1"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <Grid.Resources>
            <Style TargetType="{x:Type ListBoxItem}">
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="ListBoxItem">
                            <Border Name="Border" Padding="2" SnapsToDevicePixels="true">
                                <StackPanel Orientation="Horizontal" >
                                    <Image Source="{Binding Path=Source, 
                                           RelativeSource={RelativeSource AncestorType=ListBoxItem}}" 
                                           Height="16" 
                                           Width="16" 
                                           HorizontalAlignment="Center" VerticalAlignment="Center" />
                                    <ContentPresenter Name="ContentPresenter" HorizontalAlignment="Stretch" Width="Auto" />
                                </StackPanel>
                            </Border>
                            <ControlTemplate.Triggers>
                                <Trigger Property="IsSelected" Value="true">
                                    <Setter TargetName="Border" Property="Background" Value="{StaticResource ListBoxItem_BackgroundBrush_Selected}"/>
                                    <Setter TargetName="ContentPresenter" Property="TextElement.FontWeight" Value="Bold"/>
                                </Trigger>
                                <Trigger Property="IsEnabled" Value="false">
                                    <Setter Property="Foreground" Value="{StaticResource TabItem_BackgroundBrush_Disabled}"/>
                                </Trigger>
                            </ControlTemplate.Triggers>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </Grid.Resources>
        <ListBox Name="listBox_LibAll" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
            <ListBoxItem local:ImageItem.Source="/WpfApplication1;component/Penguins.jpg" Content="Item 1" />
            <ListBoxItem Content="Item 2" />
            <ListBoxItem Content="Item 3" />
        </ListBox>
    </Grid>
</Window>