如何在 DataTemplateView 中实现“Xamarin.Forms 两个可绑定属性”?

艾哈迈德·礼萨

我正在研究这种代码

我的 ImageResource 类

[ContentProperty(nameof(Source))]
class ImageResourceExtension : IMarkupExtension
{
  public string Source { get; set; }
  public object ProvideValue(IServiceProvider serviceProvider)
  {
    var newImageSource = ImageSource.FromResource(Source, typeof(ImageResourceExtension).GetTypeInfo().Assembly);
    return newImageSource;
  }
}

我的 ListModel 类

class ListModel
{
   public string IconSource { get; set; }
   public string IconPath { get; set; }
}

我的 MyViewModel 类

class MyViewModel : INotifyPropertyChanged
{
   public List<Models.ListModel> MyListModel { get; }
   public Command MyListCommand { get; }
   public MyViewModel()
   {
      MyListModel = new List<Models.ListModel>()
      {
         new Models.ListModel(){ IconSource="https://example.com/image1",IconPath="MyImage1.jpg"},
         new Models.ListModel(){ IconSource="https://example.com/image2",IconPath="MyImage2.jpg"}
      };
      MyListCommand = new Command(OnListClicked);
   }

   private async void OnListClicked(object value)
   {
      string valueString = value as string;
      await Launcher.OpenAsync(valueString);
   }
 }

我的视图类

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:images="clr-namespace:MyProject.Images"
    xmlns:models="clr-namespace:MyProject.Models"
    xmlns:viewModels="clr-namespace:MyProject.ViewModels"

...

   <ContentPage.BindingContext>
      <viewModels:MyViewModel/>
   </ContentPage.BindingContext>

   <ContentPage.Content>
     <StackLayout BindableLayout.ItemsSource="{Binding MyListModel}">
       <BindableLayout.ItemTemplate>
         <DataTemplate> <!-- line{setup path} -->
           <Image Source="{images:ImageResource Source={Binding Source={RelativeSource AncestorType={x:Type viewModels:MyListModel}}, Path=ImageSource}}">
             <Image.GestureRecognizers>
               <TapGestureRecognizer 
                 NumberOfTapsRequired="1" 
                 Command="{Binding Source={RelativeSource AncestorType={x:Type viewModels:MyListModel}}, Path=MyListCommand}" 
                 CommandParameter="{Binding ImagePath}"/>
             </Image.GestureRecognizers>
           </Image>
         </DataTemplate>
       </BindableLayout.ItemTemplate>
     </StackLayout>
   </ContentPage.Content>

我的问题是如何为我的图像源设置动态或可绑定属性line: {setup path}

如果你能解决这个问题,我真的很感激。谢谢你。

编辑:我忘了添加我的图像Embedded resource在我的共享代码中。

杰西张 -MSFT

您可以使用Value Converters来实现此功能。

假设您的图像放置在Imagesxamarin 表单项目的文件夹中(例如MyFormDemo)。

1.创建EmbeddedToImageSourceConverter.cs

public class EmbeddedToImageSourceConverter: IValueConverter
{


    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        string ResourceId = value.ToString();
        if (String.IsNullOrWhiteSpace(ResourceId))
            return null;
        return ImageSource.FromResource(ResourceId);
    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}

2.在MyViewModel.cs,init的构造函数中IconPath如下(添加MyFormDemo.Images.):

       public MyViewModel()
    {
        MyListModel = new List<ListModel>()
  {
     new ListModel(){ IconSource="https://example.com/image1",IconPath="MyFormDemo.Images.cherry.png"},
     new ListModel(){ IconSource="https://example.com/image2",IconPath="MyFormDemo.Images.love.png"}
  };
        MyListCommand = new Command(OnListClicked);
    }

INotifyPropertyChanged3.实现类接口ListModel

  public class ListModel: INotifyPropertyChanged
{
    public string IconSource { get; set; }
    //public string IconPath { get; set; }

    string _iconPath;
    public string IconPath
    {
        set { SetProperty(ref _iconPath, value); }

        get { return _iconPath; }
    }


    bool SetProperty<T>(ref T storage, T value, [CallerMemberName] string propertyName = null)
    {
        if (Object.Equals(storage, value))
            return false;

        storage = value;
        OnPropertyChanged(propertyName);
        return true;
    }

    protected void OnPropertyChanged([CallerMemberName] string propertyName = null)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }

    public event PropertyChangedEventHandler PropertyChanged;
}

4.在您页面的 xaml 中:

<ContentPage.Resources>
    <MyFormDemo:EmbeddedToImageSourceConverter x:Key="converter">
    </MyFormDemo:EmbeddedToImageSourceConverter>
</ContentPage.Resources>

<ContentPage.BindingContext>
    <viewmodel:MyViewModel></viewmodel:MyViewModel>
</ContentPage.BindingContext>

<ContentPage.Content>
    <StackLayout BindableLayout.ItemsSource="{Binding MyListModel}">
        <BindableLayout.ItemTemplate>
            <DataTemplate>

                <!-- line{setup path} -->
                <Image Source="{Binding IconPath, Converter={StaticResource converter}}"  WidthRequest="60" HeightRequest=" 60" BackgroundColor="Gray">

                </Image>


            </DataTemplate>
        </BindableLayout.ItemTemplate>
    </StackLayout>
</ContentPage.Content>

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

如何定义Xamarin.Forms中彼此更新的两个可绑定属性?

如何在Xamarin Forms中连接两个表?

如何在 Xamarin.Forms 中实现 Android 服务

如何在Xamarin.forms中实现面板功能

如何在Xamarin.Forms中实现INotifyPropertyChanged

如何在 Xamarin Forms for iOS 中实现长按?

如何在Xamarin.Forms中实现连接的动画?

如何在Xamarin.Forms中实现Paypal结帐选项?

如何在 Xamarin Forms 中实现 Instagram 故事?

如何在 Xamarin.Forms 中实现 Google Auth

Xamarin Forms:如何将数据从两个视图模型正确绑定到单个视图?

如何在Xamarin表单中绑定两个控件

如何在 Xamarin.forms 中使用颜色的可绑定属性?

如何在Xamarin.Forms中绑定Picker

如何在Xamarin.Forms中的ListView内绑定列表

Xamarin Forms-如何在ListView中显示/绑定列表?

Xamarin Forms将两个属性从单个控件绑定到不同的上下文

如何检查Xamarin.Forms中IsPropertyChanged方法内可绑定属性的设置?

如何在Xamarin.Forms中为自定义组件创建可绑定命令?

如何在Xamarin Forms中的编辑器中实现占位符?

如何在 Xamarin Forms 中使用 MVVM 在 ListView 中实现增量加载(ItemAppearing)项目?

如何通过可绑定属性设置 Xamarin.Forms Shell 搜索的可见性属性?

如何在knex中添加两个绑定参数?

如何在reactjs中同时绑定两个方法

Xamarin Forms:如何在ListView内绑定Xamarin.forms.Maps的位置值?

如何在Xamarin.Forms中进行可绑定的标记扩展

如何在 xamarin.forms 中的 xaml 中大写/小写 resx 绑定?

如何在xamarin-forms基于xaml的视图类中绑定到此

如何在 Xamarin.Forms 中启用带有绑定的多选列表视图的开关?