WPF - change Button controltemplate background when Command.CanExecute is false - wpf

scenario:
When using default implementation of button the below functionality works:
When canExeucte command is true -> the button is enabled and button background is not changed.
When CanExecute command is false -> the button is disabled and background is "grayed".
But When using Button ControlTemplate style and CanExecute is false -> the button is disabled as expected but background is not changed.
How can I change the background of the Control Template button ?
image :
https://onedrive.live.com/redir?resid=3A8F69A0FB413FA4!125&authkey=!ALh_kjfxMMNzhSY&v=3&ithint=photo%2cpng
Control Template:
<!--button-->
<ControlTemplate x:Key="ButtonTemplate" TargetType="{x:Type Button}">
<Border x:Name="border" CornerRadius="0" Background="Green" BorderBrush="#FF06A6F0" BorderThickness="1" Opacity="1" Width="147" Height="50" >
<ContentPresenter x:Name="contentPresenter"
ContentTemplate="{TemplateBinding ContentTemplate}"
Content="{TemplateBinding Content}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
Margin="{TemplateBinding Padding}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Opacity" Value="0.8" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
<Style x:Key="StyleButtonTemplate" TargetType="{x:Type Button}">
<Setter Property="Template" Value="{DynamicResource ButtonTemplate}" />
<Setter Property="FontSize" Value="18pt" />
<Setter Property="Foreground" Value="White" />
<Setter Property="Cursor" Value="Hand" />
<Setter Property="Button.Effect">
<Setter.Value>
<DropShadowEffect Color="Black" Direction="140" ShadowDepth="5" BlurRadius="5" Opacity="0.1" />
</Setter.Value>
</Setter>
</Style>

When you re-template a control, all the visual states should be managed by yourself. In this case the disabled state is ignored. For a simple way using Trigger to change the Background if IsEnabled is false:
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Opacity" Value="0.8" />
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter TargetName="border" Property="Background" Value="Gray"/>
</Trigger>
</ControlTemplate.Triggers>

Related

WPF hover border effect not being applied

