Develop Reference

Custom Button doesn't show its content properly

Okay, I made a Custom Button in my .xaml file in my WPF Project, I've done everything, but the Content isn't showing... The C# code is default, nothing changed, but here's my .xaml code:
<Button Name="TestButton" Content="TESTING" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="197,158,0,0" Height="30" Width="120">
<Button.Template>
<ControlTemplate>
<Image Height="30" Width="120" Stretch="Fill">
<Image.Style>
<Style TargetType="{x:Type Image}">
<Setter Property="Source" Value="/Resources/btn_primary_normal.png"/>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Source" Value="/Resources/btn_primary_hover.png"/>
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Source" Value="/Resources/btn_primary_disabled.png"/>
</Trigger>
</Style.Triggers>
</Style>
</Image.Style>
</Image>
</ControlTemplate>
</Button.Template>
</Button>

When you replace the ControlTemplate of a control you replace all of its visual functionality, including the part that displays the Content property. If you want a button that shows an image and whatever is in the Content property you are pretty close, just add a ContentPresenter into your template like so:
<Button Name="TestButton" Content="TESTING" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="197,158,0,0" Height="30" Width="120">
<Button.Template>
<ControlTemplate TargetType="Button">
<Grid>
<Image Height="30" Width="120" Stretch="Fill">
<Image.Style>
<Style TargetType="{x:Type Image}">
<Setter Property="Source" Value="/Resources/btn_primary_normal.png"/>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Source" Value="/Resources/btn_primary_hover.png"/>
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Source" Value="/Resources/btn_primary_disabled.png"/>
</Trigger>
</Style.Triggers>
</Style>
</Image.Style>
</Image>
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Grid>
</ControlTemplate>
</Button.Template>
</Button>
Also note the specification of the TargetType in the ControlTemplate, this is important.

Change background of toolkit:TimePicker?

I'm using toolkit:TimePicker in WPF as code below
<toolkit:TimePicker x:Name="datetimeBeginBackup"
Format="Custom"
FormatString="HH:mm:ss"
TextAlignment="Center"
Foreground="#FFFFFF">
<toolkit:TimePicker.Style>
<Style TargetType="toolkit:TimePicker">
<Setter Property="Background">
<ImageBrush ImageSource="Resources\backup_date_time_picker_bgr.png"/>
</Setter>
<Style.Triggers>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Background">
<ImageBrush ImageSource="Resources\backup_date_time_picker_disable_bgr.png"/>
</Setter>
</Trigger>
</Style.Triggers>
</Style>
</toolkit:TimePicker.Style>
</toolkit:TimePicker>
When the datetimeBeginBackup is disable, the background will be changed with "backup_date_time_picker_disable_bgr.png", it is ok. But the background of TextBlock Time is white, this make user hard to see the text. I want to change the background of TextBlock Time, but I don't know to do it.
Someone can help me?
Many Thanks,
T&T

Move Foreground default value in setter and on trigger IsEnabled, change Foreground to desired value say Black using Style setter.
<toolkit:TimePicker x:Name="datetimeBeginBackup"
Format="Custom"
FormatString="HH:mm:ss"
TextAlignment="Center">
<toolkit:TimePicker.Style>
<Style TargetType="toolkit:TimePicker">
<Setter Property="Foreground" Value="#FFFFFF"/>
<Setter Property="Background">
<ImageBrush ImageSource="Resources\backup_date_time_picker_bgr.png"/>
</Setter>
<Style.Triggers>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Background">
<ImageBrush ImageSource="Resources\backup_date_time_picker_disable_bgr.png"/>
</Setter>
<Setter Property="Foreground" Value="#000000"/>
</Trigger>
</Style.Triggers>
</Style>
</toolkit:TimePicker.Style>
</toolkit:TimePicker>

Change Button Background when is not enabled

I need to change my Button background (as SolidColorBrush for example) only when it is not enabled (IsEnabled == false). How can I do?
Have I to modify the Button Style using the XAML or can I do this work programmatically? What is the correct XAML code, to change only the Background when it is not enabled?
I tried the following XAML code but it has no effect:
<Button>
<Button.Style>
<Style TargetType="Button">
<Style.Triggers>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Background" Value="Red"></Setter>
</Trigger>
</Style.Triggers>
</Style>
</Button.Style>
</Button>

You can change the background by editing the template. You'll find the default template for Button here.
In the trigger for IsEnabled you can simply add something like this:
<Setter Property="Background" Value="{StaticResource DisabledBackgroundBrush}"/>
EDIT:
Try this instead then;
<Window.Resources>
<Style TargetType="{x:Type Button}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border x:Name="Overlay" CornerRadius="2">
<ContentPresenter/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsEnabled" Value="false">
<Setter TargetName="Overlay" Property="Background" Value="Red"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<StackPanel>
<Button Content="Button" IsEnabled="False"/>
</StackPanel>
Just change it to suit your needs.

You can use a Style trigger:
<Image.Style>
<Style>
<Style.Triggers>
<DataTrigger Binding="{Binding IsEnabled}" Value="False">
<Setter Property="Image.Source" Value="pack://application:,,,/disabled.png" />
</DataTrigger>
</Style.Triggers>
</Style>
</Image.Style>

Create Image Button using Code-behind

I'm trying to create a three-state Image Button in run time. There is existing method in XAML but I wonder how to do it in code behind (i.e. how to translate the following code to C#)?
<Button>
<Button.Template>
<ControlTemplate TargetType="{x:Type Button}">
<Grid>
<Image Name="Normal" Source="Resources/Normal.png"/>
<Image Name="Pressed" Source="Resources/Pressed.png" Visibility="Hidden"/>
<Image Name="Disabled" Source="Resources/Disabled.png" Visibility="Hidden"/>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsPressed" Value="True">
<Setter TargetName="Normal" Property="Visibility" Value="Hidden"/>
<Setter TargetName="Pressed" Property="Visibility" Value="Visible"/>
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter TargetName="Normal" Property="Visibility" Value="Hidden"/>
<Setter TargetName="Disabled" Property="Visibility" Value="Visible"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Button.Template>
</Button>

You add a panel control in your page, then in your code behind use this:
ImageButton imgBtn = new ImageButton();
imgBtn.ID = "image_id";
imgBtn.ImageUrl = "your_image_path";
Panel1.Controls.Add (imgBtn);
Hope this helps

different images for enable and disable states of a button in WPF

I want to change the image of the button in the code below based on its state i.e. use different image for enable and disable state.
<Button CommandParameter="Open" >
<StackPanel Orientation="Horizontal" >
<Image Source="../icons/big/open.png" Width="20" Height="20"></Image>
</StackPanel>
</Button>
Thank you.

You can use a style with triggers like this:
<Style TargetType="{x:Type Button}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<StackPanel Orientation="Horizontal" >
<Image Name="PART_Image" Source="path to normal image" />
</StackPanel>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Source" Value="path to mouse over image" TargetName="PART_Image"/>
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Setter Property="Source" Value="path to pressed image" TargetName="PART_Image"/>
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Source" Value="path to disabled image" TargetName="PART_Image"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

I used the following code to make images inside buttons to have half the opacity when the button is disabled and it works great!
<Style TargetType="Button">
<Style.Resources>
<Style TargetType="Image">
<Style.Triggers>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Opacity" Value="0.5" />
</Trigger>
</Style.Triggers>
</Style>
</Style.Resources>
</Style>

Try using Style.Triggers see post wpf-style-trigger

Basically, create a style for the button which makes it display an image object in its content property, and then have a trigger which checks the buttons enabled state, and when it is TRUE have it be one image, and at all other times be the other image.