Here I will post problems I and my colleagues met and solutions we found.

Wednesday, August 18, 2010

Images in Toolbar for Disabled buttons

I started to use ToolBar control in our WPF application. The problem is that when toolbar buttons have only images, these images are not grayed when button is disabled. The solution I googled (and little bit modified) is this:


<Style x:Key="{x:Static ToolBar.ButtonStyleKey}" TargetType="{x:Type Button}">
<!-- To support graying images when button is disabled-->
<Style.Resources>
<Style TargetType="{x:Type Image}">
<Style.Triggers>
<DataTrigger Binding="{Binding RelativeSource={RelativeSource AncestorType={x:Type Button}, AncestorLevel=1}, Path=IsEnabled}" Value="False">
<Setter Property="Opacity" Value="0.30"></Setter>
</DataTrigger>
</Style.Triggers>
</Style>
</Style.Resources>
<Setter Property="Margin" Value="3"/>
</Style>


Make sure this style is available in you resources.

Update:
When I tried to put images as content for the button I got an error "Specified element is already the logical child..."

So, my styles look like this:



<!-- Cannot use Content to display image to avoid "specified element is already the logical child" error -->
<Style x:Key="ToolButton_Edit" TargetType="{x:Type Button}" BasedOn="{StaticResource {x:Static ToolBar.ButtonStyleKey}}">
<Setter Property="ToolTip" Value="Edit"/>
<!--<Setter Property="Content">
<Setter.Value>
<Viewbox>
<Image Source="pack://application:,,,/Actsoft.Styles;Component/ToolImages/icons-paper-edit.png"/>
</Viewbox>
</Setter.Value>
</Setter>-->
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<Image Source="pack://application:,,,/Actsoft.Styles;Component/ToolImages/icons-paper-edit.png"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

One more update
OK, now I lost the "Mouse Over" effects. So, I copied existing Button Template, modified it with putting Image instead of ContentPresenter and "stole" Tag property for Image Source.
Here is what I got now, hope this is the last change.


<Style x:Key="{x:Static ToolBar.ButtonStyleKey}" TargetType="{x:Type Button}">
<!-- To support graying images when button is disabled-->
<Style.Resources>
<Style TargetType="{x:Type Image}">
<Style.Triggers>
<DataTrigger Binding="{Binding RelativeSource={RelativeSource AncestorType={x:Type Button}, AncestorLevel=1}, Path=IsEnabled}" Value="False">
<Setter Property="Opacity" Value="0.30"></Setter>
</DataTrigger>
</Style.Triggers>
</Style>
</Style.Resources>
<Setter Property="Margin" Value="3"/>
<!-- To support images -->
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border x:Name="Bd"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Background="{TemplateBinding Background}"
Padding="{TemplateBinding Padding}"
SnapsToDevicePixels="True">
<Image Source="{Binding Path=Tag, RelativeSource={RelativeSource TemplatedParent}}"/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="BorderBrush" TargetName="Bd" Value="#FF3399FF"/>
<Setter Property="Background" TargetName="Bd" Value="#FFC2E0FF"/>
</Trigger>
<Trigger Property="IsKeyboardFocused" Value="True">
<Setter Property="BorderBrush" TargetName="Bd" Value="#FF3399FF"/>
<Setter Property="Background" TargetName="Bd" Value="#FFC2E0FF"/>
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Setter Property="BorderBrush" TargetName="Bd" Value="#FF3399FF"/>
<Setter Property="Background" TargetName="Bd" Value="#FF99CCFF"/>
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

<!-- now buttons styles -->
<Style x:Key="ToolButton_Edit" TargetType="{x:Type Button}" BasedOn="{StaticResource {x:Static ToolBar.ButtonStyleKey}}">
<Setter Property="ToolTip" Value="Edit"/>
<Setter Property="Tag" Value="pack://application:,,,/Actsoft.Styles;Component/ToolImages/icons-paper-edit.png"/>
</Style>
<Style x:Key="ToolButton_Save" TargetType="{x:Type Button}" BasedOn="{StaticResource {x:Static ToolBar.ButtonStyleKey}}">
<Setter Property="ToolTip" Value="Save"/>
<Setter Property="Tag" Value="pack://application:,,,/Actsoft.Styles;Component/ToolImages/icon_save.png"/>
</Style>