CODEWITHSUNDEEP
c#wpfxaml
Harry Boy
Harry Boy

Reputation: 4777

Set background and hover over image on button

I have 8 buttons on my WPF Page (C# application). For each of these buttons I want a different image placed onm them and also a hover over image.

This link tells me how to place a background image for all the buttons: wpf button background image

How can I modify this so that each button has its own unique background image and hover over image?

Upvotes: 1

Views: 662

Answers (1)

Rohit Vats
Rohit Vats

Reputation: 81313

In case different image is required, you have to set Background Image and hover image differently for each button.

Moreover, hover over image won't be visible because default mouse over brush of button will always override background of button. For that you have to override default template which can be done in default Style of button.

Like mentioned in example below for one button, you need to replicate that for other buttons. (No need to override default template since it will be applied automatically for all buttons. Just inner style you need to provide for other 7 buttons.)

<StackPanel>
   <StackPanel.Resources>
      <Style TargetType="Button">
         <Setter Property="Template">
           <Setter.Value>
             <ControlTemplate TargetType="Button">
               <Border Background="{TemplateBinding Background}">
                  <ContentPresenter/>
               </Border>
             </ControlTemplate>
           </Setter.Value>
         </Setter>
       </Style>
    </StackPanel.Resources>
    <Button Width="100" Height="100">
      <Button.Style>
        <Style TargetType="Button"
               BasedOn="{StaticResource {x:Type Button}}">
           <Setter Property="Background">
             <Setter.Value>
               <ImageBrush ImageSource="Image1.png"/>
             </Setter.Value>
           </Setter>
           <Style.Triggers>
             <DataTrigger Binding="{Binding IsMouseOver,
                                         RelativeSource={RelativeSource Self}}"
                          Value="True">
                <Setter Property="Background">
                  <Setter.Value>
                    <ImageBrush ImageSource="Image2.png"/>
                  </Setter.Value>
                </Setter>
              </DataTrigger>
            </Style.Triggers>
         </Style>
      </Button.Style>
   </Button>
</StackPanel>

Upvotes: 1

Related Questions