WPF how to preserve themes in a custom control - wpf

Question

How can i Create a reusable custom button with image and Text like this :
and when I use it in a window it must respect the theme used in that window.
Currently i use the following code :
<Button x:Name="cmdSave" Margin="5" Width="100" VerticalAlignment="Center" ToolTip="Save...">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="30"/>
<ColumnDefinition Width="70"/>
</Grid.ColumnDefinitions>
<Image Source="..\images\icons\yellowfloppy.ico" Grid.Column="0" VerticalAlignment="Center" Margin="2"/>
<TextBlock Text="Enregistrer" Grid.Column="1" Foreground="{StaticResource GreenForeGroundTitle}" VerticalAlignment="Center" Margin="2"/>
</Grid>
</Button>
The problem is i have to repeat the previous code each time i want to display a custom button.
So I tried the following custom control :
public class MyButton : Button
{
public ImageSource ImageButton
{
get { return (ImageSource)GetValue(ImageButtonProperty); }
set { SetValue(ImageButtonProperty, value); }
}
// Using a DependencyProperty as the backing store for ImageButton. This enables animation, styling, binding, etc...
public static readonly DependencyProperty ImageButtonProperty =
DependencyProperty.Register("ImageButton", typeof(ImageSource), typeof(MyButton), new UIPropertyMetadata(null));
public string TextButton
{
get { return (string)GetValue(TextButtonProperty); }
set { SetValue(TextButtonProperty, value); }
}
// Using a DependencyProperty as the backing store for TextButton. This enables animation, styling, binding, etc...
public static readonly DependencyProperty TextButtonProperty =
DependencyProperty.Register("TextButton", typeof(string), typeof(MyButton), new PropertyMetadata(""));
static MyButton()
{
DefaultStyleKeyProperty.OverrideMetadata(typeof(MyButton), new FrameworkPropertyMetadata(typeof(MyButton)));
}
}
and in Generic.xaml
<ResourceDictionary
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:MyButton">
<Style TargetType="{x:Type local:MyButton}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type local:MyButton}">
<Border CornerRadius="3" BorderBrush="AliceBlue" BorderThickness="2">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Image Source="{Binding ImageButton, RelativeSource={RelativeSource TemplatedParent}}" Grid.Column="0" VerticalAlignment="Center"/>
<TextBlock Text="{TemplateBinding TextButton}" Grid.Column="1" VerticalAlignment="Center"/>
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
and here the test window :
<Window
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
x:Class="WpfmyButtonTest.MainWindow"
xmlns:b="clr-namespace:MyButton;assembly=MyButton"
Title="MainWindow" Height="350" Width="525">
<Window.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="ShinyBlue.xaml"/>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Window.Resources>
<Grid>
<b:MyButton ImageButton="commercial.png" TextButton="Test" Margin="274,225,40,40"/>
</Grid>
But this code doesn't display what i expect, so All behavior of a normal button disappeared and the ShinyBlue theme is not applied.
Thank you in advance.

Answer 1

I finally found an answer to this question. See link here.
In fact, it is sufficient to incorporate a button inside a usercontrol like this :
XAML
<UserControl x:Class="Knom.WPF.ImageButton.ImageButton2"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Name="UC">
<Grid>
<Button>
<StackPanel Orientation="Horizontal" Margin="10">
<Image Source="{Binding ElementName=UC, Path=Image}"
Width="{Binding ElementName=UC, Path=ImageWidth}"
Height="{Binding ElementName=UC, Path=ImageHeight}"/>
<TextBlock Text="{Binding ElementName=UC, Path=Text}"
Margin="10,0,0,0"/>
</StackPanel>
</Button>
</Grid>
Code Behind
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
namespace Knom.WPF.ImageButton
{
/// <summary>
/// Interaction logic for ImageButton2.xaml
/// </summary>
public partial class ImageButton2 : UserControl
{
public ImageButton2()
{
InitializeComponent();
}
public ImageSource Image
{
get { return (ImageSource)GetValue(ImageProperty); }
set { SetValue(ImageProperty, value); }
}
// Using a DependencyProperty as the backing store for Image. This enables animation, styling, binding, etc...
public static readonly DependencyProperty ImageProperty =
DependencyProperty.Register("Image", typeof(ImageSource), typeof(ImageButton2), new UIPropertyMetadata(null));
public double ImageWidth
{
get { return (double)GetValue(ImageWidthProperty); }
set { SetValue(ImageWidthProperty, value); }
}
// Using a DependencyProperty as the backing store for ImageWidth. This enables animation, styling, binding, etc...
public static readonly DependencyProperty ImageWidthProperty =
DependencyProperty.Register("ImageWidth", typeof(double), typeof(ImageButton2), new UIPropertyMetadata(16d));
public double ImageHeight
{
get { return (double)GetValue(ImageHeightProperty); }
set { SetValue(ImageHeightProperty, value); }
}
// Using a DependencyProperty as the backing store for ImageHeight. This enables animation, styling, binding, etc...
public static readonly DependencyProperty ImageHeightProperty =
DependencyProperty.Register("ImageHeight", typeof(double), typeof(ImageButton2), new UIPropertyMetadata(16d));
public string Text
{
get { return (string)GetValue(TextProperty); }
set { SetValue(TextProperty, value); }
}
// Using a DependencyProperty as the backing store for Text. This enables animation, styling, binding, etc...
public static readonly DependencyProperty TextProperty =
DependencyProperty.Register("Text", typeof(string), typeof(ImageButton2), new UIPropertyMetadata(""));
//This is for MVVM Command
public ICommand Command
{
get { return (ICommand)GetValue(CommandProperty); }
set { SetValue(CommandProperty, value); }
}
// Using a DependencyProperty as the backing store for Text. This enables animation, styling, binding, etc...
public static readonly DependencyProperty CommandProperty =
DependencyProperty.Register("Command", typeof(ICommand), typeof(ImageButton2), new PropertyMetadata(null));
}
}
i can use it like this :
<Window x:Class="Knom.WPF.ImageButton.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window1" Height="300" Width="300"
xmlns:my="clr-namespace:Knom.WPF.ImageButton">
<Window.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="BureauBlue.xaml"/>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Window.Resources>
<my:ImageButton2 Image="calendar.png" Text="UserControl" HorizontalAlignment="Left" VerticalAlignment="Top"
ImageWidth="16" ImageHeight="16" Margin="10" Command="{Binding MyCommand}"/>
</Window>
And it is reusable and works fine
Thank you