Question

我对MVVM模式有疑问。我有一个带有按钮的页面。我为Button创建了一个LoginCommand，并为该命令创建了一个ViewModel。现在，如果LoginCommand成功，我希望按钮更改为注销按钮。

我只是从MVVM开始，所以我不知道如何开始处理它。

谢谢，雅各布

Answer 1

您还可以在按钮上使用DataTrigger。根据属性“已认证”，按钮的文本属性可以是“登录”或“注销”。

Xaml代码：

<Button 
    Text="Login" 
    HorizontalOptions="CenterAndExpand"
    VerticalOptions="CenterAndExpand"
    Command="{Binding Login}">
    <Button.Triggers>
        <DataTrigger TargetType="Button" 
                     Binding="{Binding Authenticated}" 
                     Value="True">
           <Setter Property="Text" Value="Logout" />
        </DataTrigger>
    </Button.Triggers>
</Button>

查看模型代码：

private bool _authenticated;

    public bool Authenticated
    {
        get => _authenticated;
        set
        {
            _authenticated = value;
            OnPropertyChanged(nameof(Authenticated));
        }
    }

    public ICommand Login => new Command(() =>
    {
        //Logic to authenticate user
        Authenticated = !Authenticated;
    });

Answer 2

因此，我假设您需要一个用于“登录”和“注销”的按钮？

<Button Content="{Binding ButtonContent}" Command="{Binding ClickCommand}"/>

然后在您的视图模型中：

private string _ButtonContent;
public string ButtonContent
{
    get { return _ButtonContent;?? (_ButtonContent = "Login"); }
    set
    { 
        _ButtonContent = value;
        NotifyPropertyChanged("ButtonContent"); 
    }
 }

private ICommand _ClickCommand;
public ICommand ClickCommand
{
    get { return _ClickCommand ?? (_ClickCommand = _LoginCommand); }
    set
    {
        _ClickCommand = value;
        NotifyPropertyChanged("ClickCommand");
    }
 } 

private ICommand _LoginCommand = new RelayCommand(f => Login());
private ICommand _LogoutCommand = new RelayCommand(f => Logout());

private void Login()
{
    // Do your Login stuff here
    // Create if statement for when to Login is not completed succesfully
    // switch the button   
    ButtonText = "Logout";
    ClickCommand = LoginCommand;
}

private void Logout()
{
    // Do your Logout stuff here

    // switch the button   
    ButtonText = "Login";
    ClickCommand = LogoutCommand;
}

为此，您需要实现NotifyPropertyChanged()，以便视图模型知道某些属性已更改。

Answer 3

取决于您的按钮布局。如果它们是两个不同的按钮，则需要更改可见性。如果只是文本，则只需更改text属性即可。

下面是一个简单的示例，可通过更改文本在一个按钮上实现登录/注销：

XAML

<Button
    Text="{Binding ButtonText}"
    Command="{Binding OnButtonClickCommand}"/>

C＃（ViewModel）

private bool isLoggedIn = false;

private ICommand onButtonClickCommand;
public ICommand OnButtonClickCommand => onButtonClickCommand ?? (onButtonClickCommand = new Command(OnButtonClick));

private string buttonText = "Login";
public string ButtonText
{
    get => buttonText;
    set 
    {
        buttonText = value;
        OnPropertyChanged();
    }
}

private void OnButtonClick()
{
    if ((!isLoggedIn) && (Login()))
    {
        isLoggedIn = true;
        ButtonText = "Logout";
    }
    else
    {
        Logout();
        isLoggedIn = false;
        ButtonText = "Login";
    }
}

在Xamarin中的登录按钮上实现MVVM

3 个答案: