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＆gt;资源＆gt;可绘制

Answer 1

对于UWP中的Xamarin表单，图像必须位于根项目目录中（而不是在Assets中），并且构建操作设置为Content。

然后，图像将像在Xamarin Forms中的Android和iOS一样工作。

Answer 2

在UWP中你可以使用

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

根据以下屏幕截图

，图像位于Assets文件夹中

Answer 3

对于UWP Xamarin表格：

在根目录中创建一个名为“ scale-100”的文件夹，然后将所有图像放入其中。
指定扩展名为ex <Image Source="myimage.png"/>的图片名称

您还可以按照此Link

的指定创建“ scale-xxx”

Answer 4

显然，您需要在uwp和android中使用图片，因此这是我的解决方案：

用xaml声明图像

<Image x:Name="kitty"/>

在pcl项目中添加“资源”文件夹
在“资源”中添加“图片”文件夹
粘贴图像并转到图像属性（右键单击>属性）
将“构建操作”更改为“嵌入式资源（microsoft documentation）
将此添加到您的页面代码中：

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 5

在UWP项目中创建一个名为Resources的文件夹，将带有Content的图像作为构建动作放置在其中

resource folder

然后使用此MarkupExtension

var result = db.Images
    .Include(m => m.Tags)
    .Select(m => new
    {
        Image = m,
        Matches = m.Tags.Count(n => tagsList.Any(o => o == n.Tag))
    })
    .Where(m => m.Matches > 0)
    .OrderByDescending(m => m.Matches)
    .ToList();

将标记扩展名添加为xaml命名空间并像这样使用

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);
        }
    }
}

现在您可以在所有平台上对相同的图像路径使用相同的语法

UWP XamarinFormsPrewiew Android Demo

Answer 6

您可以创建一个文件夹并使用Custom Renderer来更改路径，如下所示：

[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);
    }
}

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

6 个答案: