入门5-Silverlight中如何进行图片处理

最新推荐文章于 2017-08-07 16:21:19 发布

原创最新推荐文章于 2017-08-07 16:21:19 发布 · 3k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#silverlight #image #microsoft #文档 #图形 #照片

本文详细介绍了在Silverlight中使用Image和ImageBrush元素显示图片的方法。包括如何设置图片的宽度、高度、拉伸模式等属性，并展示了如何将图片应用于各种形状。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

下面介绍一下Image和ImageBrush元素对象：
在Silverlight中通过使用Image对象和ImageBrush图片笔刷两种方式来显示图片，图片的格式目前只支持PNG和JPG两种，所以其他格式的图片格式，例如gif,bmp需要先转换成PNG或JPG，方可在在Silverlight中使用。

先介绍Image，Image用法如下：
<Image Source="要显示的图片的名称" Width="图片宽度" Height="图片高度" Stretch="拉伸模式" />
Width,Height类型为System.Double, Stretch有None,Fill,Uniform,UniformToFill四种模式,看以下示例代码：
代码1：
========================================
<Canvas Width="300" Height="300" Background="Pink"
    xmlns="http://schemas.microsoft.com/client/2007"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Image Source="MyPic.jpg" Width="300" Height="300" Stretch="Uniform" />
</Canvas>
========================================
将代码1粘贴到入门1中的myxaml.xaml中并保存，后双击入门1中的SampleHTMLPage.html，就可看到你设置的图片。
这里需要注意的是：
1 Source="MyPic.jpg"中的MyPic.jpg就是你要设置显示的图片，一定把它与入门1中的4个文件放在同一个文件夹下；如果不放在同一个文件夹

下，你要在Source属性中为MyPic.jpg设置相应的路径；
2 将Stretch="Uniform"从<Image Source="MyPic.jpg" Width="300" Height="300" Stretch="Uniform" />去掉，图片显示没有任何变化，说

明Stretch的默认值是"Uniform"（章立民老师书中《Silverlight范例导学》中的41页写到Stretch的默认值是Fill，有书的朋友，请大家仔细阅读，我今天特意查了一下Silverlight.chm这个文档，也就是Microsoft Silverlight 1.0 SDK自带的帮助文档，里面确实写到Stretch的默认值是"Uniform"）；
3 当我们使用另外三个Stretch模式时，再运行这个示例，就会看到，图片显示的都有所不同；
4 如果不设置Image对象的Width和Height属性值的话，图片将按原大小显示（如果图片过大，你只能看到图片的一部分）
5 根据Microsoft Silverlight 1.0 SDK自带的帮助文档中的这句话：
=========================
If the Source property is set to an invalid format, or is specified to a URI that cannot be resolved, then the ImageFailed event is raised.
=========================
就是说如果要引用的图片格式是非PNG和PG格式时，应会报个ImageFailed事件的错。根据这个结论，我做了以下尝试，把一个JPG的图片，直接修改其扩展名为gif格式，然后，再运行，观察到，这个gif格式的图片依然可以正常显示；但若是用画图板打开这个JPG图片，然后保存为gif格式图片，这个时候，就会报错

这里我设置了Background="Pink"，也就是粉色背景，所以请大家选用一张美女照片，效果更佳：）
请朋友们设置不同的各属性值去运行一下，比如去掉了Image对象中的Width="300"，会出现什么情况？

接着介绍一下ImageBrush元素对象：
ImageBrush是图片笔刷，本身不显示任何图片，无法独立使用，只是辅助把图片刷到Text文字,Shape图形和Geometry几何图形之上。
基本用法：
<对象.Fill>
<ImageBrush ImageSource="引用图片文件" Stretch="拉伸模式" AlignmentX="X轴水平对齐" AlignmentY="Y轴水平对齐" />
<对象.Fill>

主要属性说明：
Stretch有None,Fill,Uniform,UniformToFill四种模式，默认值为None；
AlignmentX有三个值，Left,Center,Right
AlignmentY有三个值，Top,Center,Bottom

接着看个示例，代码2：
=========================
<Canvas xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Width="300" Height="300" Background="Pink" >
<Canvas>

<Ellipse Width="200" Height="200" Canvas.Left="10" Canvas.Top="10" Stroke="Pink" StrokeThickness="1">
      <Ellipse.Fill>
          <ImageBrush ImageSource="MyPic.jpg" Stretch="Fill"/>
      </Ellipse.Fill>
        </Ellipse>

    </Canvas>
</Canvas>
=========================
看到了吧，美女图片被装进了一个圆里。试试其他的Stretch模式，看看显示后的区别。

再看代码3：
=========================
<Canvas xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Width="300" Height="300" Background="Pink" >
<Canvas>

     <Polygon.RenderTransform>
         <ScaleTransform ScaleX="2" ScaleY="2"/>
     </Polygon.RenderTransform>
</Polygon>

    </Canvas>
</Canvas>
=========================
这次美女的图片被装进了一个正五边形中，试试其他的Stretch模式，看看显示后的区别。

修改代码3成代码4：
=========================
<Canvas xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Width="300" Height="300" Background="Pink" >
<Canvas>

     <Polygon.RenderTransform>
         <ScaleTransform ScaleX="2" ScaleY="2"/>
     </Polygon.RenderTransform>
</Polygon>

    </Canvas>
</Canvas>
=========================
添加了AlignmentX="Right"和AlignmentY="Top"两个属性值，把Stretch="Fill"改为Stretch="Uniform"，看看有什么变化吗？如果去掉AlignmentX="Right"和AlignmentY="Top"两个属性值，看看有什么变化吗？

结论就是AlignmentX和AlignmentY属性上对图片的显示位置有影响。
                　
                                                                                                                    　　   锐意进取　大胆创新
                                                                                                                             　　蒙哥马利朱