Image button template?

Question

I want the "Image" button with two states (normal, mouse). this button will automatically change the image using the "Mouse over event" button. this image button should be a user control. I also want to set an image for each state form code in which I use this user control.

The solution uses a template with a " Value Converter ", but I don’t know how?

Answer 1

I found this in Code-project-Article (Cool example)

http://www.codeproject.com/KB/WPF/WPF_xaml_taskbar_window.aspx

First it creates Wpf-Custom-control (you can create class inheritance from Button, like this)

public class ImageButton : Button { private string cornerRadius; public string CornerRadius { get { return cornerRadius; } set { cornerRadius = value; } } private string highlightBackground; public string HighlightBackground { get { return highlightBackground; } set { highlightBackground = value; } } private string pressedBackground; public string PressedBackground { get { return pressedBackground; } set { pressedBackground = value; } } } 

As a second step, you should create a template in the resource dictionary (here is the code)

 <ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="clr-namespace:Phone.Controls"> <ControlTemplate x:Key="ButtonTemplate" TargetType="{x:Type local:ImageButton}"> <ControlTemplate.Resources> <Storyboard x:Key="MouseOverButton"> <ThicknessAnimation Storyboard.TargetName="ButtonBackgroundBorder" Storyboard.TargetProperty="(Control.Margin)" Duration="0:0:0.05" FillBehavior="Stop" From="0,0,0,0" To="2,2,2,2" AutoReverse="True" /> </Storyboard> </ControlTemplate.Resources> <Grid x:Name="ButtonOuterGrid"> <Border x:Name="ButtonBackgroundBorder" CornerRadius="{Binding Path=CornerRadius, RelativeSource={RelativeSource TemplatedParent}}" Background="{Binding Path=HighlightBackground, RelativeSource={RelativeSource TemplatedParent}}" BorderBrush="Black" BorderThickness="0.8" Opacity="0"> <Border.BitmapEffect> <OuterGlowBitmapEffect GlowColor="#FFFFFFFF" GlowSize="2.75" Noise="0.20"/> </Border.BitmapEffect> </Border> <Border x:Name="ButtonEdgesBorder" CornerRadius="{Binding Path=CornerRadius, RelativeSource={RelativeSource TemplatedParent}}" Opacity="1" BorderBrush="Transparent" BorderThickness="0" /> <Border x:Name="ButtonContentBorder" CornerRadius="{Binding Path=CornerRadius, RelativeSource={RelativeSource TemplatedParent}}" Opacity="1" BorderThickness="1"> <ContentPresenter x:Name="ContentText" Width="Auto" Height="Auto" HorizontalAlignment="Center" VerticalAlignment="Center"/> </Border> </Grid> <ControlTemplate.Triggers> <Trigger Property="IsMouseOver" Value="True"> <Trigger.Setters> <Setter Property="Opacity" TargetName="ButtonBackgroundBorder" Value="1"/> <Setter Property="TextElement.Foreground" TargetName="ContentText" Value="Black"/> </Trigger.Setters> </Trigger> <EventTrigger RoutedEvent="Grid.MouseEnter" SourceName="ButtonOuterGrid"> <BeginStoryboard Storyboard="{StaticResource MouseOverButton}"/> </EventTrigger> </ControlTemplate.Triggers> </ControlTemplate> <Style x:Key="ImageButton" TargetType="{x:Type Button}"> <Setter Property="Template" Value="{StaticResource ButtonTemplate}" /> </Style> 

And this is the last step, in the xaml file you have to insert this custom control

 <ImageButton x:Name="btnConfigs" Style="{StaticResource ImageButton}" Width="25" Height="25" VerticalAlignment="Top" HorizontalAlignment="Right" Margin="0,31.125,16.418,0"> <Image x:Name="ImgConfigs" Stretch="Fill"/> </ImageButton > 

and in the cs file do this

  this.ImgConfigs.Source="any imag-source" 

we can also change this image source to the btnconfig-click event

Special thanks to Murray Foxcroft for writing this article.

Answer 2

Why should this image button be a user? If the correct button with the new control template is OK, this should work:

 <Button> <Button.Template> <ControlTemplate TargetType="{x:Type Button}"> <Grid> <Image Name="HoverImage" Source="hover_image.png" Visibility="Hidden" /> <Image Name="DefaultImage" Source="default_image.png" /> </Grid> <ControlTemplate.Triggers> <Trigger Property="IsMouseOver" Value="True"> <Setter TargetName="DefaultImage" Property="Visibility" Value="Hidden" /> <Setter TargetName="HoverImage" Property="Visibility" Value="Visible" /> </Trigger> </ControlTemplate.Triggers> </ControlTemplate> </Button.Template> </Button> 

Answer 3

If you need a simple rollover effect, you do not need a template for it. The article below has a solution.

http://www.c-sharpcorner.com/Resources/Detail.aspx?ResourceId=706 In this article, the user uses SolidColorBrush, you can use ImageBrush to set the image as the background of the button.