我正在使用Xamarin.Forms进行跨平台项目，我需要使用谷歌drawables九个补丁图像为我的谷歌登录按钮

Question

事情是我尝试使用https://baskren.github.io/Forms9Patch/但我觉得我没有完全掌握它。

不要误会我的意思，这个工具很棒，它可以拉伸9patch图像。只是我无法根据Google品牌指南让按钮看起来正确。

https://developers.google.com/identity/branding-guidelines

The way it should look

这是我正在使用的drawables：https://developers.google.com/identity/images/signin-assets.zip。

Here are the results of different button tries and dimensions

这是让我最接近我想要的按钮的代码

 <f9p:Button  Text = "Sign in with xxhdpi"
                     TextColor="White"
                     FontSize="14"
                     FontFamily="sans-serif-medium"
                     WidthRequest="60"
                     >
            <f9p:Button.BackgroundImage>
                <f9p:Image Source="{local:ImageMultiResource TestingApp.Resources.Images.btn_google_signin_dark_normal_xxhdpi}"/>
            </f9p:Button.BackgroundImage>


        </f9p:Button>

我尝试使用带有图像和按钮的网格，但它没有用完。

如果有人能指出我正确的方向，那将是很棒的。

Answer 1

我以前做过这个。以下是我所做的大致概述：

1. 将您的多平台图标文件作为嵌入式资源放入.NetStandard项目中。这意味着我找到了Google提供的所有各种解决方案（_xxhdpi，_xhdpi，_hdpi，_mdpi等），然后将它们重命名为以下内​​容： icon@¾x.png 的icon.png icon@1½x.png [email protected] [email protected] [email protected] 然后将它们放入我的项目中的Resources / Google文件夹（FormsFirebase.Ui）。因此，例如，上面列表中第一个文件的EmbeddedResourceId是FormsFirebase.Ui.Resources.Google.icon@¾x.png。 正如您将在稍后看到的那样，重命名这些文件，如上所示，将允许Forms9Patch.Button为正确的屏幕分辨率选择正确的图像（因此它看起来很棒） - 让您无需管理它。同样，将它们放入.NetStandard项目意味着它们可用于所有平台 - 让您不必多次弄清楚这一点！
2. 在Forms9Patch.Button中，请以独立于分辨率的方式参考上面的图标图像。这可以通过几种方式完成。一种比较冗长的方式是：

    var myButton = new Forms9Patch.Button
    {
        Text = "Sign in with xxhdpi",
        TextColor=Color.White,
        FontSize=14,
        FontFamily="sans-serif",
        WidthRequest=60,
        IconImage = new Forms9Patch.Image
        {
            Source = Forms9Patch.ImageSource.FromMultiResource("FormsFirebase.Ui.Resources.Google.icon", GetType().Assembly),
            Padding = 1,
        },
        Spacing = 4,
        TintIcon = false,
        BackgroundColor = Color.FromRGB(81,134,236)
    };

有几点需要注意：

1. 首先，我将TintIcon设置为false，以便不将图标着色为与TextColor相同的颜色。另外，我设置IconImage，而不是BackgroundImage。这是为了确保图像是文本的对等体，而不是在它下面的层中。
2. 另请注意，我能够设置IconImage的填充以及Forms9Patch.Button.Padding和Forms9Patch.Button.Spacing（IconImage和Text或HtmlText之间的距离，具体取决于HasTightSpacing是否设置为true）。
3. 如果您有可用的.png版本的图像，而不是使用多个.svg文件（对于每个屏幕分辨率），您可以使用它。工作少得多！
4. 您可能感兴趣的另一件事：正如Forms9Patch以独立于平台的方式处理图像（通过将它们作为嵌入式资源置于跨平台项目中），它可以使用字体执行相同的操作。这意味着您可以将字体文件（.ttf或.otf）放入跨平台项目中，并使用其EmbeddedResourceId作为FontFamily的值。并且这种行为可以通过使用Forms9Patch.EmbeddedResourceFontEffect扩展到Xamarin.Forms元素。

现在进行一些改编（请原谅我，如果这不适用于你）：我看到您使用XAML作为示例代码。请注意，我没有回复。如果您是.Net和/或Xamarin.Forms的新手，我强烈建议不要使用XAML。不要误会我的意思，XAML很棒 - 它不适合初学者。为什么？在封面下发生的事情太多了，作为一个初学者，会绊倒你并减慢你的速度。相反，我建议您在C＃中编写所有UI，这样您就可以学习管理属性并了解绑定是如何工作的。一旦你掌握了使用绑定的最佳“上下文适当”使用非常有效的布局，那么你已经为XAML做好了准备。对我来说，真正的测试是能够在ListView的大型列表中制作非常复杂的单元格布局，在低端Android手机上平滑滚动。在那次经历之后，我能够充分利用在XAML中开发的所有好处（并且有很多），而不必担心被我的新手错误束缚。