I am trying (and failing) to change the colour of the circle's border on a radio button when the mouse is hovered over the control, within WPF. My WPF for the Style is as follows:
<Style TargetType="RadioButton"
x:Key="RadioButtonStyling"
BasedOn="{StaticResource {x:Type RadioButton}}">
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="BorderBrush" Value="Red" />
</Trigger>
</Style.Triggers>
</Style
I am then calling this on the radio buttons as follows:
<RadioButton Style="{StaticResource RadioButtonStyling}" ... />
As it stands, no styling is applied to the outline on the circle, and it remains to be the default blue colour (out of the box Windows-esque blue). See the image below
The problem is the template for the radiobutton already has a mouseover trigger in it.
This sets the borderbrush on the border element by name and will therefore over-ride the value your trigger sets the border on the control to.
Here's a modified working version of the win 10 template which sets the circle red on mouse over:
<ControlTemplate x:Key="RadioButtonControlTemplate1" TargetType="{x:Type RadioButton}">
<Grid x:Name="templateRoot" Background="Transparent" SnapsToDevicePixels="True">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Border x:Name="radioButtonBorder" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" CornerRadius="100" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="1,1,2,1" VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
<Grid x:Name="markGrid" Margin="2">
<Ellipse x:Name="optionMark" Fill="#FF212121" MinWidth="6" MinHeight="6" Opacity="0"/>
</Grid>
</Border>
<ContentPresenter x:Name="contentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Grid.Column="1" ContentStringFormat="{TemplateBinding ContentStringFormat}" Focusable="False" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="HasContent" Value="True">
<Setter Property="FocusVisualStyle">
<Setter.Value>
<Style>
<Setter Property="Control.Template">
<Setter.Value>
<ControlTemplate>
<Rectangle Margin="14,0,0,0" SnapsToDevicePixels="True" Stroke="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}" StrokeThickness="1" StrokeDashArray="1 2"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Setter.Value>
</Setter>
<Setter Property="Padding" Value="4,-1,0,0"/>
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Background" TargetName="radioButtonBorder" Value="#FFE6E6E6"/>
<Setter Property="BorderBrush" TargetName="radioButtonBorder" Value="#FFBCBCBC"/>
<Setter Property="Fill" TargetName="optionMark" Value="#FF707070"/>
</Trigger>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" TargetName="radioButtonBorder" Value="#FFF3F9FF"/>
<Setter Property="BorderBrush" TargetName="radioButtonBorder" Value="Red"/>
<Setter Property="Fill" TargetName="optionMark" Value="#FF212121"/>
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Setter Property="Background" TargetName="radioButtonBorder" Value="#FFD9ECFF"/>
<Setter Property="BorderBrush" TargetName="radioButtonBorder" Value="#FF3C77DD"/>
<Setter Property="Fill" TargetName="optionMark" Value="#FF212121"/>
</Trigger>
<Trigger Property="IsChecked" Value="True">
<Setter Property="Opacity" TargetName="optionMark" Value="1"/>
</Trigger>
<Trigger Property="IsChecked" Value="{x:Null}">
<Setter Property="Opacity" TargetName="optionMark" Value="0.56"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
The critical part is this trigger:
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" TargetName="radioButtonBorder" Value="#FFF3F9FF"/>
<Setter Property="BorderBrush" TargetName="radioButtonBorder" Value="Red"/>
<Setter Property="Fill" TargetName="optionMark" Value="#FF212121"/>
</Trigger>
Where I've changed the original value to "Red"
I also moved that trigger down in the order of triggers so it's after isenabled.
These are the only changes I made to the default win10 template I extracted.
Each control in WPF has various states like inactive, mouse-over, pressed or disabled. I you want to modify certain states, simple setters on a style will not work, because there are already triggers defined in the control template that will override yours.
Therefore, you need to create a custom control template. You can use tools like Visual Studio or Blend that can automatically extract the default control templates that you can edit. After extraction, you will get one or more styles and a list of brushes like below.
<SolidColorBrush x:Key="RadioButton.Static.Background" Color="#FFFFFFFF"/>
<SolidColorBrush x:Key="RadioButton.Static.Border" Color="#FF707070"/>
<SolidColorBrush x:Key="RadioButton.Static.Glyph" Color="#FF212121"/>
<SolidColorBrush x:Key="RadioButton.MouseOver.Background" Color="#FFF3F9FF"/>
<SolidColorBrush x:Key="RadioButton.MouseOver.Border" Color="#FF5593FF"/>
<SolidColorBrush x:Key="RadioButton.MouseOver.Glyph" Color="#FF212121"/>
<!-- ...and so on. -->
<Style x:Key="OptionMarkFocusVisual">
<!-- ...style used for displaying focus. -->
</Style>
<Style x:Key="RadioButtonStyle" TargetType="{x:Type RadioButton}">
<Setter Property="FocusVisualStyle" Value="{StaticResource FocusVisual}"/>
<Setter Property="Background" Value="{StaticResource RadioButton.Static.Background}"/>
<Setter Property="BorderBrush" Value="{StaticResource RadioButton.Static.Border}"/>
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type RadioButton}">
<!-- ...control template to display the radio button -->
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
In your case you just have to overwrite the border brush for the mouse-over state.
<SolidColorBrush x:Key="RadioButton.MouseOver.Border" Color="Red"/>
Then you apply the changed style to your radio button.
<RadioButton Style="{DynamicResource RadioButtonStyle}"/>

WPF Override style from a style trigger

I have a Radiobutton, which has styling set to make it appear as a ToggleButton, and I want to set its default background color to green, but when it is active/checked i want it to change color. In my example below I'd like it to be blue. No matter what I try the green color never gets overridden. What am I missing?
Button:
<RadioButton GroupName="Rating" Background="Green" Style="{StaticResource RatingToggleButtons}" x:Name="Normal" Content="Normal" Grid.Row="0" />
Style:
<Style x:Key="RatingToggleButtons" TargetType="{x:Type ToggleButton}" BasedOn="{StaticResource MahApps.Metro.Styles.MetroToggleButton}">
<Setter Property="Margin" Value="5 5 5 5" />
<Setter Property="MinWidth" Value="100"/>
<Setter Property="MinHeight" Value="50"/>
<Style.Triggers>
<Trigger Property="IsChecked" Value="True">
<Setter Property="Background" Value="Blue"/>
<Setter Property="Foreground" Value="White"/>
</Trigger>
</Style.Triggers>
</Style>
In Short,background applied via control template has upper hand, compared to background set via Style (your case.) So you need to edit control template.
<RadioButton.Template>
<ControlTemplate TargetType="{x:Type ButtonBase}">
<ContentPresenter x:Name="contentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" ContentStringFormat="{TemplateBinding ContentStringFormat}" Focusable="False" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
<ControlTemplate.Triggers>
<Trigger Property="IsChecked" Value="True">
<Setter Property="Background" TValue="#FF838383"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</RadioButton.Template>
note : code not tested
Refer to : http://www.diranieh.com/NET_WPF/Properties.htm
What am I missing?
The fact that local values take precedence over values set by styles: https://learn.microsoft.com/en-us/dotnet/framework/wpf/advanced/dependency-property-value-precedence
So instead of setting a local value like this:
<RadioButton ... Background="Green" ... />
...you should define the default value in the Style:
<Style TargetType="{x:Type ToggleButton}">
<Setter Property="Background" Value="Green"/>
<Setter Property="Margin" Value="5 5 5 5" />
<Setter Property="MinWidth" Value="100"/>
<Setter Property="MinHeight" Value="50"/>
<Style.Triggers>
<Trigger Property="IsChecked" Value="True">
<Setter Property="Background" Value="Blue"/>
<Setter Property="Foreground" Value="White"/>
</Trigger>
</Style.Triggers>
</Style>
...and again avoid setting the Background property of the RadioButton element:
<RadioButton GroupName="Rating" Style="{StaticResource RatingToggleButtons}" x:Name="Normal" Content="Normal" Grid.Row="0" />

