Tags标签 网战地图
当前位置: 主页 > 网站建设 > silverlight教程 >

如何在 Silverlight 控件中显示图像?

2012-03-24 20:01 [silverlight教程] 来源于:我爱自学网
导读:在 Silverlight 中 , image 控件可以用来显示图像。用法和前面的相似。使用 Image 控件的语法如下 : Grid x : Name =Layout Width =250 Height =250 Background =GREEN Image x : Name =MyImage Source =/AppleTree.png Stretch =Uniform/ Image / Grid Im

在 Silverlight 中image 控件可以用来显示图像。用法和前面的相似。使用 Image 控 件的语法如下

<Grid x:Name="Layout" Width="250" Height="250" Background="GREEN" >

 

<Image x:Name="MyImage" Source="/AppleTree.png" Stretch="Uniform" ></Image>

 

</Grid>

Image.Source 属性

Source 属性用于指定图片的位置。

<Image x:Name="blue" Source="/images/DingosLogo.png" Stretch="None"/>

 

<Image x:Name="green" Source="images/DingosLogo.png" Stretch="None" />

运行结果如下图显示

 

 

以反斜杠开头的图片Source="/images/DingosLogo.png"需要放在 ClientBin

 

目录下的相应文件夹中如下图所示

 

不以反斜杠开头的图片Source="images/DingosLogo.png"应该放在

 

Silverlight 项目的目录下的相应文件夹里。

 

 

反斜杠开头的相对路径代表的相对位置是应用程序运行的根目录.xap 压缩包内若 在这其中寻找不到要引用的文件则相对路径的回退机制fallback mechanism 自 动在在.xap 所在的目录即为 ClientBin 目录中寻找加以引用。两个位置都没有才会 发生错误。不以"/"开头则代表的相对位置是引用该图片的 XAML 文件所在的目录

 

page.xaml 文件所在的目录。

 

Image.stretch 属性

 

Stretch 属性可能有以下值

 

1. None

 

这样不会改变 image 的大小。如果图像大小大于容器的大小图像在容器中会被裁减以适 应容器的大小。

 

2. Fill

 

在这种情况下图像会扩大以填充容器区域。在宽高比方面宽度和高度比将不能保持。

 

3. Uniform

 

这是默认值。在这种情况下图像将根据容器的大小调整但保持宽高比不变。因此可能 在容器和图片周围可能有空白。

 

4. UniformToFill

反斜杠开头的相对路径代表的相对位置是应用程序运行的根目录.xap 压缩包内若 在这其中寻找不到要引用的文件则相对路径的回退机制fallback mechanism 自 动在在.xap 所在的目录即为 ClientBin 目录中寻找加以引用。两个位置都没有才会 发生错误。不以"/"开头则代表的相对位置是引用该图片的 XAML 文件所在的目录

 

page.xaml 文件所在的目录。

 

Image.stretch 属性

 

Stretch 属性可能有以下值

 

1. None

 

这样不会改变 image 的大小。如果图像大小大于容器的大小图像在容器中会被裁减以适 应容器的大小。

 

2. Fill

 

在这种情况下图像会扩大以填充容器区域。在宽高比方面宽度和高度比将不能保持。

 

3. Uniform

 

这是默认值。在这种情况下图像将根据容器的大小调整但保持宽高比不变。因此可能 在容器和图片周围可能有空白。

 

4. UniformToFill

反斜杠开头的相对路径代表的相对位置是应用程序运行的根目录.xap 压缩包内若 在这其中寻找不到要引用的文件则相对路径的回退机制fallback mechanism 自 动在在.xap 所在的目录即为 ClientBin 目录中寻找加以引用。两个位置都没有才会 发生错误。不以"/"开头则代表的相对位置是引用该图片的 XAML 文件所在的目录

 

page.xaml 文件所在的目录。

 

Image.stretch 属性

 

Stretch 属性可能有以下值

 

1. None

 

这样不会改变 image 的大小。如果图像大小大于容器的大小图像在容器中会被裁减以适 应容器的大小。

 

2. Fill

 

在这种情况下图像会扩大以填充容器区域。在宽高比方面宽度和高度比将不能保持。

 

3. Uniform

 

这是默认值。在这种情况下图像将根据容器的大小调整但保持宽高比不变。因此可能 在容器和图片周围可能有空白。

 

4. UniformToFill

在这种情况下图像将改变大小并填充容器如果需要的话宽高比将做一些微调。

 

Width  Height 属性

 

图片的宽、高属性将覆盖 Stretch 属性。如果指定宽、高属性则 Stretch 属性被忽略。

 

 

Image.Clip 属性

 

Image 控件的 Clip 属性在 Silverlight 中被用来确定图片部分显示和其他部分隐藏。

 

看下面的例子如何以椭圆的形式显示图像

<Grid x:Name="Layout" Width="200" Height="220" Background="YELLOW" >

 

<Image x:Name="MyImage" Source="images/DingosLogo.png" Stretch="Fill">

 

<Image.Clip>

 

<EllipseGeometry x:Name="Ellipse" RadiusX="100" RadiusY="100"

 

Center="100,110"/>

 

</Image.Clip>

 

</Image>

 

</Grid>

上面代码运行后呈现图像如下

 

 

(编辑:人比竹竿瘦)

本文标签:
网友评论

栏目列表

推荐文章