Grid Foreground Disabled Color-CodePudding

I have a simple window with a Grid that has a TextBox. I set IsEnabled on the Grid to False.

<Grid IsEnabled="False">
    <TextBox Text="Foo"/>
    <TextBlock Text = "Bar"/>
    <TextBox Text="Bazz" Foreground ="Orange"/>
</Grid>

XAML Designer shows all three elements are now grayed in response to IsEnabled = false, and if I debug, the text in all three are grayed out in the app. I want to control the value of the grayed foreground state to something darker.

Since the three inner controls retain their color when disabled, it appears WPF conveys "disabled" via an opacity change. Where/how can I override this? It would be great if XAML Designer shows the desired darker text.

CodePudding user response：

Indeed, the deafult style for a TextBox just sets a lower opacity.

<Trigger Property="IsEnabled" Value="false">
    <Setter Property="Opacity" TargetName="border" Value="0.56"/>
</Trigger>

In order to change this, you have to create your own TextBox style or copy the default style and its control template e.g. using Visual Studio or Blend. From there, customize the disabled state by addding setters to the trigger shown above.

<SolidColorBrush x:Key="TextBox.Static.Border" Color="#FFABAdB3"/>
<SolidColorBrush x:Key="TextBox.MouseOver.Border" Color="#FF7EB4EA"/>
<SolidColorBrush x:Key="TextBox.Focus.Border" Color="#FF569DE5"/>
<Style x:Key="TextBoxStyle" TargetType="{x:Type TextBox}">
    <Setter Property="Background" Value="{DynamicResource {x:Static SystemColors.WindowBrushKey}}"/>
    <Setter Property="BorderBrush" Value="{StaticResource TextBox.Static.Border}"/>
    <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
    <Setter Property="BorderThickness" Value="1"/>
    <Setter Property="KeyboardNavigation.TabNavigation" Value="None"/>
    <Setter Property="HorizontalContentAlignment" Value="Left"/>
    <Setter Property="FocusVisualStyle" Value="{x:Null}"/>
    <Setter Property="AllowDrop" Value="true"/>
    <Setter Property="ScrollViewer.PanningMode" Value="VerticalFirst"/>
    <Setter Property="Stylus.IsFlicksEnabled" Value="False"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type TextBox}">
                <Border x:Name="border" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" SnapsToDevicePixels="True">
                    <ScrollViewer x:Name="PART_ContentHost" Focusable="false" HorizontalScrollBarVisibility="Hidden" VerticalScrollBarVisibility="Hidden"/>
                </Border>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsEnabled" Value="false">
                        <!-- ...add or change setters here. -->
                        <Setter Property="Opacity" TargetName="border" Value="0.56"/>
                    </Trigger>
                    <Trigger Property="IsMouseOver" Value="true">
                        <Setter Property="BorderBrush" TargetName="border" Value="{StaticResource TextBox.MouseOver.Border}"/>
                    </Trigger>
                    <Trigger Property="IsKeyboardFocused" Value="true">
                        <Setter Property="BorderBrush" TargetName="border" Value="{StaticResource TextBox.Focus.Border}"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
    <Style.Triggers>
        <MultiTrigger>
            <MultiTrigger.Conditions>
                <Condition Property="IsInactiveSelectionHighlightEnabled" Value="true"/>
                <Condition Property="IsSelectionActive" Value="false"/>
            </MultiTrigger.Conditions>
            <Setter Property="SelectionBrush" Value="{DynamicResource {x:Static SystemColors.InactiveSelectionHighlightBrushKey}}"/>
        </MultiTrigger>
    </Style.Triggers>
</Style>

As an example, this trigger sets the foreground color to red with half opacity.

<Trigger Property="IsEnabled" Value="false">
    <Setter Property="Opacity" TargetName="border" Value="0.5"/>
    <Setter Property="Foreground" Value="Red"/>
</Trigger>

Then, reference the style in the TextBoxes where you want to apply it.

<Grid IsEnabled="False">
    <TextBox Style="{StaticResource TextBoxStyle}" Text="Foo"/>
    <TextBlock Style="{StaticResource TextBlockStyle}" Text = "Bar"/>
    <TextBox Style="{StaticResource TextBoxStyle}" Text="Bazz" Foreground ="Orange"/>
</Grid>

If you want to automatically apply the style to all TextBoxes within the scope of the resources where you created the style, remove its x:Key to make it implicit and do not set or reference a style.

<Style TargetType="{x:Type TextBox}">

<Grid IsEnabled="False">
    <TextBox Text="Foo"/>
    <TextBlock Text = "Bar"/>
    <TextBox Text="Bazz" Foreground ="Orange"/>
</Grid>

The default TextBlock style does not have a special appearance for the disabled state. You can adapt it similarly to the TextBox style. Here is an example.

<Style TargetType="{x:Type TextBlock}">
    <Setter Property="TextWrapping" Value="NoWrap"/>
    <Setter Property="TextTrimming" Value="None"/>
    <Style.Triggers>
        <Trigger Property="IsEnabled" Value="False">
            <Setter Property="Foreground" Value="Red"/>
        </Trigger>
    </Style.Triggers>
</Style>