WPF Image Buttons
For my Resizer application I wanted a toolbar with image buttons, everything was perfect until I tried to disable the buttons. The first idea was to add a greyscale effect to the button if it was disabled. For a complete black/white icon this didn’t help either but changing the opacity does.
*Save/Clear disabled because there are no images *
All buttons enabled
MouseOver Save button
<Style TargetType="Button">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid Margin="1">
<Rectangle x:Name="OuterBorder" RadiusY="2" RadiusX="2" Visibility="Collapsed"/>
<Rectangle x:Name="Bg" Fill="{TemplateBinding Background}" Margin="1" RadiusY="1" RadiusX="1" Stroke="{TemplateBinding BorderBrush}" StrokeThickness="1" Visibility="Collapsed"/>
<Rectangle x:Name="InnerBorder" Margin="2" Visibility="Collapsed"/>
<ContentPresenter Margin="5" VerticalAlignment="Center" />
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Visibility" TargetName="OuterBorder" Value="Visible"/>
<Setter Property="Visibility" TargetName="Bg" Value="Visible"/>
<Setter Property="Visibility" TargetName="InnerBorder" Value="Visible"/>
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Effect">
<Setter.Value>
<effects:GreyscaleEffect />
</Setter.Value>
</Setter>
<Setter Property="Opacity" Value=".5" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
And the following .fx code is used for the greyscale effect.
sampler2D ImageSampler : register(S0); //take ImageSampler from S0 register.
// 'uv' vector from TEXCOORD0 semantics is our texture coordinate, two floating point numbers in the range 0-1.
float4 PS( float2 uv : TEXCOORD) : COLOR
{
float4 color = tex2D( ImageSampler, uv); // get the color of texture at the current point
color.rgb = dot(color.rgb, float3(0.3, 0.59, 0.11)); //compose correct luminance value
return color;
}