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。 運行，就可以成功看到圖片顯示了。