CommandButton Icon disabling

Question

I've got a Refresh Button in my WPF app attached to a Command

   <ToolBar>
        <Button Command="{Binding RefreshCommand}">
                <Viewbox Width="16" Height="16">
                    <Rectangle Width="16" Height="16">
                        <Rectangle.Fill>
                            <DrawingBrush>
                                <DrawingBrush.Drawing>
                                    <DrawingGroup>
                                        <DrawingGroup.Children>
                                            <GeometryDrawing Brush="#00FFFFFF" Geometry="F1M16,16L0,16 0,0 16,0z" />
                                            <GeometryDrawing Brush="#FFF6F6F6" Geometry="F1M16,8C16,12.411 12.411,16 8,16 3.589,16 0,12.411 0,8 0,6.597 0.384,5.212 1.088,4L0,4 0,0 8,0 8,8 4,8C4,10.206 5.794,12 8,12 10.206,12 12,10.206 12,8 12,6.656 11.331,5.41 10.21,4.666L9.377,4.112 11.592,0.78 12.425,1.333C14.663,2.822,16,5.314,16,8" />
                                            <GeometryDrawing Brush="#FF00529C" Geometry="F1M15,8C15,11.859 11.859,15 8,15 4.14,15 1,11.859 1,8 1,6.076 1.801,4.292 3.121,3L1,3 1,1 7,1 7,7 5,7 5,4.002C3.766,4.931 3,6.401 3,8 3,10.757 5.243,13 8,13 10.757,13 13,10.757 13,8 13,6.321 12.164,4.763 10.764,3.833L11.871,2.167C13.83,3.469,15,5.649,15,8" />
                                        </DrawingGroup.Children>
                                    </DrawingGroup>
                                </DrawingBrush.Drawing>
                            </DrawingBrush>
                        </Rectangle.Fill>
                    </Rectangle>
                </Viewbox>
        </Button>
    </ToolBar>

The problem is that if RefreshCommand isn't available due to the application state check failing, nothing happens to the icon (where if I have text for it instead of an icon, graying out the item on the bar is handled seamlessly without any additional code required.

As it happens, I DO have a snippet of XAML I want use for the grayed out isEnabled=false state, I just need to know how to tell it to use above snippet for the icon to apply to the isEnabled=true state, and to apply the other snippet for false. (Sorry, this question seems lame. WPF is relatively new to me).

Since this icon comes out of the VS Image Library, I also have them represented in bmp and png format. Drawing it inside of xaml is not a requirement.

For completeness, here's the snippet I want to replace it with when it's not available. I'm now noticing it's only one line different so that might make this easier (I hope)

<Viewbox Width="16" Height="16">
  <Rectangle Width="16" Height="16">
    <Rectangle.Fill>
      <DrawingBrush>
        <DrawingBrush.Drawing>
          <DrawingGroup>
            <DrawingGroup.Children>
              <GeometryDrawing Brush="#00FFFFFF" Geometry="F1M16,16L0,16 0,0 16,0z" />
              <GeometryDrawing Brush="#FFF6F6F6" Geometry="F1M16,8C16,12.411 12.411,16 8,16 3.589,16 0,12.411 0,8 0,6.597 0.384,5.212 1.088,4L0,4 0,0 8,0 8,8 4,8C4,10.206 5.794,12 8,12 10.206,12 12,10.206 12,8 12,6.656 11.331,5.41 10.21,4.666L9.377,4.112 11.592,0.78 12.425,1.333C14.663,2.822,16,5.314,16,8" />
              <GeometryDrawing Brush="#FF424242" Geometry="F1M15,8C15,11.859 11.859,15 8,15 4.14,15 1,11.859 1,8 1,6.076 1.801,4.292 3.121,3L1,3 1,1 7,1 7,7 5,7 5,4.002C3.766,4.931 3,6.401 3,8 3,10.757 5.243,13 8,13 10.757,13 13,10.757 13,8 13,6.321 12.164,4.763 10.764,3.833L11.871,2.167C13.83,3.469,15,5.649,15,8" />
            </DrawingGroup.Children>
          </DrawingGroup>
        </DrawingBrush.Drawing>
      </DrawingBrush>
    </Rectangle.Fill>
  </Rectangle>
</Viewbox>

Answer 1

As suggested by Ed Plunkett, you can set the content in a trigger.

Here is a complete example of how you might do it. I have bound the IsEnabled property of the button to a check box in order to test it.

Remember, if you are going to modify a property in a trigger, you must set the property with a Setter in the style, rather than setting it as a normal property.

