WPF/E CTP Quick Start - 第六部分：图像（翻译）

Image元素能使您在WPF/E中显示位图信息。

这篇文档包含了以下部分：

• Image元素
• Stretch属性
• 使用位图的其它方法
• 下面该做什么呢？

 

Image元素

Image元素为您提供了一个简单的方法在WPF/E中显示JPG和PNG格式的图像。为了显示一副图像，您需要将Image对象的Source属性设置为图像文件。下面的例子使用了一个Image元素来显示一幅141x131的位图图像。因为没有指定Image元素的Width和Height属性，这副图将以它的原始大小显示出来。

<Canvas Width="300" Height="300"
    xmlns="http://schemas.microsoft.com/client/2007"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Image Source="star.png" />
</Canvas>

重新开始查看内容

 

Stretch属性

当Image元素的大小和位图信息的大小不同时，Stretch属性会决定这幅位图会如何进行缩放，以配合Image元素。Stretch元素可以使用以下值：None、Fill、Uniform、UniformToFill。下面的示例分别展示了None、Uniform和Fill的效果。

<Canvas Width="300" Height="300"
    xmlns="http://schemas.microsoft.com/client/2007"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Image Source="star.png" Stretch="None"
        Height="100" Width="200" Canvas.Left="100" />

    <Image Source="star.png" Stretch="Fill"
        Height="100" Width="200" Canvas.Top="100" Canvas.Left="100" />   
  
    <Image Source="star.png" Stretch="Uniform"
        Height="100" Width="200" Canvas.Top="200" Canvas.Left="100" /> 
     
    <TextBlock Canvas.Left="5" Canvas.Top="0">None</TextBlock>
    <TextBlock Canvas.Left="5" Canvas.Top="100">Fill</TextBlock>
    <TextBlock Canvas.Left="5" Canvas.Top="200">Uniform</TextBlock> 
</Canvas>

重新开始查看内容

您可以查看WPF/E SDK中有关Stretch属性的内容，以得到有关图像伸缩设置的更多信息。

 

使用位图的其它方法

有关如何使用ImageBrush对象将位图作为背景的更多内容，请查看“绘图与填充”。

 

下面该做什么呢？

在下一部分“文本”中，您会了解TextBlock元素的使用方式，它使您能够为WPF/E内容添加文本。