What is the best way to implement my control - xaml

Question

I need to have many different buttons like this:
<Button Style="{StaticResource DetailSectionButton}" Click="Button_Click_5">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Image Grid.Column="0" Stretch="None"
Margin="0 0 10 0"
Source="../Assets/icons/info.png" />
<TextBlock Text="info" Grid.Column="1"
Margin="0 10 0 0" />
</Grid>
</Button>
Each button have your own Image.Source, TextBlock.Text and Button.Click event handler.
What is the way to implement this button if all that I want to use this button is something like this:
<MyButton ImageSource="../Assets/icons/info.png" Text="info" Click="Button_Click_5" />
Do I need to create UserControl or it will be enough to use some Template or Attached property ?

Answer 1

I see at least 2 ways of doing this.
First is to inherit from Button, extend it with your ImageSource Dependency property and bind to it inside DataTemplate.
Another way to do this is to create ImageSource attached property, and bind to it inside DataTemplate as below:
public class Config
{
public static readonly DependencyProperty ImageSourceProperty = DependencyProperty.RegisterAttached(
"ImageSource", typeof (ImageSource), typeof (Config), new PropertyMetadata(default(ImageSource)));
public static void SetImageSource(DependencyObject element, ImageSource value)
{
element.SetValue(ImageSourceProperty, value);
}
public static ImageSource GetImageSource(DependencyObject element)
{
return (ImageSource) element.GetValue(ImageSourceProperty);
}
}
Here is the data template and button:
<DataTemplate x:Key="ButtonTemplate">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Image Grid.Column="0"
Source="{Binding Path=(s:Config.ImageSource),
RelativeSource={RelativeSource AncestorType=Button}}"
Stretch="None" />
<TextBlock Grid.Column="1"
Margin="0 10 0 0"
Text="{Binding}" />
</Grid>
</DataTemplate>
<Button Click="Button_Click_5"
Content="Info"
ContentTemplate="{StaticResource ButtonTemplate}"
s:Config.ImageSource="media_stop_red.png" />
Hope this helps.
EDIT
Just extend button control with ImageSource dependency property and create default style for it, like below:
public class MyButton : Button
{
public static readonly DependencyProperty ImageSourceProperty = DependencyProperty.Register(
"ImageSource", typeof (ImageSource), typeof (MyButton), new PropertyMetadata(default(ImageSource)));
public ImageSource ImageSource
{
get { return (ImageSource) GetValue(ImageSourceProperty); }
set { SetValue(ImageSourceProperty, value); }
}
public MyButton()
{
DefaultStyleKey = typeof (MyButton);
}
}
Style and button itself:
<Style TargetType="s:MyButton">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="s:MyButton">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Image Grid.Column="0"
Source="{TemplateBinding ImageSource}"
Stretch="None" />
<TextBlock Grid.Column="1"
Margin="0 10 0 0"
Text="{Binding}" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<s:MyButton Content="Info" ImageSource="..\media_stop_red.png" />

Answer 2

Create a new usercontrol, it has xaml and code behind.
Now change in xaml usercontrol to Button and in code behind change the inherited clase from usercontrol to Button too.
now add the contenet of the button
Then add the dependency properties with an event that set the value for the controls