带有图像 Xamarin.Forms 的按钮答案

【问题标题】：Button with Image Xamarin.Forms带有图像 Xamarin.Forms 的按钮
【发布时间】：2014-09-15 17:08:27
【问题描述】：

我正在使用 Xamarin.Forms 开发一个跨平台应用程序。我想用图像制作一个按钮，但我不知道如何指定图像的路径。当我使用此注释时，它可以工作：

<Button Text="Naviga tra i Piani del Museo" Image="foo.png"/>

但是当我的图像在某些文件夹（文件夹 1/文件夹 2）中时，以下代码不起作用：

<Button Text="Naviga tra i Piani del Museo" Image="folder1/folder2/foo.png"/>

那么如何正确指定图片的路径呢？

【问题讨论】：

标签： xaml xamarin xamarin.forms

【解决方案1】：

您不能将图像嵌套在文件夹中。 iOS 和 Android 期望它们是资源，而 WP 期望它们位于 App 的根文件夹中。

Xamarin Forms 文档有一个关于 working with images 的部分。

【讨论】：

如果你有 100 张图片，你会把它们都放在同一个文件夹中吗？
不幸的是，我认为这是 XF 当前状态的答案。希望将来它会更加灵活。

【解决方案2】：

使用 PCL 保持图像通用是一项艰巨的任务。所以分开做吧。

请记住，如果是 android 项目，您必须将图像复制到 Resources>drawable。

【讨论】：

【解决方案3】：

对于为 Xamarin.Forms 项目使用文件夹，这对我有用。

您需要将资源（在本例中为图像文件）放入 Xamarin.Form 项目内的文件夹（对于此示例文件夹称为“Assets”）并设置构建操作“内容”。

其次，要让资源与 Android 一起使用，您需要将文件放入 Android 项目中的 Resources>drawable 文件夹（此处不能使用任何文件夹），设置 Build Action “AndroidResource”。

<ContentPage.Resources>
    <ResourceDictionary>
        <OnPlatform x:Key="StartButtonImage" 
                    x:TypeArguments="FileImageSource"
                    Android="button_image.png"
                    WinPhone="Assets\button_image.png"
                    iOS="Assets/button_image.png"/>
    </ResourceDictionary>
</ContentPage.Resources>


<ContentPage.Content>
    <Grid>
        <Button Image="{StaticResource StartButtonImage}" BackgroundColor="Transparent"/>
    </Grid>
</ContentPage.Content>

请注意，对于 iO，您需要使用“/”创建路径，而对于 WinPhone/UWP，您需要使用“\”。

【讨论】：

【解决方案4】：

您应该在 OnPlatform 标签中指定按钮的 Image 属性，以便为每个平台提供不同的路径。这是 Box View 的示例，您可以尝试对 Button Image 属性进行相同的操作。

<BoxView HorizontalOptions="Center">
      <BoxView.Color>
        <OnPlatform x:TypeArguments="Color" 
          iOS="Green" 
          Android="#738182" 
          WinPhone="Accent" />
      </BoxView.Color>
      <BoxView.WidthRequest>
        <OnPlatform x:TypeArguments="x:Double" 
          iOS="30" 
          Android="40" 
          WinPhone="50" />
      </BoxView.WidthRequest>
 </BoxView>

【讨论】：