Question

I’m dealing with a rather frustrating bug. My ultimate goal is to have an image, which glows on IsMouseOver, and can be clicked to call an event. This seems all too complicated, but the other alternative I found was creating a custom user control, which is even more excessive. This is what I’ve done so far:

<Style x:Key="DelButton" TargetType="Button">
        <Setter Property="Padding" Value="0" />
        <Setter Property="Background" Value="Red" />
        <Setter Property="BorderBrush" Value="Transparent" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">
                    <Image Source="/HaskList;component/Images/Del24.png" Stretch="None"/>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
        <Style.Triggers>
            <Trigger Property="IsMouseOver" Value="True">
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="Button">
                            <Image Source="/HaskList;component/Images/Del24h.png" Stretch="None"/>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Trigger>
        </Style.Triggers>
    </Style>

My button is defined as:

<Button HorizontalAlignment="Right" Margin="0,28,6,0" Name="delButton" VerticalAlignment="Top" Style="{DynamicResource DelButton}" Click="delButton_Click" />

This is what’s happening:

Thanks for any suggestions.

Answer 1

i ran into this the other day too, and it might be that one of the images is a standard 96dpi, and the other was something else. I had one image that somehow was 78 dpi or something else, and thats why it was getting strange sizing.