Table of Contents
Table of Contents
BitmapButton

EO.Wpf BitmapButton is a simple button control consists of a Border and a Bitmap. It is especially suitable for simple image based "hover button".

The following sample demonstrates how to use BitmapButton to create a "hover button" that changes both image and border when user moves mouse over the button:

XAML
Copy 
<eo:BitmapButton Width="20" Height="20">
    <eo:BitmapButton.Style>
        <Style TargetType="{x:Type eo:BitmapButton}">
            <Setter Property="Source" Value="button.png"></Setter>
            <Setter Property="BorderStyle">
                <Setter.Value>
                    <Style TargetType="Border">
                        <Setter Property="BorderBrush" Value="#adadaf" />
                        <Setter Property="BorderThickness" Value="1"></Setter>
                    </Style>
                </Setter.Value>
            </Setter>
            <Style.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter Property="Source" Value="button_hover.png"></Setter>
                    <Setter Property="BorderStyle">
                        <Setter.Value>
                            <Style TargetType="Border">
                                <Setter Property="BorderBrush" Value="#3ab38a" />
                                <Setter Property="BorderThickness" Value="1"></Setter>
                            </Style>
                        </Setter.Value>
                    </Setter>
                </Trigger>
            </Style.Triggers>
        </Style>
    </eo:BitmapButton.Style>
</eo:BitmapButton>

The above XAML switches both the button's image and border color when user moves the mouse over the button. When using the above code with these two images:

File Image
button.png
button_hover.png

It produces the following result:

State Result
Normal
Hover