最近写代码的时候遇到过好几次引用某个路径下图片资源的情况,思索了一下,便将自己所知的在xaml里引用图片资源的方法写成了个小Demo,并完成了这篇博文。希望罗列出的这些方式能够对大家有所帮助。

Xaml中引用图片资源的方式主要有两种:1.引用自己工程路径下的图片(包括根目录下的xaml引用根目录或者子目录下的图片,或者子目录下xaml引用根目录下或者其他子目录的图片);2.引用其他dll工程下的图片文件(同样也包括根目录或者子目录下的图片)。下面就来看看所罗列的这些情况代码是如何完成的吧。

首先,我建了个工程叫ImageSourcePathTest,并且将四张图片资源加到工程里去了,其中,有两张图片在根目录下,两张图片在子目录下,具体如下图:

图1 创建工程并添加图片

其次,在ImageSourcePathTest的View文件夹下新建UserControl1.xaml文件,用于测试子目录下xaml引用根目录下图片的情况。

之后,我再新建一个工程ImagePathDll,工程的OutType设为ClassLibrary,此工程下面仅放置图片,其他文件都可以删除,输出路径改为跟之前的ImageSourcePathTest工程一致,这样就能引用到该dll的图片。此工程下放置图片位置如下图:

图2 创建Dll引用工程并添加图片

图3 ImagePathDll输出路径

如上步骤做完之后就可以写代码了,但是在写代码之前还有一个最重要的步骤,就是设置图片的Build为Resource(此步骤很关键,没有此步骤则图片没法看到)。

图4 图片的Buid设为Resource

除此之外还有第二关键的步骤,就是设置ImageSourcePathTest引用ImagePathDll。设置方式:Project——AddReference——Projects,添加ImagePathDll引用。

图5 设置工程引用ImagePathDll

最后就是写代码了,Window1.xaml里引用根目录下和子目录下图片的代码为:

 <Window x:Class="ImageSourcePathTest.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="ImageSourcePathTest" Width="" Height=""
xmlns:local="clr-namespace:ImageSourcePathTest">
<StackPanel>
<UniformGrid Rows="" Columns="">
<Image Source="IMG1.PNG"/><!-- 直接引用根目录下的图片 -->
<Image Source="Image/IMG2.PNG" /><!-- 引用子目录下的图片 -->
<Image Source="pack://application:,,,/IMG3.PNG" /><!-- Uri引用根目录下的图片 -->
<Image Source="View/IMG4.PNG" /><!-- 引用子目录下的图片 -->
<Image Source="/ImagePathDll;component/IMG5.PNG"/><!-- 引用dll根目录下的图片 -->
<Image Source="/ImagePathDll;component/Image/IMG6.PNG" /><!-- 引用dll子目录下的图片 -->
</UniformGrid>
<local:UserControl1 /><!--子目录下引用图片-->
</StackPanel>
</Window>

ImageSourcePathTest下子目录下UserControl1.xaml引用代码为:

<UserControl x:Class="ImageSourcePathTest.UserControl1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<StackPanel Orientation="Horizontal">
<Image Source="../Image/IMG2.PNG" ></Image>
<Image Source="../IMG3.PNG" ></Image>
<Image Source="IMG4.PNG" ></Image>
</StackPanel>
</UserControl>

代码其实很简单,其他的都不用详细解释了,只有uri引用方式需要详细说明一下。WPF引入了统一资源标
识Uri(Unified Resource Identifier)来标识和访问资源。其中较为常见的情况是用Uri加载图像。Uri表

达式的一般形式为:协议+授权+路径
协议:pack://
授权:有两种。一种用于访问编译时已经知道的文件,用application:///。一种用于访问编译时不

知道、运行时才知道的文件,用siteoforigin:///。在这里加图片时,我们选用前者,即

application:///,但是书写时候,我们一般用逗号代替斜杠,也就是改写作application:,,,。
路径:分为绝对路径和相对路径。这里我们选用相对路径,普适性更强。

最终运行结果如下图:

图6 运行结果

写到这里我的这个小Demo就写完了,很简单的代码,不知道对大家是否有帮助呢。PS,这是我第一篇博文

,以后会持续更新WPF一些使用心得与体会,希望能开个好头哦!

2016-08-07

