“Disabled” effect on Image

Question

In Win Forms when I disable a button its image background converts to gray-level image. How can I simulate this effect in Image control using XAML codes?

Answer 1

you can set the opacity of image in button like below:

<Button>
  <Image Source="button.png">
    <Image.Style>
      <Style TargetType="Image">
        <Style.Triggers>
          <Trigger Property="IsEnabled" Value="False">
            <Setter Property="Opacity" Value="0.4" />
          </Trigger>
        </Style.Triggers>
      </Style>
    </Image.Style>
  </Image>
</Button>

Answer 2

in order to get the winform style disabled you should do something like this

  <Button Click="Button_Click">
        <Image Width="154" Height="87" >
            <Image.Style>
                <Style TargetType="Image">
                    <Style.Triggers>
                        <Trigger Property="IsEnabled" Value="False">
                            <Setter Property="Source">
                                <Setter.Value>
                                    <FormatConvertedBitmap DestinationFormat="Gray32Float">
                                        <FormatConvertedBitmap.Source>
                                            <BitmapImage UriSource="1.png" />
                                        </FormatConvertedBitmap.Source>
                                    </FormatConvertedBitmap>
                                </Setter.Value>
                            </Setter>
                        </Trigger>
                        <Trigger Property="IsEnabled" Value="True">
                            <Setter Property="Source">
                                <Setter.Value>                                        
                                            <BitmapImage UriSource="1.png" />                                          
                                </Setter.Value>
                            </Setter>
                        </Trigger>                     
                    </Style.Triggers>                                          
                </Style>
            </Image.Style>
        </Image>
    </Button>

Hope this help

Answer 3

Take a look at greyableimage.codeplex.com

This can be used in place of a regular image control on buttons, menus, toolbars etc. It auto-generates a "greyed-out" version of the content that will be displayed when the parent control is disabled.