将方法从代码隐藏转换为 ICommand 数据绑定 Xamarin.Forms

Question

我在 Xamarin.Forms 中有一个计算器应用程序，我想实现 MVVM。现在，在我拥有 MVVM 文件夹之前，我在 MainPage.xaml.cs 中创建了方法。当我创建 ViewModel 文件夹时，我将每个代码从 MainPage.xaml.cs 放到 Methods.cs 而不更改方法本身。当然，当前上下文中不存在“resultText”，所以我在互联网上进行了深入搜索，发现我需要 ICommand 接口。我搜索了几个小时如何在我的代码中实现接口，但它对我来说太复杂了，我一个字也听不懂，浪费了几个小时观看数百个教程，但我的头脑无法理解如何实现它的信息在我的代码中。我唯一做的就是在 class 名称后加上 : ICommand，所以它在我的代码中生成了 2 个方法和 1 个事件，仅此而已，我不知道如何继续。有什么想法吗？

Methods.cs:

namespace Calculator.ViewModel
{
    class Methods : ICommand
    {
        private decimal firstNumber;
        private string operatorName;
        private bool isOperatorClicked;

        public event EventHandler CanExecuteChanged;

        //public event PropertyChangedEventHandler PropertyChanged;

        public void OnNumberButton_Clicked(object sender, EventArgs e)
        {
            var button = sender as Button;
            if (resultText.Text == "0" || isOperatorClicked)
            {
                isOperatorClicked = false;
                resultText.Text = button.Text;
            }

            else
            {
                resultText.Text += button.Text;
            }

        }

        public void OnClearButton_Clicked(object sender, EventArgs e)
        {
            resultText.Text = "0";
        }


        public void OnOperationButton_Clicked(object sender, EventArgs e)
        {
            var button = sender as Button;
            isOperatorClicked = true;
            operatorName = button.Text;
            firstNumber = Convert.ToDecimal(resultText.Text);
        }

        public void OnEqualButton_Clicked(object sender, EventArgs e)
        {
            try
            {
                decimal secondNumber = Convert.ToDecimal(resultText.Text);
                string finalResult = Calculate(firstNumber, secondNumber).ToString("0.##");
                resultText.Text = finalResult;
            }
            catch (Exception)
            {

                throw;
            }
        }

        public decimal Calculate(decimal firstNumber, decimal secondNumber)
        {
            decimal result = 0;
            if (operatorName == "+")
            {
                result = firstNumber + secondNumber;
            }

            else if (operatorName == "-")
            {
                result = firstNumber - secondNumber;
            }

            else if (operatorName == "*")
            {
                result = firstNumber * secondNumber;
            }
            else if (operatorName == "/")
            {
                result = firstNumber / secondNumber;
            }
            return result;
        }

        public bool CanExecute(object parameter)
        {
            return true;
        }

        public void Execute(object parameter)
        {
            OnClearButton_Clicked;
        }
        
    }
}

MainPage.xaml:

