首页 > 代码库 > Win10系列:C#应用控件基础13

Win10系列:C#应用控件基础13

Image控件

开发Windows应用商店应用时,除了在界面中显示文字信息以外,还可以加入图片来配合说明及增加美观度。使用Image控件能够实现显示图片的功能,开发者可以根据需求使图片按照不同的方式显示在界面中。

在XAML文件中,Image控件的用法如下所示:

<Image .../>

下面介绍一下Image控件的两个常用属性:

  • Source属性,获取或设置图片的地址源。
  • Stretch属性,表示图片的呈现状态,共有4种属性值,分别为None、Uniform、UniformToFill、Fill。None值表示图像不会拉伸以填充溢出部分的尺寸。Uniform值表示图像将被按比例拉伸以适应输出尺寸,即图像有一边满足规定的尺寸即可,图像的原始宽高比例将被保存下来,该值为Stretch属性的默认值。UniformToFill值表示图像将被按比例拉伸以完全填充输出区域,图像的原始宽高比例将被保存下来。Fill值表示图像将被按比例拉伸以适应输出尺寸。

接下来通过一个简单的示例来说明Image控件的使用方法

新建一个名为"ImageDemo"的Windows应用商店的空白应用程序项目,在项目中的Assets文件夹内放置一个图片文件win8Logo.png,打开MainPage.xaml文件,在Grid元素中添加如下代码。

<Image HorizontalAlignment="Left" Source="Assets/win8Logo.png" Width="240" Margin="551,339,0,282" Stretch="Fill"/>

<TextBlock HorizontalAlignment="Left" TextWrapping="Wrap" Text="Windows 8 Logo显示为:" FontSize="25" Margin="263,396,0,335"/>

在上面的代码中,添加了一个Image控件和一个TextBlock控件,设置Image控件的Source属性为所显示图片的路径地址,接着设置TextBlock控件的Text属性值为"Windows 8 Logo显示为:"。

运行程序,可以看到Windows 8的Logo,效果如图4-23所示。

技术分享

图4-23 使用Image控件显示Windows 8 Logo

Win10系列:C#应用控件基础13