TextBlock in UserControl always gets style of light theme

1264
4
03-30-2021 01:47 AM
alehmann
New Contributor III

I have a user control like this (simplified):

 

<UserControl>
    <Grid>
        <StackPanel Grid.Row="0" Orientation="Horizontal">
            <TextBlock
                Grid.Row="0"
                VerticalAlignment="Center"
                FontSize="12"
                Style="{DynamicResource Esri_TextBlockH4}"
                Text="{Binding Title}" />
            </TextBlock>
        </StackPanel>
    </Grid>
</UserControl>

 

This control is constructed in code behind and assigned to the Header property of an Expander:

 

<Expander Header="{Binding Header}"
           Style="{DynamicResource Esri_ExpanderBorderless}">
    ...
</Expander>

 

The problem is that the textblocks inside the expander (and on the header) do not get the correct brushes for dark mode:

ArneLehmann2_0-1617093758024.png

As you can see, the controls above the expander behave as expected: The text blocks (1), text boxes (2) and comboboxes (3) all change appearance accordingly to the theme. But the text blocks in the expander do not (4, 5). Other controls inside the expander do work correctly (6, 7).

Apart from the user control everything else is not styled explicitly but supposed to pick up the default Esri styles.

The views above the expander and inside the expander are constructed dynamically in code behind - but both exactly the same way. Is there something I'm missing here?

 

Tags (3)
0 Kudos
4 Replies
MichaelSnook
Occasional Contributor III

I'm having the exact same problem with AutoCompleteComboBox controls on a dockpane.  No matter what I configure the colors with they are always black text/white background and the dropdown colors are white background with grey text.  Any help would be great!

0 Kudos
CharlesMacleod
Esri Regular Contributor

do u mind providing your usercontrol xaml or some xaml that provides a repro and I'll forward to the UI team

0 Kudos
alehmann
New Contributor III

Hi @CharlesMacleod, thanks for getting back to me on this. I prepared a small repro project that demonstrates the problem. I admit that it's a bit convoluted in how the UI is constructed, but I don't see how it's doing anything wrong. For reference, this is what the control looks like in light theme and dark theme:

control in light modecontrol in light modecontrol in dark modecontrol in dark mode

0 Kudos
vanesch
New Contributor

It looks like the TextBlock inside the Expander is inheriting the Expander's specified foreground color whereas the TextBlock sitting by itself is inheriting the foreground color of one of our Window controls.

You can try something like this.

      var expander = new Expander();
      expander.Foreground = System.Windows.Media.Brushes.Green;
     
      System.Windows.Style regularText = System.Windows.Application.Current.TryFindResource("RegularText") as System.Windows.Style;
      
      var headerText = new TextBlock { Text = $"Expander-Header {ContentObject}" };
      headerText.Style = regularText; // text will be green otherwise
      expander.Header = headerText;

      var content = new TextBlock { Text = $"In Expander {ContentObject}" };
      content.Style = regularText; // text will be green otherwise
      expander.Content = content;

 

0 Kudos