<Window x:Class="ButtonTest.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:ButtonTest"
        mc:Ignorable="d"
        Title="MainWindow" Height="80" Width="800">
  <Grid>
    <Grid.ColumnDefinitions>
      <ColumnDefinition Width="*"/>
      <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>

    <Button Grid.Column="0" IsEnabled="{Binding IsChecked, ElementName=cb}" >
      <Button.Style>
        <Style TargetType="Button">

          <Setter Property="Content">
            <Setter.Value>
              <Viewbox Width="16" Height="16">
                <Rectangle Width="16" Height="16">
                  <Rectangle.Fill>
                    <DrawingBrush>
                      <DrawingBrush.Drawing>
                        <DrawingGroup>
                          <DrawingGroup.Children>
                            <GeometryDrawing Brush="#00FFFFFF" Geometry="F1M16,16L0,16 0,0 16,0z" />
                            <GeometryDrawing Brush="#FFF6F6F6" Geometry="F1M16,8C16,12.411 12.411,16 8,16 3.589,16 0,12.411 0,8 0,6.597 0.384,5.212 1.088,4L0,4 0,0 8,0 8,8 4,8C4,10.206 5.794,12 8,12 10.206,12 12,10.206 12,8 12,6.656 11.331,5.41 10.21,4.666L9.377,4.112 11.592,0.78 12.425,1.333C14.663,2.822,16,5.314,16,8" />
                            <GeometryDrawing Brush="#FF00529C" Geometry="F1M15,8C15,11.859 11.859,15 8,15 4.14,15 1,11.859 1,8 1,6.076 1.801,4.292 3.121,3L1,3 1,1 7,1 7,7 5,7 5,4.002C3.766,4.931 3,6.401 3,8 3,10.757 5.243,13 8,13 10.757,13 13,10.757 13,8 13,6.321 12.164,4.763 10.764,3.833L11.871,2.167C13.83,3.469,15,5.649,15,8" />
                          </DrawingGroup.Children>
                        </DrawingGroup>
                      </DrawingBrush.Drawing>
                    </DrawingBrush>
                  </Rectangle.Fill>
                </Rectangle>
              </Viewbox>
            </Setter.Value>
          </Setter>

          <Style.Triggers>
            <Trigger Property="IsEnabled" Value="false">
              <Setter Property="Content">
                <Setter.Value>
                  <Viewbox Width="16" Height="16">
                    <Rectangle Width="16" Height="16">
                      <Rectangle.Fill>
                        <DrawingBrush>
                          <DrawingBrush.Drawing>
                            <DrawingGroup>
                              <DrawingGroup.Children>
                                <GeometryDrawing Brush="#00FFFFFF" Geometry="F1M16,16L0,16 0,0 16,0z" />
                                <GeometryDrawing Brush="#FFF6F6F6" Geometry="F1M16,8C16,12.411 12.411,16 8,16 3.589,16 0,12.411 0,8 0,6.597 0.384,5.212 1.088,4L0,4 0,0 8,0 8,8 4,8C4,10.206 5.794,12 8,12 10.206,12 12,10.206 12,8 12,6.656 11.331,5.41 10.21,4.666L9.377,4.112 11.592,0.78 12.425,1.333C14.663,2.822,16,5.314,16,8" />
                                <GeometryDrawing Brush="#FF424242" Geometry="F1M15,8C15,11.859 11.859,15 8,15 4.14,15 1,11.859 1,8 1,6.076 1.801,4.292 3.121,3L1,3 1,1 7,1 7,7 5,7 5,4.002C3.766,4.931 3,6.401 3,8 3,10.757 5.243,13 8,13 10.757,13 13,10.757 13,8 13,6.321 12.164,4.763 10.764,3.833L11.871,2.167C13.83,3.469,15,5.649,15,8" />
                              </DrawingGroup.Children>
                            </DrawingGroup>
                          </DrawingBrush.Drawing>
                        </DrawingBrush>
                      </Rectangle.Fill>
                    </Rectangle>
                  </Viewbox>
                </Setter.Value>
              </Setter>
            </Trigger>
          </Style.Triggers>

        </Style>
      </Button.Style>

    </Button>

    <CheckBox x:Name="cb" Content="Enabled" Grid.Column="1"/>

  </Grid>
</Window>

Answer 2

You can use Triggers to set your Content based on the IsEnabled property value.

<Button Command="{Binding RefreshCommand}">
    <Button.Style>
        <Style TargetType="Button">
            <Style.Triggers>
                <Trigger Property="IsEnabled" Value="True">
                    <Setter Property="Content">
                        <Setter.Value>
                            <!--Your drawing / image when it's enabled-->
                        </Setter.Value>
                    </Setter>
                </Trigger>
                <Trigger Property="IsEnabled" Value="False">
                    <Setter Property="Content">
                        <Setter.Value>
                            <!--Your drawing / image when it's disabled-->
                        </Setter.Value>
                    </Setter>
                </Trigger>
            </Style.Triggers>
        </Style>
    </Button.Style>
</Button>