第十三章：位图（一）

图形用户界面的可视元素可以粗略地分为用于呈现的元素（例如文本）和能够与用户交互的元素，例如按钮，滑块和列表框。
文本对于呈现至关重要，但图片通常与补充文本和传达重要信息的方式同样重要。例如，没有图片，网络是不可想象的。这些图像通常是称为位图的图像元素（或像素）的矩形阵列的形式。
就像名为Label的视图显示文本一样，名为Image的视图显示位图。 iOS，Android和Windows运行时支持的？的位图有点不同，但如果您在Xamarin.Forms应用程序中坚持使用JPEG，PNG，GIF和BMP，则可能不会遇到任何问题。
Image定义了一个Source属性，您可以将其设置为ImageSource类型的对象，该对象引用Image显示的位图。位图可以来自各种源，因此ImageSource类定义了四个返回ImageSource对象的静态创建方法：

• ImageSource.FromUri用于通过Web访问位图。
• ImageSource.FromResource，用于存储为应用程序PCL中的嵌入式资源的位图。
• ImageSource.FromFile用于存储为单个平台项目中的内容的位图。
• ImageSource.FromStream，用于通过使用.NET Stream对象加载位图。

ImageSource还有三个后代类，名为UriImageSource，FileImageSource和StreamImageSource，您可以使用它们代替第一，第三和第四个静态创建方法。 通常，静态方法在代码中更容易使用，但XAML中有时需要后代类。
通常，您将使用ImageSource.FromUri和ImageSource.FromResource方法获取用于演示目的的独立于平台的位图，并使用ImageSource.FromFile为用户界面对象加载特定于平台的位图。 小位图在MenuItem和ToolbarItem对象中起着至关重要的作用，您还可以向Button添加位图。
本章首先使用从Image？Source.FromUri和ImageSource.FromResource方法获得的与平台无关的位图。 然后讨论了ImageSource.FromStream方法的一些用法。 本章最后使用ImageSource.FromFile获取工具栏和按钮的特定于平台的位图。

与平台无关的位图

这是一个名为WebBitmapCode的仅代码程序，其页面类使用ImageSource.FromUri从Xamarin网站访问位图：

public class WebBitmapCodePage : ContentPage
{
    public WebBitmapCodePage()
    {
        string uri = "https://developer.xamarin.com/demo/IMG_1415.JPG";
        Content = new Image
        {
            Source = ImageSource.FromUri(new Uri(uri))
        };
    }
}

如果传递给ImageSource.FromUri的URI未指向有效位图，则不会引发异常。
即便是这个小程序也可以简化。 ImageSource定义了从字符串或Uri到ImageSource对象的隐式转换，因此您可以将带有URI的字符串直接设置为Image的源支持：

public class WebBitmapCodePage : ContentPage
{
    public WebBitmapCodePage()
    {
        Content = new Image
        {
            Source = "https://developer.xamarin.com/demo/IMG_1415.JPG"
        };
    }
}

或者，为了使其更加详细，可以将Image的Source属性设置为UriImageSource对象，并将其Uri属性设置为Uri对象：

public class WebBitmapCodePage : ContentPage
{
    public WebBitmapCodePage()
    {
        Content = new Image
        {
            Source = new UriImageSource
            {
                Uri = new Uri("https://developer.xamarin.com/demo/IMG_1415.JPG")
            }
        };
    }
}

如果要控制基于Web的图像的缓存，则可能首选UriImageSource类。 该类实现了自己的缓存，该缓存使用每个平台上可用的应用程序的私有存储区域。 UriImageSource定义了一个CachingEnabled属性，其默认值为true，TimeSpan类型的CachingValidity属性的默认值为一天。 这意味着如果在一天内重新访问图像，则使用缓存的图像。 您可以通过将CachingEnabled设置为false来完全禁用缓存，也可以通过将CachingValidity属性设置为另一个TimeSpan值来更改缓存到期时间。
无论您采用哪种方式，默认情况下，Image视图显示的位图会拉伸到其容器的大小 - 在这种情况下为ContentPage - 同时遵循位图的宽高比：

此位图是方形的，因此图像上方和下方会出现空白区域。 当您在纵向和横向模式之间转动手机或模拟器时，渲染的位图可以更改大小，您将在顶部和底部或左侧和右侧看到一些空白区域，位图无法到达。 您可以使用Image继承自VisualElement的BackgroundColor属性为该区域着色。
WebBitmapCode程序中引用的位图是4,096像素的正方形，但Xamarin网站上安装了一个实用程序，它允许您通过指定URI来下载更小的位图文件，如下所示：

Content = new Image
{
    Source = "https://developer.xamarin.com/demo/IMG_1415.JPG?width=25"
};

现在下载的位图是25像素的正方形，但它再次拉伸到其容器的大小。 每个平台都实现了一种插值算法，试图在图像展开以适合页面时平滑像素：

但是，如果现在将Image上的HorizontalOptions和VerticalOptions设置为Center
或者将Image元素放在StackLayout中 - 这个25像素的位图会折叠成一个非常小的图像。 本章稍后将更详细地讨论这种现象。
您还可以在XAML中实例化Image元素，并通过将Source属性直接设置为Web地址来从URL加载位图。 这是WebBitmapXaml程序中的XAML文件：

<ContentPage xmlns=""
             xmlns:x=""
             x:Class="WebBitmapXaml.WebBitmapXamlPage">
    <Image Source="https://developer.xamarin.com/demo/IMG_3256.JPG" />

</ContentPage>

更详细的方法涉及显式实例化UriImageSource对象并设置Uri属性：

<Image>
    <Image.Source>
        <UriImageSource Uri="https://developer.xamarin.com/demo/IMG_3256.JPG" />
    </Image.Source>
</Image>

无论如何，这是它在屏幕上的样子：