在通用Windows应用程序中，如果视图模型中的属性发生更改，如何使用xaml和数据绑定更改按钮的背景颜色

Question

通用Windows应用程序不支持数据触发器。

没有数据触发器，仅当视图模型中的布尔属性发生变化时，如何才能使用xaml和数据绑定更改按钮的背景颜色？

例如，给出此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;
}

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

我只能使用VisualStateManager管理器使其对一个按钮起作用：

<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>

但是通过将多个按钮绑定到视图模型中的不同属性，此方法不起作用。

Answer 1

您可以在以下链接中查看我以前的回答。 Delete button on ListView items

您只需要创建一个将Boolean转换为SolidColorBrush的转换器。例如：

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绑定中。

<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>

Answer 2

转换器的替代方法是附加属性。如果应该更改多个属性或需要访问视图模型（通过控件的DataContext）来决定如何更改用户界面属性，则很有用。

这是一个简单的示例：

public class IsFavoriteBehavior
{
    public static bool GetIsFavorite(DependencyObject obj)
    {
        return (bool)obj.GetValue(IsFavoriteProperty);
    }

    public static void SetIsFavorite(DependencyObject obj, bool value)
    {
        obj.SetValue(IsFavoriteProperty, value);
    }

    public static readonly DependencyProperty IsFavoriteProperty =
        DependencyProperty.RegisterAttached("IsFavorite", typeof(bool), typeof(Button), new PropertyMetadata(false, (o, e) =>
        {
            var button = o as Button;

            if (button == null)
                return;

            if ((bool)e.NewValue)
            {
                button.Background = (SolidColorBrush)Application.Current.Resources["HighlightBackgroundColorBrush"];
                button.Foreground = (SolidColorBrush)Application.Current.Resources["HighlightTextColorBrush"];
            }
            else
            {
                button.Background = (SolidColorBrush)Application.Current.Resources["NormalBackgroundColorBrush"];
                button.Foreground = (SolidColorBrush)Application.Current.Resources["NormalTextColorBrush"];
            }

            o.SetValue(IsFavoriteProperty, e.NewValue);
        }));
}

它可以在XAML中这样使用：

<Button Name="FavoriteButton" Content="Favorite" local:IsFavoriteBehavior.IsFavorite="{x:Bind ViewModel.Favorite, Mode=OneWay}" >

Answer 3

一个人可以将带有背景色笔刷的属性直接放入视图模型中。

例如，在视图模型中：

SolidColorBrush IsOnABackground
{
    get
    {
        if(IsOnA)
            return (SolidColorBrush)Application.Current.Resources["HighlightBackgroundColorBrush"];
        else
            return (SolidColorBrush)Application.Current.Resources["NormalBackgroundColorBrush"];
    }
}

bool isOnA = false;
bool IsOnA
{
    set
    {
        if (isOnA != value)
        {
            isOnA = value;

            OnPropertyChanged("IsOnA");
            OnPropertyChanged("IsOnABackground");
        }
    }
    get { return isOnA; }
}

和在XAML中：

<Button Name="ButtonA" Content="A" Background="{x:Bind ViewModel.IsOnABackground, Mode=OneWay}" />