如何在 Xamarin.Forms UWP 中使用圖像？

Question

我目前正在 Xamarin.Forms UWP 中創建一個示例系統。 我想知道為什么在 UWP 部分中調用圖像的代碼在 Android 中工作時似乎無法正常工作。 我還想將圖像設置為背景，將圖像設置為按鈕。

我該如何編碼才能使其在兩個平台上都能正常運行？

這是我使用的代碼：

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
         xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
         x:Class="XamarinFormsDemo.Views.LoginPage"
         BackgroundImage="bg3.jpg"
         Title="MainPage">
  <Label Text="{Binding MainText}" VerticalOptions="Center" HorizontalOptions="Center" />

  <StackLayout VerticalOptions="Center"
             Padding="40">
    <Image Source="ebmslogo1.png"/>

    <StackLayout Padding="0,50,0,0">

      <Entry x:Name="txtUserName"
             Placeholder="Username"
             x:Hint="Username"
             BackgroundColor="Black"
             TextColor="White"/>

  <Entry x:Name="txtPassword"
         Placeholder="Password"
         IsPassword="true"
         BackgroundColor="Black"
         TextColor="White"/>

      <Button Text="LOG IN"
          FontSize="14"
         BackgroundColor="Teal"
         Clicked="NavigateButton_OnClicked"/>

    </StackLayout>

  </StackLayout>

</ContentPage>

我的圖像位於.Droid > Resources > drawable

Answer 1

對於 UWP 中的 Xamarin Forms，圖像必須位於項目根目錄（而不是 Assets）中，並將構建操作設置為 Content。

然后圖像將在 Xamarin Forms 中像在 Android 和 iOS 中一樣工作。

Answer 2

對於 UWP Xamarin 表單：

1. 在根目錄中創建名為“scale-100”的文件夾，然后將所有圖像放入其中。
2. 使用擴展名指定圖像名稱，例如： <Image Source="myimage.png"/>

您還可以從此鏈接中指定創建“scale-xxx”

Answer 3

顯然你需要在 uwp 和 android 中使用圖像，所以這里是我的解決方案：

1. 在 xaml 中聲明圖像

<Image x:Name="kitty"/>

2. 在 pcl 項目中添加一個“Resources”文件夾
3. 在“資源”中添加“圖像”文件夾
4. 粘貼圖像並轉到圖像屬性（右擊>屬性）
5. 將“構建操作”更改為“嵌入式資源（ 微軟文檔）”
6. 在您的頁面代碼中添加：

kitty.Source = ImageSource.FromResource("stackoverflow.Resources.Images.kitty.png", typeof(MainPage).Assembly);

優勢：

• 您可以多次使用相同的圖像，並且不需要在每個項目中復制

缺點：

• 不知道能不能用在MVVM項目中

如果您只想使用您的 uwp 項目而不是另一個，只需將一個文件夾添加到“資產”並讓您像這樣使用 xaml 源

<Image x:Name="kitty" Source="Assets/Images/kitty.png"/>

Answer 4

在 UWP 項目中創建一個名為 Resources 的文件夾，將圖像放在那里，內容作為構建動作

然后使用這個 MarkupExtension

using System;
using Xamarin.Forms;
using Xamarin.Forms.Xaml;

namespace XamarinFormsMoshCourse.MarkupExtensions
{
    [ContentProperty(nameof(Source))]
    public class PlatformResourceImageExtension : IMarkupExtension
    {
        public string Source { get; set; }

        public object ProvideValue(IServiceProvider serviceProvider)
        {
            if (String.IsNullOrWhiteSpace(Source)) return null;

            string imageSource = String.Empty;

            switch (Device.RuntimePlatform)
            {
                case Device.iOS:
                    {
                        imageSource = Source;
                        break;
                    }
                case Device.Android:
                    {
                        imageSource = Source;
                        break;
                    }
                case Device.UWP:
                    {
                        imageSource = String.Concat("Resources/", Source);
                        break;
                    }
            }
            return ImageSource.FromFile(imageSource);
        }
    }
}

添加標記擴展文件夾作為 xaml 命名空間並像這樣使用

     <Button ImageSource="{local:PlatformResourceImage clock.png}"/>
        <Image Source="{local:PlatformResourceImage clock.png}"/>

現在您可以在所有平台上對相同的圖像路徑使用相同的語法

Answer 5

您可以創建一個文件夾並使用自定義渲染器來更改路徑，如下所示：

[assembly: ExportRenderer(typeof(Image), typeof(CustomImageRenderer))]

public class CustomImageRenderer : ImageRenderer
{
    protected override void OnElementChanged(ElementChangedEventArgs<Image> e)
    {
        if(e.NewElement != null)
        {
            var source = e.NewElement.Source;
            if(source is FileImageSource fileImageSource)
            {
                fileImageSource.File = $"Assets/{fileImageSource.File}";
            }
        }      
        base.OnElementChanged(e);
    }
}

Answer 6

在 UWP 中，您可以使用

img.Source = new BitmapImage(new Uri("ms-appx:///Assets/Logo.png"));

根據以下屏幕截圖，圖像位於 Assets 文件夾中