WPF Button Status?

I am work on login page in my WPF application, I want the background image for login keypad buttons to change to two different states,not press (Default)show in image background (keypad_button.png), when pressed(IsPressed)(keypad_button_pressed.png). i tried to make this, and i succeeded to make the background button change when i pressed it (IsPressed Trigger), but the problem is in default background image ??
How to make default background image for button is appear, then when i pressed the button it change to another background image ?
Here's my Style :
<Setter Property="FocusVisualStyle" Value="{x:Null}" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border Name="border"
BorderThickness="{TemplateBinding BorderThickness}"
Padding="{TemplateBinding Padding}"
BorderBrush="{TemplateBinding BorderBrush}"
CornerRadius="1"
Background="{TemplateBinding Background}">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsPressed" Value="True">
<Setter Property="Background">
<Setter.Value>
<ImageBrush ImageSource="/RestaurantPOS;component/images/buttons/keypad_button_pressed.png"/>
</Setter.Value>
</Setter>
</Trigger>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Opacity" Value="0.25" />
<Setter Property="BorderBrush" Value="Transparent" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
This is my keypad buttons : (the style only applied on button number 7)
<Button x:Name="txb7" Click="txb7_Click" Content="7" HorizontalAlignment="Left" Margin="181,117,0,0" VerticalAlignment="Top" Width="72" Height="57" Style="{StaticResource ImageButton}" FontWeight="Bold" FontSize="18"></Button>
as you shewing, button number 7 default background don't appear(blue), but when i pressed it the (keypad_button_pressed.png) is work. how can i solve this issue.
I Do not want to used ToggleButton.
You can write one more trigger to check IsPressed is false and in this trigger you can set default image.
<ControlTemplate TargetType="Button">
<Border Name="border"
BorderThickness="{TemplateBinding BorderThickness}"
Padding="{TemplateBinding Padding}"
BorderBrush="{TemplateBinding BorderBrush}"
CornerRadius="1"
Background="{TemplateBinding Background}">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsPressed" Value="True">
<Setter Property="Background">
<Setter.Value>
<ImageBrush ImageSource="/RestaurantPOS;component/images/buttons/keypad_button_pressed.png"/>
</Setter.Value>
</Setter>
</Trigger>
<Trigger Property="IsPressed" Value="False">
<Setter Property="Background">
<Setter.Value>
<ImageBrush ImageSource="/RestaurantPOS;component/images/buttons/keypad_button.png"/>
</Setter.Value>
</Setter>
</Trigger>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Opacity" Value="0.25" />
<Setter Property="BorderBrush" Value="Transparent" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>

wpf button background hover color

