Question

I’m trying to create an image button that presents an different image depending on a conditional. In addition, I require another condition where the hover over presents another image.

The example is for a button inside a datagrid row (cell) that on a false condition displays a grey cross and on mouseover displays a red cross. If the initial condition was true a grey tick is displayed and on mouseover displays a green tick. The initial condition is from the bound element of the row.

So far I don’t have anything working! Ignore path locations to image in below example.

<DataGridTemplateColumn.CellTemplate>
    <DataTemplate>
        <Button Style="{StaticResource ExcludeIncludeButtonStyle}" />
    </DataTemplate>
</DataGridTemplateColumn.CellTemplate>

<Style x:Key="ExcludeIncludeButtonStyle" TargetType="Button">
    <Setter Property="OverridesDefaultStyle" Value="True"/>
    <Setter Property="Margin" Value="5"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Button">
                <Border Name="border" BorderThickness="0" Background="Transparent">
                    <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" Width="15" Height="15" />
                </Border>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsMouseOver" Value="False">
                        <Setter Property="Background">
                            <Setter.Value>
                                <ImageBrush ImageSource="exclude.png" />
                            </Setter.Value>
                        </Setter>
                    </Trigger>
                    <Trigger Property="IsMouseOver" Value="True">
                        <Setter Property="Background">
                            <Setter.Value>
                                <ImageBrush ImageSource="exclude_hover.png" />
                            </Setter.Value>
                        </Setter>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Answer 1

In your Border add the required template bindings, and has you have multiple condition for your bindings, your have to use MultiDataTriggers:

<ControlTemplate TargetType="Button">
    <Border Name="border" BorderThickness="0" Background="{TemplateBinding Background}">
        <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" Width="15" Height="15" />
    </Border>
    <ControlTemplate.Triggers>
        <MultiDataTrigger>
            <MultiDataTrigger.Conditions>
                <Condition Binding="{TemplateBinding IsMouseOver}" Value="false"/>
                <Condition Binding="{Binding InitialCondition}" Value="false"/>
            </MultiDataTrigger.Conditions>

            <Setter Property="Background">
                <Setter.Value>
                    <ImageBrush ImageSource="GreyCross.png" />
                </Setter.Value>
            </Setter>
        </MultiDataTrigger>
        <MultiDataTrigger>
            <MultiDataTrigger.Conditions>
                <Condition Binding="{TemplateBinding IsMouseOver}" Value="true"/>
                <Condition Binding="{Binding InitialCondition}" Value="false"/>
            </MultiDataTrigger.Conditions>

            <Setter Property="Background">
                <Setter.Value>
                    <ImageBrush ImageSource="RedCross.png" />
                </Setter.Value>
            </Setter>
        </MultiDataTrigger>
        <MultiDataTrigger>
            <MultiDataTrigger.Conditions>
                <Condition Binding="{TemplateBinding IsMouseOver}" Value="false"/>
                <Condition Binding="{Binding InitialCondition}" Value="true"/>
            </MultiDataTrigger.Conditions>

            <Setter Property="Background">
                <Setter.Value>
                    <ImageBrush ImageSource="GreyTick.png" />
                </Setter.Value>
            </Setter>
        </MultiDataTrigger>
        <MultiDataTrigger>
            <MultiDataTrigger.Conditions>
                <Condition Binding="{TemplateBinding IsMouseOver}" Value="true"/>
                <Condition Binding="{Binding InitialCondition}" Value="true"/>
            </MultiDataTrigger.Conditions>

            <Setter Property="Background">
                <Setter.Value>
                    <ImageBrush ImageSource="GreenTick.png" />
                </Setter.Value>
            </Setter>
        </MultiDataTrigger>
    </ControlTemplate.Triggers>
</ControlTemplate>