为什么我的外部图像无法加载到我的 Silverlight 页面中？

Question

为了使这一过程尽可能简单，我创建了一个新的默认 Silverlight 4 应用程序，并向测试网站添加了一个图像文件夹，该文件夹是在生成应用程序时自动创建的。我将同一张图像（我们将其命名为“imageName.png”）放在 ClientBin 文件夹和 Images 文件夹中。现在，当我像这样使用 XAML 在 ClientBin 中使用图像时，一切正常：

<Grid x:Name="LayoutRoot" Background="White">
    <StackPanel>
        <Image Source="imageName.png" Width="16" Height="16"/>
        <TextBox Text="Hello" />
    </StackPanel>
</Grid>

但是当我尝试访问 Images 文件夹中的图像时，图像不会加载，如下所示：

<Grid x:Name="LayoutRoot" Background="White">
    <StackPanel>
        <Image Source="../Images/imageName.png" Width="16" Height="16"/>
        <TextBox Text="Hello" />
    </StackPanel>
</Grid>

我没有收到任何错误，但图像只是不在那里。谁能告诉我发生了什么事吗？我所能找到的一切似乎都表明这应该有效。

Answer 1

这里的问题是，包含 Xap 的文件夹和 Xap 本身的顶部内容被认为位于路径的根目录。因此，路径“/”映射到 Xap 中的顶部内容以及 Xap 所在的文件夹（通常是 ClientBin）。任何尝试使用超越根路径的父路径都将导致 Silverlight 网络错误。

Xap 所在文件夹之外的任何内容只能使用绝对 Uri 进行访问。

然后需要做的是将包含父路径的相对地址转换为绝对地址，然后将其传递给 Image.Source 属性。我们最好避免将基址绝对地址硬编码到源代码中。

我们可以使用WebClient对象的BaseAddress属性来获取Xap当前获取的绝对Url。由此，我们可以通过将其与相对地址（甚至包含父路径的相对地址）组合来组成所需的绝对地址。

值转换器可以使 Xaml 中的此操作变得更容易：-

public class WebRelativeConverter : IValueConverter
{
    public Uri Base { get; set; }

    public WebRelativeConverter()
    {
        Base = new Uri((new WebClient()).BaseAddress, UriKind.Absolute);
    }

    public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        Uri result = null;

        if (value is Uri)
        {
            result = new Uri(Base, (Uri)value);
        }
        else if (value != null)
        {
            result = new Uri(Base, value.ToString());
        }
        return result;
    }

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

现在 Xaml 中的固定值将如下所示：-

<Grid x:Name="LayoutRoot" Background="White">
    <Grid.Resources>
         <local:WebRelativeConverter x:Key="wrc" />
    </Grid.Resources>
    <StackPanel>
        <Image DataContext="../Images/imageName.png" Source="{Binding Converter={StaticResource wrc}}" Width="16" Height="16"/>
        <TextBox Text="Hello" />
    </StackPanel>
</Grid>

现在，如果您实际上将源绑定到某个对象的 Uri 或 String 属性，则只需添加转换器，它应该工作。