Xamarin.Forms Image

• Xamarin.Forms Image
  • Image标签
  • IMarkupExtension
    • 颜色扩展

Image标签

简单来讲就是图片标签，我们有四种创建图片来源的方式：本地图片加载、后台图片定义、加载网络图片和加载嵌入式资源。
首先我们需要两张图片my1.jpeg和my2.png，在我们创建的Xamarin.Forms中创建一个images目录,并将两张图片放到下面的目录中，且将属性改为嵌入式资源。同时，我们可以将该图片放到安卓的/Resources/drawable/目录下面。

接下来我们创建Images.xaml文件来示例各种图片的来源。

<?xml version="1.0" encoding="UTF-8" ?>
<ContentPage
    xmlns="http://xamarin.com/schemas/2014/forms"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:local="clr-namespace:LableApp"
    x:Class="LableApp.Images">
    <ContentPage.Content>
        <StackLayout>
            <!--指定图片-->
            <Image Source="my1.jpeg" HeightRequest="40" WidthRequest="40"></Image>
            <!--后台指定图片-->
            <Image x:Name="imgLogo" HeightRequest="40" WidthRequest="40"></Image>
            <!--加载网络图片-->
            <Image Source="https://img.tnblog.net/userdata/heads/dbc68332d521436c983fbc3adc6d9c7f.jpeg" HeightRequest="40" WidthRequest="40" ></Image>
            <!--加载嵌入式资源-->
            <Image Source="{local:ImageResource LableApp.Images.my2.png}" HeightRequest="40" WidthRequest="40" ></Image>
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

public partial class Images : ContentPage
{    
    public Images ()
    {
        InitializeComponent();
        imgLogo.Source = ImageSource.FromFile("my2.png");
    }
}

然后我们定义ImageResource图片资源扩展类，它实现了IMarkupExtension接口，该接口可以理解为实现任意资源在不同平台的扩展，后面还会讲到，在这个案例中我们只会让它返回图片资源就行了。

[ContentProperty(nameof(Source))]
public class ImageResourceExtension:IMarkupExtension
{
    public string Source { get; set; }
    public object ProvideValue(IServiceProvider serviceProvider)
    {
        if (Source == null)
            return null;
        var imageSource = ImageSource.FromResource(Source, typeof(ImageResourceExtension).GetTypeInfo().Assembly);
        return imageSource;
    }
}

然后我们在App.xaml.cs中设置Images为启动页面。

MainPage = new Images();

在安卓中测试运行如下：

在IOS中测试运行如下：

我们发现它在IOS中并没有加载前两张图片，是因为那两张图片是来自安卓主机的本地中，而在IOS本地的资源中我们并没有进行定义。

IMarkupExtension

可以通过从 IMarkupExtension 或 IMarkupExtension<T> 派生来定义自己的自定义 XAML 标记扩展。 如果标记扩展获取特定类型的值，则使用一般窗体。 下面是几 Xamarin.Forms 个标记扩展的情况：

• TypeExtension 派生自 IMarkupExtension<Type>
• ArrayExtension 派生自 IMarkupExtension<Array>
• DynamicResourceExtension 派生自 IMarkupExtension<DynamicResource>
• BindingExtension 派生自 IMarkupExtension<BindingBase>
• ConstraintExpression 派生自 IMarkupExtension<Constraint>
  这两个 IMarkupExtension 接口仅定义了一个名为 ProvideValue 的方法：

public interface IMarkupExtension
{
    object ProvideValue(IServiceProvider serviceProvider);
}
public interface IMarkupExtension<out T> : IMarkupExtension
{
    new T ProvideValue(IServiceProvider serviceProvider);
}

由于 IMarkupExtension<T>派生自 IMarkupExtension 并且在上 ProvideValue 包含 new 关键字，因此它包含这两种 ProvideValue 方法。
通常，XAML 标记扩展定义用于返回值的属性。 (明显的例外是，在这 ProvideValue 种情况 NullExtension 下只返回 null 。 ) ProvideValue 方法具有一个类型 IServiceProvider 的参数，本文稍后将对此进行讨论。

颜色扩展

以下 XAML 标记扩展允许你使用色调、饱和度和发光度组件来构造 Color 值。 它为颜色的四个分量定义四个属性，包括已初始化为1的 alpha 分量。 类从 IMarkupExtension<Color> 派生，以指示 Color 返回值：

public class MyColorExtension: IMarkupExtension<Color>
{
    public double H { set; get; }
    public double S { set; get; }
    public double L { set; get; }
    public double A { set; get; } = 1.0;
    public Color ProvideValue(IServiceProvider serviceProvider)
    {
        return Color.FromHsla(H, S, L, A);
    }
    object IMarkupExtension.ProvideValue(IServiceProvider serviceProvider)
    {
        return (this as IMarkupExtension<Color>).ProvideValue(serviceProvider);
    }
}

由于派生自 IMarkupExtension ，因此 IMarkupExtension<T> 该类必须包含两个 ProvideValue 方法，一个返回 Color ，另一个返回 object ，但第二个方法可以只调用第一个方法。
"MyColor"页显示了可在 XAML 文件中显示以指定的 BoxView 颜色的各种方式 MyColorExtension ：

<?xml version="1.0" encoding="UTF-8" ?>
<ContentPage
    xmlns="http://xamarin.com/schemas/2014/forms"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:local="clr-namespace:LableApp"
    x:Class="LableApp.MyColor"
    Title="My Color Demo">
    <ContentPage.Resources>
        <ResourceDictionary>
            <Style TargetType="BoxView">
                <Setter Property="WidthRequest" Value="80" />
                <Setter Property="HeightRequest" Value="80" />
                <Setter Property="HorizontalOptions" Value="Center" />
                <Setter Property="VerticalOptions" Value="CenterAndExpand" />
            </Style>
        </ResourceDictionary>
    </ContentPage.Resources>
    <StackLayout>
        <BoxView>
            <BoxView.Color>
                <local:MyColorExtension H="0" S="1" L="0.5" A="1" />
            </BoxView.Color>
        </BoxView>
        <BoxView>
            <BoxView.Color>
                <local:MyColorExtension H="0.33" S="1" L="0.5" />
            </BoxView.Color>
        </BoxView>
        <BoxView Color="{local:MyColorExtension H=0.67, S=1, L=0.5}" />
        <BoxView Color="{local:MyColorExtension H=0, S=0, L=0.5}" />
        <BoxView Color="{local:MyColorExtension A=0.5}" />
    </StackLayout>
</ContentPage>

请注意，当是 XML 标记时 MyColorExtension ，这四个属性被设置为属性，但当它出现在大括号之间时，这四个属性以逗号分隔，且不带引号。 、 S 和 L 的默认值 H 为0，的 A 默认值为1，因此，如果您希望它们设置为默认值，则可以省略这些属性。 最后一个示例显示一个示例，其中亮度为0，这通常会导致黑色，但 alpha 通道为0.5，因此它在页面的白色背景上呈灰色显示：