Внедрить MVVM на кнопке входа в Xamarin

Question

У меня есть вопрос относительно шаблона MVVM.У меня есть страница с кнопкой.Я создал LoginCommand для Button и ViewModel для обработки команды.Теперь я хочу, чтобы кнопка сменилась на кнопку выхода из системы, если LoginCommand был успешным.

Я только начинаю с MVVM, поэтому я не знаю, как мне начать обрабатывать это.

Спасибо, Якоб

Answer 1

Зависит от вашей раскладки кнопок.Если это две разные кнопки, вы захотите изменить видимость.Если это просто текст, вы можете просто изменить свойство 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";
    }
}

Answer 2

Вы также можете использовать 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 3

Итак, я полагаю, вы хотите одну кнопку для входа и выхода?

<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 () , чтобы модель представления знала, что какое-то свойство изменилось.