将 XAML DataTemplate 中的图像源绑定到 Silverlight 4 中的 URI答案

【问题标题】：Binding Image's Source in XAML DataTemplate to a URI in Silverlight 4将 XAML DataTemplate 中的图像源绑定到 Silverlight 4 中的 URI
【发布时间】：2011-10-06 06:22:39
【问题描述】：

好的，我正在尝试创建一个图像列表（使用列表框），左侧是缩略图，右侧是图像标题。我的 XAML 是这样设置的：

<ListBox HorizontalAlignment="Left" Margin="6,6,0,6" Name="CurrentPhotos" Width="184" SelectionChanged="CurrentPhotos_SelectionChanged">
    <ListBox.ItemTemplate>
        <DataTemplate>
            <StackPanel Orientation="Horizontal">
                <Image Source="{Binding Converter={StaticResource FilePathConverter}}" />
                <sdk:Label Content="{Binding Title}"></sdk:Label>
            </StackPanel>
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>

我已经在 App.xaml 中定义了 FilePathConverter 键并且设置了代码：

public class FilePathConverter : IValueConverter
{

    public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        if (targetType == typeof(string))
        {
            return (value as PhotoSummary).FullThumbPath();
        }
        else
        {
            return (value as PhotoSummary).Thumb();
        }

    }

    public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}

Convert 和 ConvertBack 方法中都有断点。 ConvertBack 永远不会被触发（因此没有异常等），并且在 Convert 方法中，Thumb 正确返回（由于某些测试原因留下了字符串输入，并且当前未使用。无论如何它都不会触发），而 Thumb 扩展方法是这样的：

public static object Thumb(this PhotoSummary ps)
{
    Uri uri = new Uri("http://" + Settings.Host + "/Content/Thumbs/" + ps.Uploaded.Year + "/" + ps.Uploaded.Month + "/" + ps.ID + ".jpg", UriKind.Absolute);
    return new BitmapImage(uri);
}

这个被调用了，并且 Uri 被正确构建（经过多次测试）。但是，当我运行该应用程序时，列表仅包含照片的标题，并且没有图像。所有图像都很小（它们只是拇指），本地文件，因此它们需要立即加载，因此也不是加载问题。但好像那里没有图像标签。它只显示照片的标签。转换器正在工作，Uri 正确，完全没有错误，但没有显示图像。

有什么建议吗？

【问题讨论】：

您是否尝试过使用 fiddler 来验证 silverlight 是否真的在请求图像以及图像是否真的被返回？
试过了，不，没有请求。我可以看到来自同一个应用程序（服务调用）的其他请求，它们可以工作，我可以在 Fiddler 中看到它们，但没有图像请求。很奇怪。
奇怪，也许可以尝试订阅 Image 上的 ImageFailed 事件，看看是否存在解析阻止下载开始的 Uri 的问题。
另一个想法，检查图像 ActualWidth/ActualHeight 并确保它们不为零，也许尝试将 Width/Height 设置为一个值以查看图像是否没有下载，因为它没有空间在堆栈面板中显示图像。
我会使用 Silverlight Spy 来查看可视化树中发生的情况，并确保 ImageSource 在图像上得到正确设置。根据 MerickOWA 的评论，还要检查图像的尺寸。

标签： c# .net silverlight xaml binding

【解决方案1】：

您可能必须在转换器中显式加载图像。 MSDN page for BitmapImage 显示以下代码 sn-p:

// Create the image element.
Image simpleImage = new Image();    
simpleImage.Width = 200;
simpleImage.Margin = new Thickness(5);

// Create source.
BitmapImage bi = new BitmapImage();
// BitmapImage.UriSource must be in a BeginInit/EndInit block.
bi.BeginInit();
bi.UriSource = new Uri(@"/sampleImages/cherries_larger.jpg",UriKind.RelativeOrAbsolute);
bi.EndInit();
// Set the image source.


simpleImage.Source = bi;

【讨论】：

这可能有效（尽管此代码示例适用于 WPF 而不是 SL，因为 SL 中没有 Begin/End init），但我试图以“声明性方式”在纯 XAML 中实现它（至少，尽可能使用 XAML）

【解决方案2】：

好的，问题在于 SL 中的安全限制。它在本地运行，并且由于安全限制（至少对于图像），调用 http://localhost... 失败。我已经读过，如果我制作了一个测试页面，从本地服务器等启动然后运行它，错误就会消失，但是我没有使用这种解决方法，而是检查了需要提升的信任，它突然开始工作了。这样问题就解决了。

【讨论】：

也许另一个解决方案是尽可能使用相对 URL 而不是绝对 URL？
好吧，我不认为这会产生差异。最后，要调用的 url 无论如何都是相同的 URL。我也有clientaccesspolicy.xml，但这也不起作用，所以还有别的东西。由于其他一些原因，绝对 uri 比相对更适合我的项目。

【解决方案3】：

我使用它来解决完全相同的问题，但我使用 Silverlight 5 并获得高度信任，不知道这很重要

<DataTemplate x:Key="DataTemplate1">
        <Grid>
            <Image Margin="0" Width="25" Height="25" Source="{Binding EventType, StringFormat=/Icons/EventType\{0:d\}.png}"/>
        </Grid>
    </DataTemplate>

而且效果很好。它的 DataGrid 数据模板，其中这个 EventType 是类型的枚举。

这是提琴手稍后展示的内容

http://www.localdomain.loc/ClientBin/Icons/EventType1.png

【讨论】：