UWP/VB.Net - 根据变量更改绑定按钮颜色

Question

我对 UWP 有点陌生。我花了两天时间寻找这个答案，但还没有找到答案。我知道我可能完全错误地处理这个问题。感谢所有帮助！

我在 App.xaml 文件中创建了 SolidColorBrush StaticResource：

    <Application.Resources>
         <SolidColorBrush x:Key="colorClockStatus" Color="#cae0d5" />
    </Application.Resources>`

我已将此笔刷绑定到几个页面上几个按钮的背景属性。例如，我像这样绑定按钮：

    <Button Background="{StaticResource colorClockStatus}"/>

效果很好，按钮背景是所需的红色。当我更改 StaticResource 的颜色时出现问题。按钮颜色不变。如果我在更改颜色后打开另一个页面，新页面上的按钮将根据需要显示为绿色，但我无法在已打开的页面上获得更改颜色的按钮。

情况是这样的。当用户为'ClockedIn'时，绑定的按钮需要为绿色，当用户下班时，绑定的按钮需要变为红色，反之亦然。这是 App.xaml.vb 文件中的后端代码：

    Public Shared ClockedIn As Boolean = False

    Public Shared Sub SetClockedStatus(ByVal bClockedIn As Boolean)
        ClockedIn = bClockedIn
        With Application.Current
            If bClockedIn Then
                .Resources("colorClockStatus") = Color.FromArgb(255, 202, 224, 213) 'Green
            Else
                .Resources("colorClockStatus") = Color.FromArgb(255, 227, 184, 179) 'Red
            End If
        End With
    End Sub

当用户点击'ClockIn'按钮时，上面的代码被调用。我想我需要一个 INotifyPropertyChanged 事件让 UI 知道 colorClockStatus 属性已更改，因此需要重绘按钮，但我不知道该怎么做用 StaticResource。我也尝试过实现一个 VisualStateManager，并创建两个 SaticResources 之间的按钮切换（这似乎是一种更好的方法），但我不知道如何根据布尔'ClockIn'变量，然后全局实现管理器。

那么如何让 UI 根据布尔变量改变颜色？

谢谢！

更新

我一直在努力解决这个问题，并找到了一个使用 StateTriggerBase class here 的示例。我将此代码改编为适用于布尔值属性。下面是我改编的class：

    Public Class ClockedInTrigger
        Inherits StateTriggerBase
        Private _ClockedIn As Boolean = False

        Public Property ClockedIn As Boolean
            Get
                Return _ClockedIn
            End Get
            Set
                If Not Value.Equals(_ClockedIn) Then
                    _ClockedIn = _ClockedIn
                    SetActive(ClockedIn = _ClockedIn)
                End If
            End Set
        End Property
    End Class

然后，我做了两个，而不是只有一个 StaticResource：

    <Application.Resources>
         <SolidColorBrush x:Key="colorClockInLight" Color="#cae0d5" />
         <SolidColorBrush x:Key="colorClockOutLight" Color="#e3b8b3" />
    </Application.Resources>

然后我添加了一个 VisualStateManager 到我的 MainPage 来测试它：

    <VisualStateManager.VisualStateGroups>
       <VisualStateGroup x:Name="ClockInStates">                
            <VisualState x:Name="vsClockedOut">
                <VisualState.StateTriggers>
                    <local:ClockedInTrigger ClockedIn="False" />
                </VisualState.StateTriggers>
                <VisualState.Setters>
                    <Setter Target="HamburgerButton.Background" Value="{StaticResource colorClockOutLight}" />
                </VisualState.Setters>
            </VisualState>
            <VisualState x:Name="vsClockedIn">
                <VisualState.StateTriggers>
                    <local:ClockedInTrigger ClockedIn="True" />
                </VisualState.StateTriggers>
                <VisualState.Setters>
                    <Setter Target="HamburgerButton.Background" Value="{StaticResource colorClockInLight}" />
                </VisualState.Setters>
            </VisualState>
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>

当我打开程序，按钮是绿色的时候，我真的很兴奋！（默认情况下，按钮是红色的）但令我失望的是，当我下班时按钮并没有变回红色。我使用了调试器并调用了 SetActive(ClockedIn = _ClockedIn) 方法，但 UI 没有改变。我的绑定有问题吗？是否需要调用某种方法来刷新 UI?

Answer 1

为了实现你想要的，我认为你可以利用 StateTrigger 和 InvertBoolConverter 如下所示：

XAML:

<VisualStateManager.VisualStateGroups>
    <VisualStateGroup x:Name="ClockInStates">
        <VisualState x:Name="vsClockedOut">
            <VisualState.StateTriggers>
                <StateTrigger IsActive="{x:Bind ClockedIn, Converter={StaticResource InvertBoolConverter}, Mode=OneWay}" />
            </VisualState.StateTriggers>
            <VisualState.Setters>
                <Setter Target="HamburgerButton.Background" Value="{StaticResource colorClockOutLight}" />
            </VisualState.Setters>
        </VisualState>
        <VisualState x:Name="vsClockedIn">
            <VisualState.StateTriggers>
                <StateTrigger IsActive="{x:Bind ClockedIn, Mode=OneWay}" />
            </VisualState.StateTriggers>
            <VisualState.Setters>
                <Setter Target="HamburgerButton.Background" Value="{StaticResource colorClockInLight}" />
            </VisualState.Setters>
        </VisualState>
    </VisualStateGroup>
</VisualStateManager.VisualStateGroups>

InvertBoolConverter:

Public Class InvertBoolConverter
    Implements IValueConverter

    Public Function Convert(value As Object, targetType As Type, parameter As Object, language As String) As Object Implements IValueConverter.Convert
        Dim boolValue = CBool(value)
        Return Not boolValue
    End Function

    Public Function ConvertBack(value As Object, targetType As Type, parameter As Object, language As String) As Object Implements IValueConverter.ConvertBack
        Dim boolValue = CBool(value)
        Return Not boolValue
    End Function
End Class

您也可以尝试使用 WindowsStateTriggers，它是自定义视觉状态触发器的集合。您可以使用 StateTrigger 和 IsFalseStateTrigger 而不是 InvertBoolConverter。此外，请注意，您需要为 ClockedIn 属性实施 INotifyPropertyChanged 才能使其正常工作。

UWP/VB.Net - 根据变量更改绑定按钮颜色

UWP/VB.Net - Change Bound Button Color Dependent on Variable

vb.net

xaml

visualstatemanager

uwp

uwp-xaml