xamluwpthemeshigh-contrast

How to set TextBlock background color for HighContrast Theme in UWP

In Microsoft UWP application I tried to set a TextBlock background color using Grid in XAML. It was okay for default theme. But When I enable HighContrast Theme, only the Filled Text portion is black color; while remaining portion of the TextBlock is changed according to HighContrast Theme. I also tried with Border but the problem still occurs. I also tried with Style property, same issue.

Can anyone help me to fix this issue?

<Grid Height="50" Width="500" Background="{ThemeResource SystemColorHighlightColor}">
        <TextBlock Text="High Contrast" Width="250" FontSize="20" VerticalAlignment="Center" HorizontalAlignment="Center"/>
    </Grid>

Check the output image if you want a clear vision

Comparison with system behavior

Solution

  • How to set c color for HighContrast Theme in UWP

    The above behavior is by-design, and the TextBlock background was controlled by system. If you want to edit it, please go Setting page to find High contrast Setting -> Background. And edit Background will change TextBlock background in HighContrast model.

    enter image description here

    And if you want to make Grid has same color, please keep Selected Text color same as Background color.

    Update

    In general, we often set the Grid background as ApplicationPageBackgroundThemeBrush that could keep the the textblock background same as the Grid, then avoid the show the black block.

    <Grid
    Width="500"
    Height="50"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
    >
    <TextBlock
        Width="250"
        HorizontalAlignment="Center"
        VerticalAlignment="Center"
        FontSize="20"
        SelectionChanged="TextBlock_SelectionChanged"
        Text="High Contrast"
        />
</Grid>

    Update 1

    Please check TextBlock HighContrastAdjustmen property. if we set it as None , the black block will dismiss. 

    <Grid
    Width="500"
    Height="50"
    Background="{ThemeResource SystemColorHighlightColor}"
    >
    <TextBlock
        Width="250"
        HorizontalAlignment="Center"
        VerticalAlignment="Center"
        FontSize="20"
        Foreground="Black"
        HighContrastAdjustment="None"
        Text="High Contrast"
        Visibility="Visible"
        />
</Grid>