we following link: http://www.codeproject.com/Tips/773386/WPF-ImageButton
to implement a ImageButton.
public class ImageButton : Button
{
#region Properties
public ImageSource Image
{
get { return (ImageSource)GetValue(ImageProperty); }
set { SetValue(ImageProperty, value); }
}
public static readonly DependencyProperty ImageProperty =
DependencyProperty.Register("Image", typeof(ImageSource), typeof(ImageButton), new PropertyMetadata(null));
public double ImageHeight
{
get { return (double)GetValue(ImageHeightProperty); }
set { SetValue(ImageHeightProperty, value); }
}
public static readonly DependencyProperty ImageHeightProperty =
DependencyProperty.Register("ImageHeight", typeof(double), typeof(ImageButton), new PropertyMetadata(Double.NaN));
public double ImageWidth
{
get { return (double)GetValue(ImageWidthProperty); }
set { SetValue(ImageWidthProperty, value); }
}
public static readonly DependencyProperty ImageWidthProperty =
DependencyProperty.Register("ImageWidth", typeof(double), typeof(ImageButton), new PropertyMetadata(Double.NaN));
#endregion
static ImageButton()
{
DefaultStyleKeyProperty.OverrideMetadata(typeof(ImageButton), new FrameworkPropertyMetadata(typeof(ImageButton)));
}
}We need the image show on the right side of ImageButton with special background color.
So we implement following style for the ImageButton
<Style x:Key="ImageLeftButtonStyle" TargetType="{x:Type controls:ImageButton}"><Setter Property="MinWidth" Value="34" /><Setter Property="Template"><Setter.Value><ControlTemplate TargetType="{x:Type controls:ImageButton}"><Button Command="{TemplateBinding Command}" x:Name="btnName" Margin="0,2"><Border x:Name="Button_Border_Bezel" CornerRadius="5"><Grid MaxWidth="200" x:Name="gridButton"
Height="40"
Margin="0,0"
Background="{StaticResource statusButtonBackground}"><Grid.ColumnDefinitions><ColumnDefinition Width="Auto" /><ColumnDefinition Width="*" /></Grid.ColumnDefinitions><TextBlock x:Name="buttonContent"
MaxWidth="140" Height="34" MinWidth="20"
Text="{TemplateBinding Content}"
Margin="10,5,10,0"
VerticalAlignment="Center"
HorizontalAlignment="Right"
TextTrimming="WordEllipsis"
TextWrapping="Wrap"
Background="Transparent"/><Image Source="{TemplateBinding Image}" x:Name="ImageContent"
Grid.Column="1"
Width="{TemplateBinding ImageWidth}"
Height="{TemplateBinding ImageHeight}"
Margin="2, 0"
HorizontalAlignment="Right"
VerticalAlignment="Center"
Visibility="{TemplateBinding Image, Converter={StaticResource ImageVisibilityConverter}}" /></Grid></Border></Button><ControlTemplate.Triggers><Trigger Property="IsEnabled" Value="false"><Setter Property="Opacity" Value="0.4" /></Trigger><Trigger Property="IsPressed" Value="true"><Setter TargetName="gridButton" Property="Background"><Setter.Value><RadialGradientBrush><RadialGradientBrush.GradientStops><GradientStopCollection><GradientStop Offset="0" Color="#ffcc00" /><GradientStop Offset="1" Color="#cc9900" /></GradientStopCollection></RadialGradientBrush.GradientStops></RadialGradientBrush></Setter.Value></Setter></Trigger></ControlTemplate.Triggers></ControlTemplate></Setter.Value></Setter><!--<Style.Triggers><Trigger Property="IsMouseOver" Value="true"><Setter Property="Foreground" Value="black " /></Trigger><Trigger Property="IsPressed" Value="true"><Setter Property="Foreground" Value="black " /></Trigger></Style.Triggers>--></Style><controls:ImageButton x:Name="LogoutButton"
MaxWidth="200"
Command="{Binding LogoutCommand}"
Style="{StaticResource ImageLeftButtonStyle}"
Background="{x:Null}"
BorderBrush="{x:Null}"
FontWeight="Normal"
Foreground="{x:Null}"
Content="User Name"
Image="/ConsoleApplication;component/Resources/Images/LogoutIcon.png"
ImageHeight="34"
ImageWidth="34"></controls:ImageButton>We notice that clicking (IsPressed =True) on the Image button, we do not see the Button background color change.
So we comment out the line "
<!--<Button Command="{TemplateBinding Command}" x:Name="btnName" Margin="0,2">--> in
"ImageLeftButtonStyle". We do not see the button text anymore.
So we replace TextBlock with TextBox inside the controlTemplate.
<Style x:Key="ImageLeftButtonStyle" TargetType="{x:Type controls:ImageButton}"><Setter Property="MinWidth" Value="34" /><Setter Property="Template"><Setter.Value><ControlTemplate TargetType="{x:Type controls:ImageButton}"><!--<Button Command="{TemplateBinding Command}" x:Name="btnName" Margin="0,2">--><Border x:Name="Button_Border_Bezel" CornerRadius="5"><Grid MaxWidth="200" x:Name="gridButton"
Height="40"
Margin="0,0"
Background="{StaticResource statusButtonBackground}"><Grid.ColumnDefinitions><ColumnDefinition Width="Auto" /><ColumnDefinition Width="*" /></Grid.ColumnDefinitions><!--<TextBlock x:Name="buttonContent"
MaxWidth="140" Height="34" MinWidth="20"
Text="{TemplateBinding Content}"
Margin="10,5,10,0"
VerticalAlignment="Center"
HorizontalAlignment="Right"
TextTrimming="WordEllipsis"
TextWrapping="Wrap"
Background="Transparent"/>--><TextBox x:Name="buttonContent" IsEnabled="False"
MaxWidth="140" Height="34" MinWidth="20"
Text="{TemplateBinding Content}"
Margin="10,5,10,0"
VerticalAlignment="Center"
HorizontalAlignment="Right"
BorderBrush="{x:Null}"
BorderThickness="0"
TextWrapping="Wrap"
Background="Transparent"/><Image Source="{TemplateBinding Image}" x:Name="ImageContent"
Grid.Column="1"
Width="{TemplateBinding ImageWidth}"
Height="{TemplateBinding ImageHeight}"
Margin="2, 0"
HorizontalAlignment="Right"
VerticalAlignment="Center"
Visibility="{TemplateBinding Image, Converter={StaticResource ImageVisibilityConverter}}" /></Grid></Border><!--</Button>--><ControlTemplate.Triggers><Trigger Property="IsEnabled" Value="false"><!--<Setter Property="Opacity" Value="0.4" TargetName="buttonContent"/>--><Setter Property="Background" Value="Transparent" TargetName="buttonContent"/></Trigger><Trigger Property="IsPressed" Value="true"><Setter TargetName="gridButton" Property="Background"><Setter.Value><RadialGradientBrush><RadialGradientBrush.GradientStops><GradientStopCollection><GradientStop Offset="0" Color="#ffcc00" /><GradientStop Offset="1" Color="#cc9900" /></GradientStopCollection></RadialGradientBrush.GradientStops></RadialGradientBrush></Setter.Value></Setter></Trigger></ControlTemplate.Triggers></ControlTemplate></Setter.Value></Setter><!--<Style.Triggers><Trigger Property="IsMouseOver" Value="true"><Setter Property="Foreground" Value="black " /></Trigger><Trigger Property="IsPressed" Value="true"><Setter Property="Foreground" Value="black " /></Trigger></Style.Triggers>--></Style>
Inside ImageButton ControlTemplate, without using Button control, TextBlock does not show the button content. However, TextBox will show the content. Does anybody know why?We do not want to use TextBox here since this is button and we do not want to user to edit it. We can use "IsEanbled" to false.
However, this will change the TexBox background since it is disabled. Then we need to change the TextBox style in order to make it work.
Is there a way that we can make the ImageButton style works by using TextBlock without using Button control inside the ImageButton ControlTemplate? Thx!
JaneC