Disabled Button Foreground

The Problem

If you use a Button with a different Foreground brush then the original and a custom content, the Foreground wont be change on disabled state. In the following sample I will use directly the IsEnabled property, but it happens also if you use a Command which handles the state too.

<Button Width="60" Height="60" Margin="2" IsEnabled="False" Foreground="Blue">
  <iconPacks:PackIconModern Width="20" Height="20" Kind="CitySeattle"/>
</Button>

You can see that the blue Foreground is still shown. But, there are now two ways to solve this.

Solution 1

The first solution is to use a ContentTemplate for the custom content, cause the Foreground for the Button will be applied for this template and not for the Content itself.

<Button Width="60" Height="60" Margin="2" IsEnabled="False" Foreground="Blue">
  <Button.ContentTemplate>
    <DataTemplate>
      <iconPacks:PackIconModern Width="20" Height="20" Kind="CitySeattle"/>
    </DataTemplate>
  </Button.ContentTemplate>
</Button>

Solution 2

The second solution is to use a style for the Button which sets the Foreground for both states. So with this solution it’s not necessary to use a ContentTenplate like above.

<Button Width="60" Height="60" Margin="2" IsEnabled="False" Style="{StaticResource AccentButtonStyle}">
  <iconPacks:PackIconModern Width="20" Height="20" Kind="CitySeattle"/>
</Button>

<Style x:Key="AccentButtonStyle" BasedOn="{StaticResource {x:Type Button}}" TargetType="{x:Type Button}">
  <Setter Property="Foreground" Value="Blue"/>
  <Style.Triggers>
    <Trigger Property="IsEnabled" Value="False">
      <Setter Property="Foreground" Value="Gray"/>
    </Trigger>
  </Style.Triggers>
</Style>

Where it came from

This issue was reported at MahApps.Metro together with the MahApps.Metro.Styles.MetroCircleButtonStyle. The style itself doesn’t set the Foreground for the ContentTemplate correct.

<Trigger Property="IsEnabled" Value="False">
  <Setter TargetName="PART_ContentPresenter" Property="TextElement.Foreground" Value="{DynamicResource GrayBrush7}" />
  <!-- This was incorrect!!!
  <Setter Property="Foreground" Value="{DynamicResource GrayBrush7}" />
  -->
  <Setter TargetName="ellipse" Property="Opacity" Value="0.3" />
</Trigger>

For this simple sample I used the MahApps.Metro.IconPacks.

Happy coding!