42、XAML Images
1、Displaying images ：
在 xaml 中引用程序包中的图片的方法 ：
<Image Source="Assets/image1.jpg" Height="200" />
2、Images from a file stream:
本实例演示用户通过 File Picker 选择图片，并且进行编码解析。
操作截图：
原始图片：
经过解析：
页面的 XAML ：
<!--高度--> <TextBox x:Name="Scenario2DecodePixelHeight" Width="100" Text="100" HorizontalAlignment="Left" /> <!--宽度--> <TextBox x:Name="Scenario2DecodePixelWidth" Width="100" Text="100" HorizontalAlignment="Left" /> <!-- 点击打开 FileOpenPicker. --> <Button x:Name="Scenario2Button1" Content="Select image..." Click = “Scenario2Button1_Click”/>
<!--显示结果--> <Image x:Name="Scenario2Image" Stretch="None" />
相应的 C# ：
按钮的单击事件：
async void Scenario2Button1_Click(object sender, RoutedEventArgs e) { int decodePixelHeight; int decodePixelWidth; if (!int.TryParse(Scenario2DecodePixelHeight.Text, out decodePixelHeight)) { Scenario2DecodePixelHeight.Text = "100"; decodePixelHeight = 100; } if (!int.TryParse(Scenario2DecodePixelWidth.Text, out decodePixelWidth)) { Scenario2DecodePixelWidth.Text = "100"; decodePixelWidth = 100; } FileOpenPicker open = new FileOpenPicker(); open.SuggestedStartLocation = PickerLocationId.PicturesLibrary; open.ViewMode = PickerViewMode.Thumbnail; // Filter to include a sample subset of file types open.FileTypeFilter.Clear(); open.FileTypeFilter.Add(".bmp"); open.FileTypeFilter.Add(".png"); open.FileTypeFilter.Add(".jpeg"); open.FileTypeFilter.Add(".jpg"); StorageFile file = await open.PickSingleFileAsync(); if (file != null) { using (IRandomAccessStream fileStream = await file.OpenAsync(Windows.Storage.FileAccessMode.Read)) { BitmapImage bitmapImage = new BitmapImage(); //获取或设置要用于图像编码操作的高度。 bitmapImage.DecodePixelHeight = decodePixelHeight; bitmapImage.DecodePixelWidth = decodePixelWidth; await bitmapImage.SetSourceAsync(fileStream); Scenario2Image.Source = bitmapImage; } } }
3、Displaying a NineGrid image ：
下面的实例展示了怎样使用 NineGrid margins 显示一个图片。
第一张图片是原始图片（8x7 像素）。第二张是把原图片放大到 100x200 的图片。第三张图片是放大到 100x200 并且指定
了 3 像素的 NineGrid margins 。这些控件使用拉伸边缘和边角的行为。
NineGrid 属性： 获取或设置控制图像大小调整方式的九格形式的值。
显示截图 ：
相应的 xaml ：
<Image Source="Assets/NineGridSource.png" Stretch="None" /> <Image Source="Assets/NineGridSource.png"/> <!--NineGrid : 获取或设置控制图像大小调整方式的九格形式的值。--> <Image Source="Assets/NineGridSource.png" NineGrid="3,3,3,3"/>
4、Using a WriteableBitmap :
下面的演示展示了如何直接操作 WriteableBitmap 对象的像素点。
首先在 XAML 页面中，放置三个按钮 和 一个显示图片操作结果的容器 ：
<!--异步绘制曼德尔勃特集合，并且将结果显示在下面的 WriteableBitmap 中。--> <Button Content="Draw Mandelbrot set" Click="DrawMandelbrotSet_Click" /> <!--加载一个选取的图片，并使用 SetSource 方法将其显示在 WriteableBitmap 中--> <Button x:Name="Scenario4SetSourceButton" Content="Load image using SetSource" Click="LoadImageUsingSetSource_Click" /> <!--加载一个选择的图片，并使用 BitmapDecoder 解码像素并复制到 WriteableBitmap 中。--> <Button x:Name="Scenario4LoadImageButton" Content="Load image using PixelBuffer" Click="LoadImageUsingPixelBuffer_Click" />
显示结果的容器：
<Viewbox Width="400" Height="300" x:Name="Scenario4ImageContainer"> <Image x:Name="Scenario4Image" /> </Viewbox>
在相应的 C# 中，定义一个全局的 WriteableBitmap：
//下面的操作都是用这个对象 private WriteableBitmap Scenario4WriteableBitmap;
在页面的构造函数中，使用 Image 控件的容器 Scenario4ImageContainer 控件的尺寸初始化这个对象：
Scenario4WriteableBitmap = new WriteableBitmap((int)Scenario4ImageContainer.Width, (int)Scenario4ImageContainer.Height); Scenario4Image.Source = Scenario4WriteableBitmap;
第一个按钮的单击事件：
private async void DrawMandelbrotSet_Click(object sender, RoutedEventArgs e) { int pixelWidth = Scenario4WriteableBitmap.PixelWidth; int pixelHeight = Scenario4WriteableBitmap.PixelHeight; // 在一个后台线程中异步绘制 曼德尔勃特集 byte[] result = null; await ThreadPool.RunAsync(new WorkItemHandler( (IAsyncAction action) => { result = DrawMandelbrotGraph(pixelWidth, pixelHeight); } )); // 打开一个流，用来复制图片到 WriteableBitmap的 像素缓冲区 using (Stream stream = Scenario4WriteableBitmap.PixelBuffer.AsStream()) { await stream.WriteAsync(result, 0, result.Length); } // 绘制 WriteableBitmap Scenario4WriteableBitmap.Invalidate(); //请求绘制或重绘整个位图。 } private byte[] DrawMandelbrotGraph(int width, int height) { //每个像素需要 4 字节 byte[] result = new byte[width * height * 4]; int resultIndex = 0; // 当测试时，最大次数的迭代，来判断一个点是否在这个集中 int maxIterationCount = 50; // 选择间隔 //Complex : 表示一个复数。 Complex minimum = new Complex(-2.5, -1.0); Complex maximum = new Complex(1.0, 1); // Normalize x and y values based on chosen interval and size of WriteableBitmap double xScaleFactor = (maximum.Real - minimum.Real) / width; double yScaleFactor = (maximum.Imaginary - minimum.Imaginary) / height; //在 xy 平面绘制 曼德尔勃特集 for (int y = 0; y < height; y++) { for (int x = 0; x < width; x++) { Complex c = new Complex(minimum.Real + x * xScaleFactor, maximum.Imaginary - y * yScaleFactor); Complex z = new Complex(c.Real, c.Imaginary); //用简单的逃逸时间算法进行迭代 int iteration = 0; while (z.Magnitude < 2 && iteration < maxIterationCount) { z = (z * z) + c; iteration++; } // 基于概率的设置像素的阴影 byte grayScaleValue = Convert.ToByte(255 - 255.0 * iteration / maxIterationCount); result[resultIndex++] = grayScaleValue; // Green value of pixel result[resultIndex++] = grayScaleValue; // Blue value of pixel result[resultIndex++] = grayScaleValue; // Red value of pixel result[resultIndex++] = 255; // Alpha value of pixel } } return result; }
显示结果 ：
第二个按钮的 单击事件：
//用户选取文件后，通过 SetSource() 方法进行赋值 private async void LoadImageUsingSetSource_Click(object sender, RoutedEventArgs e) { FileOpenPicker picker = new FileOpenPicker(); picker.SuggestedStartLocation = PickerLocationId.PicturesLibrary; picker.FileTypeFilter.Add(".png"); picker.FileTypeFilter.Add(".jpeg"); picker.FileTypeFilter.Add(".jpg"); picker.FileTypeFilter.Add(".bmp"); StorageFile file = await picker.PickSingleFileAsync(); if (file != null) { using (IRandomAccessStream fileStream = await file.OpenAsync(Windows.Storage.FileAccessMode.Read)) { try { await Scenario4WriteableBitmap.SetSourceAsync(fileStream); } catch (TaskCanceledException) { // 如果用户重复点击按钮，从而设置 WriteableBitmap 对象的 Source 属性的操作失败 } } } }
显示截图：
第三个按钮的 单击事件：
private async void LoadImageUsingPixelBuffer_Click(object sender, RoutedEventArgs e) { //这个方法通过把一张图片编码到一个 byte 流中，然后加载到 //WriteableBitmap 中，并且把结果复制到一个 WriteableBitmap 的 //像素的 buffer（缓冲区） 中 FileOpenPicker picker = new FileOpenPicker(); picker.SuggestedStartLocation = PickerLocationId.PicturesLibrary; picker.FileTypeFilter.Add(".png"); picker.FileTypeFilter.Add(".jpeg"); picker.FileTypeFilter.Add(".jpg"); picker.FileTypeFilter.Add(".bmp"); StorageFile file = await picker.PickSingleFileAsync(); if (file != null) { using (IRandomAccessStream fileStream = await file.OpenAsync(Windows.Storage.FileAccessMode.Read)) { // 异步创建新的 BitmapDecoder 并使用流将其初始化。 BitmapDecoder decoder = await BitmapDecoder.CreateAsync(fileStream);
// 缩放图像到大小适当的尺寸 // 包含可应用于像素或位图数据的转换集。 BitmapTransform transform = new BitmapTransform() {
//指定任何转换缩略图的高度（以像素为单位）。 ScaledWidth = Convert.ToUInt32(Scenario4WriteableBitmap.PixelWidth), ScaledHeight = Convert.ToUInt32(Scenario4WriteableBitmap.PixelHeight)}; //使用指定参数异步请求帧的像素数据。 PixelDataProvider pixelData = await decoder.GetPixelDataAsync( BitmapPixelFormat.Bgra8, // WriteableBitmap 使用 BGRA 格式 BitmapAlphaMode.Straight, transform, // EXIF 方向标志被忽略。未执行旋转或翻转操作。 //This sample ignores Exif orientation ExifOrientationMode.IgnoreExifOrientation, // 未执行颜色管理 ColorManagementMode.DoNotColorManage); // 一个包含图像解码数据的数组,可以在显示之前修改 //返回内部存储的像素数据。 byte[] sourcePixels = pixelData.DetachPixelData(); // 打开一个流，并将图像的内容复制到 WriteableBitmap 的像素缓冲区中 using (Stream stream = Scenario4WriteableBitmap.PixelBuffer.AsStream()) { //将字节序列异步写入当前流，并将流的当前位置向前移动写入的字节数。 await stream.WriteAsync(sourcePixels, 0, sourcePixels.Length); } } // 重新绘制这个 WriteableBitmap 对象 //请求绘制或重绘整个位图。 Scenario4WriteableBitmap.Invalidate(); } }
显示结果和 上一个方法的结果相同。