导出 (0) 打印
全部展开
信息
您所需的主题如下所示。但此主题未包含在此库中。

快速入门:Windows Phone 的图像

2014/6/18

适用于:Windows Phone 8 和 Windows Phone Silverlight 8.1 | Windows Phone OS 7.1

在 Windows Phone 中,对于显示图像(如,图片和关系图),您拥有多种选择。本“快速入门”描述了将图像集成到您的 Windows Phone 应用的方式。

本主题包括以下部分。

为了显示图像,您可以使用 ImageImageBrush 对象。下面的示例说明如何使用 Image 对象显示名为 licorice.jpg 的图像。

<Image Source="licorice.JPG" />

下图显示了在模拟器中运行的示例。

Image display

在此示例中,Source 属性指定要显示的图像的位置。可以通过指定绝对 URL(例如,http://contoso.com/myPicture.jpg)或通过指定包含在应用 XAP 文件中的文件的 URL,设置 Source。要向您的应用添加图像文件,请在 Visual Studio 中执行以下操作:

  1. “项目”菜单上,选择“添加现有项”

  2. 选择所需的图像文件,然后单击“添加”

  3. 解决方案资源管理器中,选择已添加的图像文件。

  4. “属性”窗口中,将“生成操作”属性更改为“内容”

生成应用后,图像文件将包含在 XAP 中。

说明注意:

Windows Phone 不支持所有的图像格式。BitmapImage 类可用于引用 JPEG 和 PNG 文件格式的图像。有关可以用于 Image 的图像源和格式的类型的更多信息,请参见 BitmapImage

ImageBrush 对象允许您使用图像绘制采用 Brush 对象的区域。例如,ImageBrush 可用于 PanelBackground 属性的值。有关 Windows Phone 中画笔的更多信息,请参见快速入门:Windows Phone 的画笔

下面的示例演示如何使用甘草图像绘制某些文本的内部。

<!-- TextBlock with an image brush applied to the text. -->
<TextBlock Margin="20"
    Text="LICORICE"
    FontFamily="Verdana"
    FontSize="80"
    FontWeight="Bold">
    <TextBlock.Foreground>
        <ImageBrush ImageSource="licorice.JPG"/>
    </TextBlock.Foreground>
</TextBlock>

下图显示了在模拟器中运行的示例。

Image display

如果您未设置 ImageWidthHeight 值,则它将使用 Source 指定的图像的尺寸进行显示。设置 WidthHeight 将创建一个包含矩形区域,图像将显示在该区域中。您可以通过使用 Stretch 属性指定图像如何填充此包含区域。Stretch 属性接受 Stretch 枚举定义的下列值:

  • None:不会为了适合输出尺寸而拉伸图像。

  • Uniform:图像进行缩放,以适合输出尺寸。但是会保留该内容的纵横比。这是默认值。

  • UniformToFill:图像进行缩放,从而可以完全填充输出区域,但保持其原始纵横比。

  • Fill:图像进行缩放,以适合输出尺寸。由于内容的高度和宽度是独立缩放的,因此图像的原始纵横比可能不会保留。也就是说,为了完全填充输出区域,图像可能会失真。

下面的插图显示了不同的 Stretch 设置。

Image Stretch enum

您可以使用 Clip 属性从 Image 输出裁剪区域。您将 Clip 属性设置为 Geometry,这意味着可以从 Image 中裁剪各种几何形状(例如,椭圆、直线或复杂路径)。

下面的示例演示如何将 EllipseGeometry 用作 Image 的剪切区域。在此示例中,Image 对象是通过将 Source 属性设置为图像文件而定义的。RadiusX 值为 125RadiusY 值为 100Center 值为 225,175EllipseGeometry 设置为 ImageClip 属性。只有位于椭圆区域内部的图像部分才会显示。

<Image Source="Licorice.JPG">
    <Image.Clip>
        <EllipseGeometry RadiusX="125" RadiusY="100" Center="225,175"/>
    </Image.Clip>
</Image>

下图显示了在模拟器中运行的示例。

Image Clipping

您可以将 OpacityMask 应用于某一 Image,以便创建多种与不透明度相关的照片蒙板技术,例如虚光照效果。

下面的示例演示如何将径向渐变应用到 Image,以便它在边缘上淡出(虚光照效果)。

<Image Source="licorice.jpg" >
    <Image.OpacityMask>
        <RadialGradientBrush GradientOrigin="0.5,0.5"
            Center="0.5,0.5"
            RadiusX="0.5"
            RadiusY="0.5">
            <!-- These Gradient Stop colors are only changing the
            alpha values so the image fades out toward the edges. -->
            <GradientStop Color="#ffffffff" Offset="0.5" />
            <GradientStop Color="#00ffffff" Offset="0.8" />
        </RadialGradientBrush>
    </Image.OpacityMask>
</Image>

下图显示了在模拟器中运行的示例。

Image OpacityMask
说明注意:

可以将各种 Brush 对象用作不透明蒙板。有关 Windows Phone 中画笔的更多信息,请参见快速入门:Windows Phone 的画笔

WriteableBitmap 提供可以修改的 BitmapSource。这允许您即时更改图像并重新呈现更新的图像。

您可以将 BitmapSource(新位图的维度)或 UIElement 传递到 WriteableBitmap 构造函数。传入 UIElement 将创建可视元素的位图图像。例如,如果您想要整个可视树的位图,您可以将根 UIElement 传入到构造函数。

WriteableBitmap 上的 Pixels 属性是表示位图的二维纹理的数组。您可以通过更改此数组中的像素值更改位图图像。

说明注意:

WriteableBitmap 使用的格式是 ARGB32(预乘 RGB)。因此,WriteableBitmap 的像素数组中的像素将存储为预乘颜色。每个颜色通道都预先乘以 alpha 值。

说明注意:

MediaElement 对象不会出现在 WriteableBitmap 捕获中。这是因为 MediaElement 全部呈现在 Windows Phone 上的硬件中。

下面的代码示例演示如何从 Image 对象创建 WriteableBitmap 图像以及如何修改 WriteableBitmap。为创建 WriteableBitmapImage 对象的 Source 属性被强制转换为 BitmapSource 并被传递到 WriteableBitmap 构造函数。单击 Modify Pixels 按钮时,事件处理程序将循环访问位图的 Pixels 数组,并且每次都将第四个像素设置为黑色。然后,Image 对象将设置为已修改的位图,并将重新呈现。

<StackPanel>
    <Image Name="ImageToModify" Source="licorice.jpg" />
    <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" Margin="30" >
        <Button Name="ButtonModify" Content="Modify Pixels" Click="ButtonModify_Click" />
        <Button Name="ButtonReset" Content="Reset Image" Click="ButtonReset_Click" />
    </StackPanel>
</StackPanel>
Private Sub ButtonModify_Click(sender As Object, e As RoutedEventArgs)
    Dim pixelTarget As Integer = 4
    If ImageToModify.Source IsNot Nothing Then
        ' Get WriteableBitmap. ImageToModify is defined in MainPage.xaml
        Dim bitmap As New WriteableBitmap(TryCast(ImageToModify.Source, BitmapSource))
        ' Iterate through each pixel.
        For x As Integer = 0 To bitmap.Pixels.Length - 1
            ' Set every 4th pixel.
            If x Mod pixelTarget = 0 Then
                bitmap.Pixels(x) = 0
            End If
        Next
        ' Set Image object, defined in XAML, to the modified bitmap.
        ImageToModify.Source = bitmap
    End If
End Sub

Private Sub ButtonReset_Click(sender As Object, e As RoutedEventArgs)
    Dim licoriceImage As New BitmapImage(New Uri("licorice.jpg", UriKind.Relative))
    ImageToModify.Source = licoriceImage
End Sub

在将 BitmapImage 用作 ImageSource 时,可以增强对图像资源要求和性能的控制。

若要以缩小的尺寸加载图像,请先设置图像的 DecodePixelWidthDecodePixelHeight 属性。如果不使用这些属性,应用程序将以原始大小(而不是显示的较小大小)对图像进行缓冲,从而造成不必要的资源占用。为保持纵横比,请设置其中一项而不是两项属性。

若要提高性能,请指定 BackgroundCreation 以在后台线程中对图像解码,而不是阻止 UI 线程。

显示:
© 2014 Microsoft