PrimaryCommands foreground hover colour?

[Mrtenz]

I'm trying to set the foreground colour of a AppBarButton in the PageHeader's PrimaryCommands. Currently my XAML looks like this:

<controls:PageHeader.PrimaryCommands>
    <AppBarButton Icon="Refresh" Label="Refresh"
                  Click="{x:Bind ViewModel.Refresh}"
                  Foreground="White" />
</controls:PageHeader.PrimaryCommands>

But when hovered the foreground colour is black. How would I change this to white as well?

[dg2k]

When you start setting colors individually as you did with Foreground="White", it's a sippery slope for things to get complicated because the theme setting as a whole and your color setting are not in unison. Why you get black on hover is because your App Theme is Light and the system picks the default background for the Light Theme which is black. If you switch to Default/Dark, the hover will be white.

• As a starting point, see if you can do the setting from \Styles\Custom.xaml. Here is an excerpt for PageHeader control, and you can set this under Light Theme and Default Theme in \Styles\Custom.xaml. Change the Value to suit your requirement (and consistent with the Light and Dark themes).

  <Style TargetType="controls:PageHeader" x:Key="PageHeaderStyle"> <Setter Property="Background" Value="{ThemeResource PageHeaderBackgroundGradient}" /> <Setter Property="Foreground" Value="Black" /> </Style>

• In your XAML page(s), set the Style for PageHeader as follows.

  <c:PageHeader x:Name="pageHeader" Frame="{x:Bind Frame}" Style="{ThemeResource PageHeaderStyle}">

• Although I won't recommend it, to tweak individual AppBarButton as you tried with Foreground, try if RequestedTheme setting does what you want (but remember this will override the norm).

[Mrtenz]

So I've added Style="{ThemeResource PageHeaderStyle}" to the PageHeader control, but the AppBarButton colour was still black when hovered. I managed to fix this by using RequestedTheme="Dark", but is there no way to set the actual Foreground colour when hovered?

[dg2k]

No, you cannot change the hover from the default as things stand without changing the control template. By default what the hover does is:

• For Light Theme -- slightly darken the background of AppBarButton container
• For Dark Theme -- slightly brighten the background of AppBarButton container

Now the tricky bit is if you changed the AppBarButton Foreground as you first indicated, hovering simply resets back the Foreground creating an illusion as if hovering is actually changing the foreground. No, it's simply resetting to the original (before you changed it). This is a source of confusion. If you really want to use a different color scheme for hovering, then you should consider changing the style template for the control (you're effectively modifying the internal Visual State corresponding to the hover state). This, you'll understand, is outside the scope of T10 but of course developers’ prerogative to do whatever.

Perhaps these facts about T10 will dispel the confusion:

• You can style PageHeader's Foreground and Background. More on this in Custom.xaml. AppBarButtons do not inherit the Foreground (while, I think, BackButton and MoreButton do).
• It follows that T10 has nothing to do with AppBarButtons' styling. For AppBarButton, you can easily Edit Template in VS and come up with custom styles (like different hovering backgrounds).
• HamburgerMenu (another T10 control in addition to PageHeader) has more extensive theme support. Again see more in Custom.xaml.

[Mrtenz]

Okay, thanks.