Image.Source在使用字符串格式化绑定时不显示图像

Question

I'm currently using the following code to build a ComboBox control with flag images and canadian province names. However the images are not showing up in the control. I have tested the binding and it generated the location properly, but the image just doesn't come up in the control.

Not sure what is wrong here any help would be appreciated

Code:

<ComboBox x:Name="cb_Provinces" Text="Province"SelectionChanged="ComboBox_SelectionChanged"  SelectedValuePath="ProvinceCode" ItemsSource="{Binding Provinces, RelativeSource={RelativeSource AncestorType={x:Type UserControl}}}">
    <ComboBox.ItemTemplate>
        <DataTemplate >
            <StackPanel>
                <StackPanel x:Name="stk_ComboTemplate" Orientation="Horizontal" HorizontalAlignment="Left">
                    <Image Width="25" Margin="10" Source="{Binding ProvinceCode, StringFormat=/CanadaTreeSvc.Interface;component/Resources/img/flags/\{0\}.gif}" />

                    <TextBlock Text="{Binding ProvinceName}"/>

                </StackPanel>
                <TextBlock FontSize="10" Foreground="Gray" Text="{Binding ProvinceCode, StringFormat=/CanadaTreeSvc.Interface;component/Resources/img/flags/\{0\}.gif}"/>

            </StackPanel>
        </DataTemplate>
    </ComboBox.ItemTemplate>

Resulting Output:

Answer 1

StringFormat only works if the target is of type String . Because Image Source is of type Uri the StringFormat will never be used in the Binding

The best option would be to make a IValueConverter to format the string and return it to the Image Source property.

Example:

public class ProvinceNameToImageSourceConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        return string.Format("/CanadaTreeSvc.Interface;component/Resources/img/flags/\{0\}.gif", value);
    }

    public object ConvertBack(object value, Type targetTypes, object parameter, System.Globalization.CultureInfo culture)
    {
        return null;
    }
}

Usage:

<Window.Resources>
    <local:ProvinceNameToImageSourceConverter x:Key="ImageConverter" />
</Window.Resources>

..................

   <Image Source="{Binding ProvinceCode, Converter={StaticResource ImageConverter}}" />