图像未显示（Xamarin 表单）

Question

我已经在屏幕上显示了除图像之外的数据现在我还想查看图像，因为我可以看到所有数据，例如 id 名称等，以下是代码： 我需要在哪里进行哪些更改？

第 1 页 XAML C 清晰代码：（此页面上的更改？）

 public partial class MainPage : ContentPage
    {
        private static readonly HttpClient client = new HttpClient();
        public UserResponse result;
        public String test;
        public MyUser user;
        public MainPage()
        {
            InitializeComponent();
            //     Task.Run(async () => await GetinfoAsync());  
            _ = GetinfoAsync();
        }
        public async Task GetinfoAsync()
        {
            var responseString = await client.GetStringAsync("https://reqres.in/api/users/2");

            result = JsonConvert.DeserializeObject<UserResponse>(responseString); 

            if (result != null)
            {
                Device.BeginInvokeOnMainThread(() =>
                {
                    test = dis.Text = "Id:- " + result.Data.id + "\nEmail:- " + result.Data.email + "\nFirst Name:- " + result.Data.first_name + "\nLast Name:- " + result.Data.last_name + "\nImage:- " + result.Data.avatar; dis.Text = test;
                });
            }
        }

        private async void click_me(Object sender, EventArgs args)
        {
            await this.Navigation.PushAsync(new Data(result));
        }

第 2 页 XAML C 语言代码：（此页面上的更改？）

public partial class Data : ContentPage
    {

        private MyUser _obj;
        public MyUser obj
        {
            get { return _obj; }
            set
            {
                _obj = value;
                OnPropertyChanged();
            }
        }

        public String show;

        public Data(UserResponse result)
        {
            //show = test;
            InitializeComponent();
            obj = result.Data;
            // displaylabel.Text = test;

        }

用于设计的第 2 页 XAML 代码：

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:d="http://xamarin.com/schemas/2014/forms/design"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             mc:Ignorable="d"
             x:Class="demo.Data" x:Name="MyPage" >
    <ContentPage.Content >

        <StackLayout Padding="20">
            <Label Text="Id" TextColor="Red" />
            <Editor BindingContext="{x:Reference Name=MyPage}" Text="{Binding obj.id}"   IsReadOnly="True" />
            <Label Text="First Name" TextColor="Red"/>
            <Editor BindingContext="{x:Reference Name=MyPage}" Text="{Binding obj.first_name}" IsReadOnly="True"/>
            <Label Text="Last Name" TextColor="Red"/>
            <Editor BindingContext="{x:Reference Name=MyPage}" Text="{Binding obj.last_name}" IsReadOnly="True"/>
            <Label Text="Email" TextColor="Red"/>
            <Editor BindingContext="{x:Reference Name=MyPage}" Text="{Binding obj.email}" IsReadOnly="True"/>
            <Editor BindingContext="{x:Reference Name=MyPage}" Text="Image" IsReadOnly="True"/>
            <Image BindingContext="{x:Reference Name=MyPage}" Source="{Binding obj.avatar}"/>



        </StackLayout>

    </ContentPage.Content>

</ContentPage>

Answer 1

由于obj.avatar 的值是字符串类型，而ImageSource 的Source 必须是ImageSource 类型。为此使用转换器。

转换器代码

将它添加到与 Data 类相同的命名空间中。

namespace demo
{
    public class ImageUriConverter : IValueConverter
    {
        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
        {
            if (value != null)
            {
                return ImageSource.FromUri(new Uri(value.ToString()));
            }

            return null;
        }

        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
        {
            return value;
        }
    }
}

在页面资源中为你的转换器设置静态资源

数据页 Xaml

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:d="http://xamarin.com/schemas/2014/forms/design"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    xmlns:local="clr-namespace:demo"
    x:Class="demo.Data" x:Name="MyPage" >
    <ContentPage.Resources>
        <local:ImageUriConverter x:Key="imageConverter"></local:TestConverter>
    </ContentPage.Resources>

通过绑定使用转换器

<Image HeightRequest="300" Source="{Binding obj.avatar, Converter={StaticResource imageConverter}}"/>

Answer 2

您需要为 ImageSource 创建另一个图像属性，如下所示：

private ImageSource img;
    public ImageSource Img
    {
        get { return img; }
        set
        {
            img = value;
            OnPropertyChanged();
        }
    }

private UserDTO Obj;
    public UserDTO obj
    {
        get { return Obj; }
        set
        {
            Obj = value;
            OnPropertyChanged();
        }
    }

现在

 public Data(UserResponse result)
    {
        //show = test;
        InitializeComponent();
        obj = result.Data;
        if (!string.IsNullOrEmpty(obj.avatar))
        {
            Img = await getImageSource(obj.avatar);
        }

    }

并将 Img 属性绑定到您的 XAML 代码，如下所示：

<StackLayout Padding="20, 60">
        <Label Text="Id" TextColor="Red" />
        <Editor BindingContext="{x:Reference Name=MyPage}" Text="{Binding obj.id}"   IsReadOnly="True" />
        <Label Text="First Name" TextColor="Red"/>
        <Editor BindingContext="{x:Reference Name=MyPage}" Text="{Binding obj.first_name}" IsReadOnly="True"/>
        <Label Text="Last Name" TextColor="Red"/>
        <Editor BindingContext="{x:Reference Name=MyPage}" Text="{Binding obj.last_name}" IsReadOnly="True"/>
        <Label Text="Email" TextColor="Red"/>
        <Editor BindingContext="{x:Reference Name=MyPage}" Text="{Binding obj.email}" IsReadOnly="True"/>
        <Editor BindingContext="{x:Reference Name=MyPage}" Text="Image" IsReadOnly="True"/>
        <Image BindingContext="{x:Reference Name=MyPage}" Source="{Binding Img}" HeightRequest="100" WidthRequest="100"/>



    </StackLayout>

添加以下方法获取图片来源：

public async Task<ImageSource> getImageSource(string url)
    {
        byte[] byteArray = Client.DownloadData(url);
        return ImageSource.FromStream(() => new MemoryStream(byteArray));
    }

现在在 Img 中获取图像

Img = 等待 getImageSource(obj.avatar);

输出：

希望对你有帮助

谢谢