Avalonia 中 bool 变量通过绑定切换两种样式的实现方式

Avalonia 中布尔类型通过绑定切换两种样式的实现方式

我们的外观虽然是由样式组成的，但是可能你正好在 ViewModel 的地方希望通过某个 bool 变量来切换样式。

零、省流

我们使用了 Classes.red="{Binding !IsOK}" 类似的写法。
"!"取非运算很重要

一、效果

我们搭建了一个这样的 UI，方块的颜色由 ViewModel 的 bool 决定。

二、代码

下面是 axaml 和 code-behind 的部分：

    <Window.Styles>
        <Style Selector="Border.red">
            <Setter Property="Background" Value="Red" />
        </Style>
        <Style Selector="Border.green">
            <Setter Property="Background" Value="Green" />
        </Style>
    </Window.Styles>

    <StackPanel>
        <Border
            Width="100"
            Height="100"
            Classes.green="{Binding !IsOK}"
            Classes.red="{Binding IsOK}" />
        <Button
            HorizontalAlignment="Right"
            VerticalAlignment="Bottom"
            Click="Button_Click"
           />
    </StackPanel>

    private MainWindowViewModel GetViewModel()
    {
        return DataContext as MainWindowViewModel;
    }

    private void Button_Click(object? sender, RoutedEventArgs e)
    {
        var viewModel = GetViewModel();
        viewModel.IsOK = !viewModel.IsOK;
    }

然后是 ViewModel

    public partial class MainWindowViewModel : ViewModelBase
    {
        public string Greeting { get; } = "Welcome to Avalonia!";

        [ObservableProperty]
        private bool _isOK;
    }

三、总结

    <Border
        Width="100"
        Height="100"
        Classes.green="{Binding !IsOK}"
        Classes.red="{Binding IsOK}" />

在 Avalonia 中绑定的值是可以使用 ! 来表示的。