Xaml引用图片路径的方式的更多相关文章

  1. 用户控件UserControl图片资源定位(一)---Xaml引用图片

    MEF编程实现巧妙灵活松耦合组件化编程,一些细节需要花费不小心思去处理: 其中组件中若包含用户控件,且需要访问图片资源,那么Xaml引用资源需要做以下设置 1. 用户控件(usercontrol)所在 ...

  2. webpack下css/js/html引用图片的正确方式

    在webpack的处理下,为了使引用的图片被打包编译(以把src的图片文件编译到dist中或者对src的文件进行base64编码),应使用如下引用方式: 1. 在html/ejs等中引用图片: 借助r ...

  3. Tymeleaf模板引擎背景图片路径书写方式

    <body style="background: url(../static/assets/img/bg-so-white.png);" th:style="'ba ...

  4. webpack4 前端框架基础配置实例-解决css分离图片路径问题

    1.安装nodejs 2. 需要全局和项目安装webpack和webpack-dev-server npm install webpack webpack-dev-server -g npm inst ...

  5. nodejs之获取客户端真实的ip地址+动态页面中引用静态路径下的文件及图片等内容

    1.nodejs获取客户端真实的IP地址: 在一般的管理网站中,尝尝会需要将用户的一些操作记录下来,并记住是哪个用户进行操作的,这时需要用户的ip地址,但是往往当这些应用部署在服务器上后,都使用了ng ...

  6. css和js引用图片的路径问题

    原文转自:http://www.cnblogs.com/azumia/archive/2012/06/17/2552346.html 在JS文件中书写相对路径:JS文件是指在页面中引用的外部JavaS ...

  7. Nginx部署静态页面及引用图片有效访问的两种方式

    nginx安装百度一下有很多,直接正题: 静态文件目录结构 file#文件位置 /home/service/file/ css js images html fonts 配置nginx.conf核心代 ...

  8. vue项目打包后资源相对引用路径的和背景图片路径问题

    vue项目中若要使用相对路径来获得相应静态资源,需要修改以下内容来确保项目打包后能正常运行. 1.修改config => index.js => build => assetsPub ...

  9. WPF调用图片路径,或资源图片

    一.加载本项目的图片WPF引入了统一资源标识Uri(Unified Resource Identifier)来标识和访问资源.其中较为常见的情况是用Uri加载图像.Uri表达式的一般形式为:协议+授权 ...

随机推荐

  1. git 合并冲突 取消合并

    如果有冲突,会出现MERING 使用git merge  --abort命令解决冲突

  2. java operate

    class OperateDemo { public static void main(String[] args) { /* + - * / %(取余数) */ int x = 2810; Syst ...

  3. C语言之标准头文件模板

    /*======================================================================================* * 版权 : xxx ...

  4. 【JDBC】java.sql.SQLException: The server time zone value 'Öйú±ê׼ʱ¼ä' is unrecognized or represents more than one time zone.

    在使用阿里的druid 时,报了一个异常java.sql.SQLException: The server time zone value 'Öйú±ê׼ʱ¼ä' is unrecognized ...

  5. 错误: 找不到或无法加载主类 hello.class

    今天复习Java,弄了一个helloworld,然后发现报错了,后来发现,原来执行的时候不能在后面添加.class

  6. k8s环境清理

    每一种方法 #!/bin/shdocker rm -f $(docker ps -qa)docker volume rm $(docker volume ls -q)cleanupdirs=" ...

  7. JMeter之自动重定向和跟随重定向的区别

    自动重定向:只针对Get和Head请求,自动重定向转向到最终目标页面,但是Jmeter不记录重定向的中间页面过程,只记录最终页面返回结果.在结果树中,只能看到最终页面的服务器返回. 跟随重定向:是ht ...

  8. web配置详细解释

    <?xml version="1.0"?> <!--注意: 除了手动编辑此文件以外,您还可以使用 Web 管理工具来配置应用程序的设置.可以使用 Visual S ...

  9. inline, block, and inline-block

    总体概念 block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素).block元素通 ...

  10. 微信小程序上拉下拉刷新

    小程序提供了,onPullDownRefresh和onReachBottom两个事件函数监听下拉和上拉事件函数.提示加载中,取消加载中 效果: js文件 // pages/enterprise/ent ...