hi,you should define a class which base on Button class, then change it ImageSource property.
public class ImageContentButton : Button
{
static ImageContentButton()
{
DefaultStyleKeyProperty.OverrideMetadata(typeof(ImageContentButton), new FrameworkPropertyMetadata(typeof(ImageContentButton)));
}
public static readonly DependencyProperty ImageSorceProperty = DependencyProperty.Register("ImageSorce", typeof(ImageSource), typeof(ImageContentButton));
public ImageSource ImageSorce
{
get { return (ImageSource)GetValue(ImageContentButton.ImageSorceProperty); }
set { SetValue(ImageContentButton.ImageSorceProperty, value); }
}
}
then, refer to the class in your XAML page.
xmlns:controls="clr-namespace:Contorls;assembly=Contorls"
In your Windows resources to override the Button control template class
<Style x:Key="ButtonStyle" TargetType="{x:Type controls:ImageContentButton}">
<Setter Property="FontSize" Value="12" ></Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type controls:ImageContentButton}">
<Grid Margin="0,0,0,-2" ClipToBounds="True">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualStateGroup.Transitions>
<VisualTransition From="Normal" GeneratedDuration="0">
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)" Storyboard.TargetName="image_Copy6">
<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="-28"/>
</DoubleAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(TextElement.Foreground).(SolidColorBrush.Color)" Storyboard.TargetName="button_Copy">
<EasingColorKeyFrame KeyTime="0:0:0.2" Value="White"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
</VisualTransition>
<VisualTransition From="MouseOver" GeneratedDuration="0">
<Storyboard>
<DoubleAnimation Duration="0:0:0.2" To="0" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)" Storyboard.TargetName="image_Copy6"/>
</Storyboard>
</VisualTransition>
</VisualStateGroup.Transitions>
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver">
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)" Storyboard.TargetName="image_Copy6">
<EasingDoubleKeyFrame KeyTime="0" Value="-28"/>
</DoubleAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(TextElement.Foreground).(SolidColorBrush.Color)" Storyboard.TargetName="button_Copy">
<EasingColorKeyFrame KeyTime="0" Value="White"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed">
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)" Storyboard.TargetName="image_Copy6">
<EasingDoubleKeyFrame KeyTime="0" Value="-28"/>
</DoubleAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(TextElement.Foreground).(SolidColorBrush.Color)" Storyboard.TargetName="button_Copy">
<EasingColorKeyFrame KeyTime="0" Value="White"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled"/>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto"></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
</Grid.ColumnDefinitions>
<Border BorderBrush="#FF262529" HorizontalAlignment="Stretch" Grid.Column="0" Grid.ColumnSpan="2" VerticalAlignment="Stretch" BorderThickness="1" CornerRadius="3">
<Border.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF575659" Offset="0"/>
<GradientStop Color="#FF403F42" Offset="1"/>
</LinearGradientBrush>
</Border.Background>
</Border>
<Image x:Name="image_Copy6" Grid.Column="0" Source="{TemplateBinding ImageSorce}" HorizontalAlignment="Center" Margin="5,1,0,-26" Stretch="Fill" Width="Auto" RenderTransformOrigin="0.5,0.5" Height="Auto" VerticalAlignment="Stretch">
<Image.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform/>
</TransformGroup>
</Image.RenderTransform>
</Image>
<ContentPresenter x:Name="button_Copy" VerticalAlignment="Center" HorizontalAlignment="Center" Grid.Column="1" Content="{TemplateBinding Content}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsFocused" Value="True"/>
<Trigger Property="IsDefaulted" Value="True"/>
<Trigger Property="IsMouseOver" Value="True"/>
<Trigger Property="IsPressed" Value="True"/>
<Trigger Property="IsEnabled" Value="False"/>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
refer to your Button template.hen the mouse suspension image resources can be altered, changing the code is suitable for your needs。
<controls:imagecontentbutton x:name="BtnUpdate" content="update" style="{StaticResource ButtonStyle}" click="btnUpdate_Click" height="28" width="80" foreground="#FFCBCBCC" margin="0,0,10,0" imagesorce="/VirtalWelding;component/Images/footbj.png" horizontalalignment="Left" verticalalignment="Bottom" xmlns:x="#unknown" xmlns:controls="#unknown"></controls:imagecontentbutton>