在通用 Windows 应用程序中，如果视图模型中的属性发生更改，如何使用 xaml 和数据绑定更改按钮的背景颜色 [英] In universal windows apps, how to change the background color of a button using xaml and databinding if a property in the view model changes

问题描述

通用 Windows 应用不支持数据触发器.

Universal windows apps don't support data triggers.

如果没有数据触发器，如何仅在视图模型中的布尔属性更改时使用 xaml 和数据绑定更改按钮的背景颜色?

Without data triggers, how can I change the background color of a button using xaml and data binding only when a boolean property in the view model changes?

例如给定此 XAML:

For example given this XAML:

<StackPanel>
    <Button Name="ButtonA" Click="ButtonA_Click" Content="A" />
    <Button Name="ButtonB" Click="ButtonB_Click" Content="B" />
    <Button Name="ButtonC" Click="ButtonC_Click" Content="C" />
</StackPanel>

后面有这个代码

private void ButtonA_Click(object sender, RoutedEventArgs e)
{
    Model.IsOnA = !Model.IsOnA;
}

private void ButtonB_Click(object sender, RoutedEventArgs e)
{
    Model.IsOnB = !Model.IsOnB;
}

private void ButtonC_Click(object sender, RoutedEventArgs e)
{
    Model.IsOnC = !Model.IsOnC;
}

当视图模型中的相应属性发生更改时，使用数据绑定更改按钮背景颜色的最佳方法是什么?

What is the best approach to change the background color of the buttons using data binding when the corresponding property in the view model is changed?

我仅使用 VisualStateManager 管理器就可以让它对一个按钮起作用:

I was able to make it work for one button only using the VisualStateManager manager:

<VisualStateManager.VisualStateGroups>
    <VisualStateGroup>
        <VisualState>
            <VisualState.StateTriggers>
                <StateTrigger IsActive="{x:Bind Model.IsOnA, Mode=OneWay}" />
            </VisualState.StateTriggers>
            <VisualState.Setters>
                <Setter Target="ButtonA.Background" Value="Red"></Setter>
                <Setter Target="ButtonA.Foreground" Value="White"></Setter>
            </VisualState.Setters>
        </VisualState>
    </VisualStateGroup>
</VisualStateManager.VisualStateGroups>

但是对于绑定到视图模型中不同属性的多个按钮，这种方法不起作用.

But with multiple buttons that bind to different properties in the view model this approach is not working.

推荐答案

您可以在以下链接中查看我之前的回答.ListView 项目上的删除按钮

You can check my previous answer in the following link. Delete button on ListView items

您只需要创建一个转换器，将布尔值转换为 SolidColorBrush.例如:

You just need to create a converter which converts Boolean to SolidColorBrush. For example:

public class BooleanToColorConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, string language)
    {
        return (value is bool && (bool)value) ? new SolidColorBrush(Colors.Red) : new SolidColorBrush(Colors.Green);
    }

    public object ConvertBack(object value, Type targetType, object parameter, string language)
    {
        throw new Exception("Not Implemented");
    }
}

并将其添加到您的 Xaml 绑定中.

And to add it to your Xaml Binding.

<Page.Resources>
    <local:BooleanToColorConverter x:Key="ColorConverter"/>
</Page.Resources>

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <ListView ItemsSource="{x:Bind Activities}">
        <ListView.ItemTemplate>
            <DataTemplate x:DataType="local:Activity">
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="3*"/>
                        <ColumnDefinition Width="1*"/>
                    </Grid.ColumnDefinitions>
                    <TextBlock x:Name="txt" Text="{x:Bind Name}" Grid.Column="0"/>
                    <Button x:Name="delItem" Click="delItem_Click" Grid.Column="1" Foreground="{x:Bind Visible, Mode=OneWay, Converter={StaticResource ColorConverter}}" Background="Transparent" Margin="100, 0, 0, 0">
                        <SymbolIcon Symbol="Delete"/>
                    </Button>
                </Grid>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>
</Grid>

这篇关于在通用 Windows 应用程序中，如果视图模型中的属性发生更改，如何使用 xaml 和数据绑定更改按钮的背景颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！