Xamarin如何在按钮单击MVVM时更改背景颜色答案

【问题标题】：Xamarin how to change background color on button click MVVMXamarin如何在按钮单击MVVM时更改背景颜色
【发布时间】：2021-01-26 08:29:59
【问题描述】：

我试图在按下按钮时更改堆栈布局的背景颜色。这是堆栈布局：

        <StackLayout Padding="20" x:Name="LayoutTest" BackgroundColor="{Binding BackgroundTest}">
            <Label Text="Background" TextColor="Black" FontSize="Subtitle" FontAttributes="Bold" VerticalOptions="Center"></Label>
            <Frame CornerRadius="10" Padding="10" Margin="0, 0, 0, 10" BackgroundColor="#00A6FF">
                <RadioButton GroupName="colors"></RadioButton>
            </Frame>
            <Frame CornerRadius="10" Padding="10" Margin="0, 0, 0, 10" BackgroundColor="#13CE66">
                <RadioButton GroupName="colors" Command="{Binding ChangeBgColorGreen}"></RadioButton>
            </Frame>
            <Frame CornerRadius="10" Padding="10" Margin="0, 0, 0, 10" BackgroundColor="#FFD185">
                <RadioButton GroupName="colors"></RadioButton>
            </Frame>
            <Frame CornerRadius="10" Padding="10" Margin="0, 0, 0, 10" BackgroundColor="#F95F62">
                <RadioButton GroupName="colors"></RadioButton>
            </Frame>
            <Button Text="Change Color" Command="{Binding ChangeColor}"></Button>
        </StackLayout>

这是我的视图模型：

class SettingsPageViewModel : BaseViewModel
{
    public String BackgroundTest { get; set; }
    public Command ChangeColor { get; }
    public SettingsPageViewModel()
    {
        Title = "Dashboard ";

        ChangeColor = new Command(ChangeBgColor);
    }
    void ChangeBgColor()
    {
        BackgroundTest = "#F95F62";
    }
}

但是，无论何时单击 ChangeColor 按钮，它似乎都不会更改“BackgroundTest”值。我对 MVVM 很陌生，所以不确定如何最好地做到这一点。任何帮助将不胜感激。

【问题讨论】：

标签： c# xamarin xamarin.forms mvvm

【解决方案1】：

在按钮中传递命令参数并从堆栈中删除颜色绑定

<StackLayout Padding="20" x:Name="LayoutTest">
...
<Button Text="Change Color" Command="{Binding ChangeColor}" CommandParameter="{x:Reference LayoutTest}"></Button>

在 ViewModel 中捕获参数

ChangeColor = new Command<object>(ChangeBgColor);
...
void ChangeBgColor(object obj)
{
   if(obj is StackLayout sl)
   {
       sl.BackgroundColor = Color.FromHex("#F95F62");
   }
}

这是一种简单快捷的方法，至于为什么你的代码不工作，你可以尝试两种方式的绑定模式

BackgroundColor="{Binding BackgroundTest,Mode="TwoWay"}"

如果它仍然不起作用，您将需要提高此 BackgroundTest 属性 https://www.c-sharpcorner.com/article/simplifying-mvvm-inotifypropertychanged-on-xamarin-forms/

【讨论】：

【解决方案2】：

您的SettingsPageViewModel 不会在BackgroundTest 属性上引发属性更改通知，因此绑定到该属性的视图将永远不会收到它已更新的通知。

看起来您正在使用 MVVM 框架，因为您是从 BaseViewModel 继承的。通常在这些框架中，您可以调用一些辅助方法来引发属性更改事件。在不知道您使用的是哪个框架的情况下，我无法确切告诉您在此处调用什么，但在 Prism 中，它被称为 SetProperty，它的工作原理如下：

class SettingsPageViewModel : BaseViewModel
{
    private string _backgroundTest;
    public string BackgroundTest
    {
        get => _backgroundTest;
        set => SetProperty(ref _backgroundTest, value);
    }

    public Command ChangeColor { get; }

    public SettingsPageViewModel()
    {
        Title = "Dashboard ";

        ChangeColor = new Command(ChangeBgColor);
    }

    void ChangeBgColor()
    {
        BackgroundTest = "#F95F62";
    }
}

【讨论】：