c# - 图像未显示(Xamarin 表单)
问题描述
我已经在屏幕上显示了除图像之外的数据现在我还想查看图像,因为我可以看到所有数据,例如 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>
解决方案
您需要为 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);
输出 :
希望对你有帮助
谢谢
推荐阅读
- laravel - 如何修复 Laravel 十进制数问题
- r - R 混淆矩阵误差数据和参考因素同级别
- matplotlib - 从轮子为 aws lambda 安装 matplotlib
- sql - 从表中选择最近 3 个连续状态为失败的记录
- mysql - 如何在MYSQL中按正则表达式按组选择计数数据?
- django - ModuleNotFoundError:没有名为“注册”的模块
- amazon-s3 - 带有 CSV 扩展名的 Redshift 卸载命令
- javascript - 简单的实际示例,查看从节点 10 到节点 12 及更高版本的更快的异步函数和承诺
- javascript - 在javascript中使用替换函数
- javascript - 导入 PropTypes 为组件设置颜色