<?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="Calculator.MainPage">

    <ContentPage.Padding>
        <OnPlatform x:TypeArguments="Thickness">
            <On Platform="Android" Value="20, 20" > </On>
        </OnPlatform>
    </ContentPage.Padding>

    <ContentPage.Resources>
        <ResourceDictionary>
            <Style x:Key="infostyle" TargetType="Button">
                <Setter Property="WidthRequest" Value="60"/>
                <Setter Property="HeightRequest" Value="60"/>
                <Setter Property="TextColor" Value="White"/>
                <Setter Property="FontSize" Value="25"/>
                <Setter Property="BorderColor" Value="Black"/>
                <Setter Property="BorderWidth" Value="1"/>
                <Setter Property="BackgroundColor" Value="Green"/>
            </Style>
        </ResourceDictionary>
        <ResourceDictionary>
            <Style x:Key="topstyle" TargetType="Button">
                <Setter Property="WidthRequest" Value="60"/>
                <Setter Property="HeightRequest" Value="60"/>
                <Setter Property="TextColor" Value="White"/>
                <Setter Property="FontSize" Value="25"/>
                <Setter Property="BorderColor" Value="Black"/>
                <Setter Property="BorderWidth" Value="1"/>
                <Setter Property="BackgroundColor" Value="Green"/>
            </Style>
        </ResourceDictionary>
        <ResourceDictionary>
                <Style x:Key="rightstyle" TargetType="Button">
                    <Setter Property="WidthRequest" Value="60"/>
                    <Setter Property="HeightRequest" Value="60"/>
                    <Setter Property="TextColor" Value="White"/>
                    <Setter Property="FontSize" Value="25"/>
                    <Setter Property="BorderColor" Value="Black"/>
                    <Setter Property="BorderWidth" Value="1"/>
                    <Setter Property="BackgroundColor" Value="Red"/>
                </Style>
            </ResourceDictionary>
        <ResourceDictionary>
            <Style x:Key="resultstyle" TargetType="Button">
                <Setter Property="FontAttributes" Value="Bold"/>
                <Setter Property="TextColor" Value="Black"/>
                <Setter Property="FontSize" Value="38"/>
                <Setter Property="HorizontalOptions" Value="End"/>
                <Setter Property="VerticalOptions" Value="Center"/>
            </Style>
        </ResourceDictionary>


    </ContentPage.Resources>

    <Grid Padding="0, 0" RowSpacing="10" ColumnSpacing="10">
        <Grid.RowDefinitions>
            <RowDefinition Height="*"></RowDefinition>
            <RowDefinition Height="*"></RowDefinition>
            <RowDefinition Height="*"></RowDefinition>
            <RowDefinition Height="*"></RowDefinition>
            <RowDefinition Height="*"></RowDefinition>
            <RowDefinition Height="*"></RowDefinition>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"></ColumnDefinition>
            <ColumnDefinition Width="*"></ColumnDefinition>
            <ColumnDefinition Width="*"></ColumnDefinition>
            <ColumnDefinition Width="*"></ColumnDefinition>
        </Grid.ColumnDefinitions>

        <ContentView Padding="0, 0, 20, 0" Margin="0, 0, 0, 10" Grid.ColumnSpan="4" BackgroundColor="Brown">
            <Label x:Name="resultText" Text="0" Style="{StaticResource resultstyle}">
                <Label.FontFamily>
                    <OnPlatform x:TypeArguments="x:String">
                        <On Platform="Android">
                        </On>
                    </OnPlatform>
                </Label.FontFamily>
            </Label>
        </ContentView>

        <Button Text="C" x:Name="btnClear" Grid.Column="0" Grid.Row="1" Style="{StaticResource topstyle}" Clicked="{Binding OnClearButton_Clicked}"/>
        <Button x:Name="btnSave" Grid.Column="1" Grid.Row="1" Text="⎚" Style="{StaticResource topstyle}"/>
        <Button Text="/" Grid.Column="2" Grid.Row="1" Style="{StaticResource topstyle}" Clicked= "{Binding OnOperationButton_Clicked}"/>
        <Button Text="÷" Grid.Column="3" Grid.Row="1" Style="{StaticResource rightstyle}"/>

        <Button Text="7" Grid.Column="0" Grid.Row="2" Style="{StaticResource infostyle}" Clicked= "{Binding OnNumberButton_Clicked}"/>
        <Button Text="8" Grid.Column="1" Grid.Row="2" Style="{StaticResource infostyle}" Clicked= "{Binding OnNumberButton_Clicked}"/>
        <Button Text="9" Grid.Column="2" Grid.Row="2" Style="{StaticResource infostyle}" Clicked= "{Binding OnNumberButton_Clicked}"/>
        <Button Text="*" Grid.Column="3" Grid.Row="2" Style="{StaticResource rightstyle}" Clicked="{Binding OnOperationButton_Clicked}"/>

        <Button Text="4" Grid.Column="0" Grid.Row="3" Style="{StaticResource infostyle}" Clicked= "{Binding OnNumberButton_Clicked}"/>
        <Button Text="5" Grid.Column="1" Grid.Row="3" Style="{StaticResource infostyle}" Clicked= "{Binding OnNumberButton_Clicked}"/>
        <Button Text="6" Grid.Column="2" Grid.Row="3" Style="{StaticResource infostyle}" Clicked= "{Binding OnNumberButton_Clicked}"/>
        <Button Text="-" Grid.Column="3" Grid.Row="3" Style="{StaticResource rightstyle}" Clicked="{Binding OnOperationButton_Clicked}"/>

        <Button Text="1" Grid.Column="0" Grid.Row="4" Style="{StaticResource infostyle}" Clicked= "{Binding OnNumberButton_Clicked}"/>
        <Button Text="2" Grid.Column="1" Grid.Row="4" Style="{StaticResource infostyle}" Clicked="{Binding OnNumberButton_Clicked}"/>
        <Button Text="3" Grid.Column="2" Grid.Row="4" Style="{StaticResource infostyle}" Clicked="{Binding OnNumberButton_Clicked}"/>
        <Button Text="+" Grid.Column="3" Grid.Row="4" Grid.RowSpan="2" Style="{StaticResource rightstyle}" Clicked="{Binding OnOperationButton_Clicked}"/>

        <Button Text="." Grid.Column="0" Grid.Row="5" Style="{StaticResource infostyle}" Clicked= "{Binding OnNumberButton_Clicked}"/>
        <Button Text="0" Grid.Column="1" Grid.Row="5" Style="{StaticResource infostyle}" Clicked= "{Binding OnNumberButton_Clicked}"/>
        <Button x:Name="btnEqual" Text="=" Grid.Column="2" Grid.Row="5" Style="{StaticResource infostyle}" Clicked= "{Binding OnEqualButton_Clicked}"/> 



    </Grid>

MainPage.xaml.cs:

namespace Calculator
{
    public partial class MainPage : ContentPage
    {
        public MainPage()
        {
            InitializeComponent();
            BindingContext = new Methods();
        }

我很乐意以某种方式将方法（如 OnEqualButton_Clicked 或 OnClearButton_Clicked 转换为可绑定命令

Answer 1

您需要创建一个视图模型以与 bindingcontext 绑定，在构造函数中初始化命令（代码来自 xamarin 文档）：

class CommandDemoViewModel : INotifyPropertyChanged
{
    double number = 1;

    public event PropertyChangedEventHandler PropertyChanged;

    public CommandDemoViewModel()
    {
        MultiplyBy2Command = new Command(() => Number *= 2);

        DivideBy2Command = new Command(() => Number /= 2);
    }

    public double Number
    {
        set
        {
            if (number != value)
            {
                number = value;
                PropertyChanged?.Invoke(this, new PropertyChangedEventArgs("Number"));
            }
        }
        get
        {
            return number;
        }
    }

    public ICommand MultiplyBy2Command { private set; get; }

    public ICommand DivideBy2Command { private set; get; }
}

这里是文档和示例：

https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/button

https://docs.microsoft.com/en-us/samples/xamarin/xamarin-forms-samples/userinterface-buttondemos/

将方法从代码隐藏转换为 ICommand 数据绑定 Xamarin.Forms

Convert methods from code behind to ICommand Databinding Xamarin.Forms

c#

data-binding

mvvm

xamarin

xamarin.forms