WPF Image Binding Uri Source 失败解决办法

在ListView 的ListItem里动态绑定Image. 首先代码写的是没有问题的。但最后运行却无法显示图片。先看代码：

1. XAML部分 代码如下：

<ListView x:Name="m_DestinationListView" HorizontalAlignment="Left"   ItemsSource="{Binding}" Width="785" Height="230"  VerticalAlignment="Top">
    <ListView.ItemTemplate>
        <DataTemplate>
            <Grid Width="785" Height="120">
                <Border BorderBrush="Black" BorderThickness="0 1 0 0"></Border>
                <Grid Width="785" Visibility="{Binding Path=IsItem}">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="80"></ColumnDefinition>
                        <ColumnDefinition Width="40*"></ColumnDefinition>
                        <ColumnDefinition Width="55*"></ColumnDefinition>
                    </Grid.ColumnDefinitions>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="30*"></RowDefinition>
                        <RowDefinition Height="35*"></RowDefinition>
                        <RowDefinition Height="35*"></RowDefinition>
                    </Grid.RowDefinitions>

                    <Image Source="{Binding DestIcon}" Width="50" Height="50" Stretch="Fill"/>
                    <TextBlock Text="{Binding DestName}" Grid.Row="0" Grid.Column="1" Style="{StaticResource BoldTextStyle}" FontSize="18"></TextBlock>
                    <TextBlock Text="{Binding Path=ApptBeginTime}" Grid.Row="0" Grid.Column="2" Style="{StaticResource BoldTextStyle}" FontSize="18"></TextBlock>
                    <TextBlock Text="{Binding Path=Address}" Grid.Row="1" Grid.Column="1"></TextBlock>
                    <TextBlock Text="{Binding Path=SecondAddressLine}" Grid.Row="2" Grid.Column="1"></TextBlock>
                </Grid>
            </Grid>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

 

 2. C#代码如下：

A. ListViewItem 结点的定义：

namespace TripManagerWpfUI
{
    public class TripPlanMockGoose : DependencyObject
    {
        public TripPlanMockGoose()
        {
        }

        public string DestName
        {
            get { return (string)GetValue(DestNameProperty); }
            set { SetValue(DestNameProperty, value); }
        }
        // Using a DependencyProperty as the backing store for Name.  This enables animation, styling, binding, etc...
        public static readonly DependencyProperty DestNameProperty =
            DependencyProperty.Register("DestName", typeof(string), typeof(TripPlanMockGoose), new PropertyMetadata(""));

        public string ApptBeginTime
        {
            get { return (string)GetValue(ApptBeginTimeProperty); }
            set { SetValue(ApptBeginTimeProperty, value); }
        }
        // Using a DependencyProperty as the backing store for Name.  This enables animation, styling, binding, etc...
        public static readonly DependencyProperty ApptBeginTimeProperty =
            DependencyProperty.Register("ApptBeginTime", typeof(string), typeof(TripPlanMockGoose), new PropertyMetadata(""));

        public string SecondAddressLine
        {
            get { return (string)GetValue(SecondAddressLineProperty); }
            set { SetValue(SecondAddressLineProperty, value); }
        }
        // Using a DependencyProperty as the backing store for Name.  This enables animation, styling, binding, etc...
        public static readonly DependencyProperty SecondAddressLineProperty =
            DependencyProperty.Register("SecondAddressLine", typeof(string), typeof(TripPlanMockGoose), new PropertyMetadata(""));

        public string Address
        {
            get { return (string)GetValue(AddressProperty); }
            set { SetValue(AddressProperty, value); }
        }
        // Using a DependencyProperty as the backing store for Name.  This enables animation, styling, binding, etc...
        public static readonly DependencyProperty AddressProperty =
            DependencyProperty.Register("Address", typeof(string), typeof(TripPlanMockGoose), new PropertyMetadata(""));

        //此处为图片的及其依赖属性的定义：
        /// <summary>
        /// Gets or sets the icon of the item.
        /// </summary>
        public BitmapImage DestIcon
        {
            get { return (BitmapImage)GetValue(DestIconProperty); }
            set { SetValue(DestIconProperty, value); }
        }
        // Using a DependencyProperty as the backing store for Name.  This enables animation, styling, binding, etc...
        public static readonly DependencyProperty DestIconProperty =
            DependencyProperty.Register("DestIcon", typeof(BitmapImage), typeof(TripPlanMockGoose), null);
    }
}

 

 

B: 结点的绑定：

private void UpdateListView()
{
    TripPlan tp;
    tp = TripManagerApp.Root.ActiveTripPlan;
    m_ListView = new List<TripPlanMockGoose>();
    
    foreach (Destination d in tp.GetDestinationList())
    {
        TripPlanMockGoose node = new TripPlanMockGoose();

        node.DestName = d.destName;
        node.ApptBeginTime = d.apptBeginTime.ToString();
        node.Address = d.address;
        node.SecondAddressLine = d.SecondAddressLine;//图片绑定
        node.DestIcon = GetItemIcon(d);

        m_ListView.Add(node);
    }

    //设置ListView的ItemSource
    m_DestinationListView.ItemsSource = m_ListView;
}


private BitmapImage GetItemIcon(Destination dest)
{
    BitmapImage icon = new BitmapImage();
    icon.BeginInit();
    switch (dest.destinationType)
    {
        case Destination.validDestinationTypes.origin:
            icon.UriSource = new Uri(
            //注意此两种Uri的表达方式都可以
                "pack://application:,,,/TripManagerWpfUI;component/Resources/driverworkflow_icon_origin.png",
                UriKind.RelativeOrAbsolute);
            break;

        case Destination.validDestinationTypes.dropoffRelay:
            icon.UriSource = new Uri(
                "/TripManagerWpfUI;component/Resources/driverworkflow_icon_dropOffRelay.png",
                UriKind.RelativeOrAbsolute);
            break;

        case Destination.validDestinationTypes.terminalStart:
        default:
            icon.UriSource = new Uri(
                 "/TripManagerWpfUI;component/Resources/driverworkflow_icon_origin.png",
                 UriKind.Relative);
            break;

    }
    icon.EndInit();
    return icon;
}

 

 

问题：代码和路径都是没有错的，但最后运行图片却显示不出来。经过仔细排查，问题出在 图片资源文件的Build Action 类型。

在右键单击图片Properties. 看Build Action的类型, 会发现是Content. 这时把其改为Resource, 再rebuild。 运行，就可以成功看到图片显示了。