Implement a button with a property for the icon source
public class IconButton : Button
{
public static readonly DependencyProperty IconSourceProperty =
DependencyProperty.Register("IconSource", typeof(string), typeof(IconButton), new PropertyMetadata(default(string)));
public string IconSource
{
get { return (string)GetValue(IconSourceProperty); }
set { SetValue(IconSourceProperty, value); }
}
}
Adjust your template to fit that button and bind the image source to your custom property
<ControlTemplate TargetType="{x:Type local:IconButton}" x:Key="tbutton">
<Grid>
<Border x:Name="Background" CornerRadius="2" BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{TemplateBinding BorderBrush}">
<Grid Background="{TemplateBinding Background}">
<Rectangle x:Name="BackgroundGradient" >
</Rectangle>
</Grid>
</Border>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto" />
</Grid.ColumnDefinitions>
<!-- icon image -->
<Image Grid.Column="0" Source="{TemplateBinding IconSource}"/>
<ContentPresenter
Grid.Column="1"
x:Name="contentPresenter"
Content="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
Margin="{TemplateBinding Padding}" />
</Grid>
<Rectangle x:Name="DisabledVisualElement" RadiusX="3" RadiusY="3" Fill="#FFFFFFFF" Opacity="0" IsHitTestVisible="false" />
<Rectangle x:Name="FocusVisualElement" RadiusX="2" RadiusY="2" Margin="1" Stroke="#FF6DBDD1" StrokeThickness="1" Opacity="0" IsHitTestVisible="false" />
</Grid>
And simple use it
<local:IconButton IconSource="Resources\1.jpg" Template="{StaticResource tbutton}"></local:IconButton>