将方法从代码隐藏转换为ICommand Databinding Xamarin.表格

Question

我在Xamarin中有一个计算器应用程序。Forms和我想实现MVVM。现在，在我拥有MVVM文件夹之前，我在MainPage.xaml.cs中创建了方法。当我创建ViewModel文件夹时，我将MainPage.xaml.cs中的所有代码都放在methods.cs中，而不更改方法本身。当然；resultText"；在当前的环境中不存在，所以我深入搜索了互联网，发现我需要ICommand接口。我花了几个小时研究如何在代码中实现接口，但它对我来说太复杂了，我一句话都听不懂，浪费了几个小时看了数百个教程，但我的大脑无法在代码中获得如何实现它的信息。我所做的唯一一件事就是在类名后面加上：ICommand，所以它在我的代码中生成了2个方法和1个事件，仅此而已，我不知道如何继续。知道吗？

方法.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;
}

}
}

主页.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>

主页.xaml.cs:

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

我很想以某种方式将方法(如OnEqualButton_Clicked或OnClearButton_CClicked(转换为可绑定的命令

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://learn.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/button

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