I'm trying to change the background colour of a button's style in xaml on hover
This is my current approach, but it doesn't work. The default hover colour is being used
<Style x:Key="AtStyle" TargetType="Button">
<Setter Property="Background">
<Setter.Value>
<SolidColorBrush Color="{StaticResource AtBlue}" />
</Setter.Value>
</Setter>
<Setter Property="Foreground" Value="White" />
<Setter Property="Padding" Value="12,6" />
<Setter Property="BorderThickness" Value="0" />
<Setter Property="FontSize" Value="18.667" />
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background">
<Setter.Value>
<SolidColorBrush Color="Red" />
</Setter.Value>
</Setter>
</Trigger>
</Style.Triggers>
</Style>
I've seen other solutions that say that you need to override the Control template to achieve this, but those solutions also require you define the border and the content as well which seems unnecessary. What is the minimal approach to defining a hover state in Xaml?
I have created simple style based button based on your requirement,
XAML
<Style TargetType="Button">
<Setter Property="Background"
Value="Blue" />
<Setter Property="HorizontalAlignment"
Value="Center" />
<Setter Property="VerticalAlignment"
Value="Center" />
<Setter Property="Foreground"
Value="White" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border x:Name="bg"
Background="{TemplateBinding Background}"
BorderThickness="2"
BorderBrush="White">
<ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
VerticalAlignment="{TemplateBinding VerticalAlignment}" />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver"
Value="True">
<Setter Property="Background"
Value="Red"
TargetName="bg" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Let's look at the template of the default button style for Aero theme:
<ControlTemplate TargetType="{x:Type ButtonBase}">
<theme:ButtonChrome Name="Chrome"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
RenderDefaulted="{TemplateBinding Button.IsDefaulted}"
RenderMouseOver="{TemplateBinding IsMouseOver}"
RenderPressed="{TemplateBinding IsPressed}"
SnapsToDevicePixels="True">
<ContentPresenter
Margin="{TemplateBinding Padding}"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
RecognizesAccessKey="True"/>
</theme:ButtonChrome>
<ControlTemplate.Triggers>
<Trigger Property="IsKeyboardFocused" Value="True">
<Setter TargetName="Chrome" Property="RenderDefaulted" Value="True"/>
</Trigger>
<Trigger Property="ToggleButton.IsChecked" Value="True">
<Setter TargetName="Chrome" Property="RenderPressed" Value="True"/>
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Foreground" Value="#ADADAD"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
As you can see, the mouse-over and pressed colors are defined as bindings on the ButtonChrome's properties RenderMouseOver and RenderPressed. The way ButtonChrome is designed, they take priority over any values from the Background property. Therefore, unfortunately, the only way to override background color of a clicked or highlighted button is to override its template.

WPF button flash to white color when I Click

I just created the wpf button and when I click on the button, it changed to white color like flashing and change back to original color when I release the button. What could be the problem? I didn't use any effect. Below is my button xaml. please advice.
<Button Content="ROM" Height="121" HorizontalAlignment="Left" Margin="91,269,0,0" Name="button1" VerticalAlignment="Top" Width="566" FontSize="48" BorderBrush="#FF3DFF00" BorderThickness="10" Foreground="White">
<Button.BitmapEffect>
<DropShadowBitmapEffect ShadowDepth="2" Color="Gray"></DropShadowBitmapEffect>
</Button.BitmapEffect>
<Button.Background>
<RadialGradientBrush>
<GradientStop Color="#FF4094D8" Offset="0" />
<GradientStop Color="#FF2B476F" Offset="1" />
</RadialGradientBrush>
</Button.Background>
</Button>
One method is to place a transparent button on top of an image that looks like a button, then set the button's opacity value to zero.
<Image Name="buttonImage1" Source="../Images/infoButton.png" Grid.Row="1"/>
<Button Name="infoButton" Tap="infoButton_Tap" Opacity="0.0" BorderBrush="Transparent" Grid.Row="1"/>
This is becuase of the default ButtonChrome. if you extract the default details from Expression blend of the button
<Style x:Key="ButtonStyle1" TargetType="{x:Type Button}">
<Setter Property="FocusVisualStyle" Value="{StaticResource ButtonFocusVisual}"/>
<Setter Property="Background" Value="{StaticResource ButtonNormalBackground}"/>
<Setter Property="BorderBrush" Value="{StaticResource ButtonNormalBorder}"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
<Setter Property="HorizontalContentAlignment" Value="Center"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="Padding" Value="1"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Microsoft_Windows_Themes:ButtonChrome x:Name="Chrome" SnapsToDevicePixels="true" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" RenderDefaulted="{TemplateBinding IsDefaulted}" RenderMouseOver="{TemplateBinding IsMouseOver}" RenderPressed="{TemplateBinding IsPressed}">
<ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" RecognizesAccessKey="True"/>
</Microsoft_Windows_Themes:ButtonChrome>
<ControlTemplate.Triggers>
<Trigger Property="IsKeyboardFocused" Value="true">
<Setter Property="RenderDefaulted" TargetName="Chrome" Value="true"/>
</Trigger>
<Trigger Property="ToggleButton.IsChecked" Value="true">
<Setter Property="RenderPressed" TargetName="Chrome" Value="true"/>
</Trigger>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Foreground" Value="#ADADAD"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Microsoft_Windows_Themes:ButtonChrome is setting the effect. If you want to remove or modify the effects you have to create your own controltemplate or style

Resources