如何在Xamarin表单中使用绑定发送数据和执行命令？

问题描述

我试图显示ImageButton并将其与绑定图像源一起传递，并且当我单击按钮时，发出命令并转到想要的网页

我正在尝试使用MVVM并将数据从ImageButton发送到viewmodel

MainPage.xaml：

MainPage.xaml.cs：

namespace BindingPrueba
{
    [XamlCompilation(XamlCompilationoptions.Compile)]
    public partial class MainPage : ContentPage
    {
        public MainPage()
        {
            InitializeComponent();
        }
    }
}

viewmodel.cs：

namespace BindingPrueba
{
    public class viewmodel
    {
        public string ImageSource { get; set; }
        public string Website { get; set; }

        public viewmodel()
        { }

        public void launcWeb(string websiteUrl)
        {
            websiteUrl = "facebook.com";
            Device.OpenUri(new Uri(websiteUrl));
        }
    }
}

解决方法

将命令属性添加到您的视图模型：

 public class ViewModel
    {
        public string ImageSource { get; set; }
        public string Website { get; set; }
        public Command OpenAppCommand { get; set; }

        public ViewModel()
        {
            OpenAppCommand = new Command(launcWeb);
        }

        public void launcWeb()
        {
            var websiteUrl = "facebook.com";
            Device.OpenUri(new Uri(websiteUrl));
        }
    }

如果要将CommandParameter传递给命令以使用lanchWeb(string websiteUrl)，请执行以下操作：

  public class ViewModel
{
    public string ImageSource { get; set; }
    public string Website { get; set; }
    public Command<string> OpenAppCommand { get; set; }

    public ViewModel()
    {
        OpenAppCommand = new Command<string>(launcWeb);
    }

    public void launcWeb(string websiteUrl)
    {
        websiteUrl = "facebook.com";
        Device.OpenUri(new Uri(websiteUrl));
    }
}

可以从您的CommandParameter设置xaml。

,

那呢？代替使用ImageButton，使用包含带有GestureRecognizer的图像的框架。

            <Frame Style="{DynamicResource FrameButton}">
                <Image Source="{Binding SomeSource}">
                    <Image.GestureRecognizers>
                        <TapGestureRecognizer Command="{Binding CommandFromVM}"
                                              CommandParameter="{Binding SomeSource}"/>
                    </Image.GestureRecognizers>
                </Image>
            </Frame>

或者仅使用ImageButton并使用CommandParameter属性

,

0。其他有价值的设置

首先，我强烈建议您将x:DataType元素添加到顶层ContentPage中，以获取更多详细信息。这应该带来很多好处，但是我发现的关键是IDE能够识别您要绑定的属性是否确实存在。

您的示例应类似于：

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="cir-namespace:BindingPrueba"
             x:Class="BindingPrueba.MainPage"
             x:DataType="local:ViewModel">

1。修改您的视图模型以了解如何将更改通知UI

接下来的关键部分是您将要实现INotifyPropertyChanged，以便对ViewModel类进行的任何更改都将更新UI。 here。

2。实际设置您的财产

public ViewModel()
{
    ImageSource = ImageSource.FromFile("my path to file");
}

3。对您的Command进行相同操作

希望现在，如果您遵循步骤0，那么IDE应该清楚地说明您在OpenAppCommand上没有定义ViewModel。如果您添加了它，那么您应该能够在您的课程中触发操作。

例如（在ViewModel内部）

public Command OpenAppCommand { get; }


public ViewModel()
{
    OpenAppCommand = new Command(() => Device.OpenUri(new Uri(this.Website)));
}

请注意，如果仅在构造函数中进行更新，则不必严格实现INotifyPropertyChanged，但这是一个好习惯。