Develop Reference

How can I disable WPF button highlight when mouse over or when clicked in runtime?

I've this code in C# to create a button as a child of a StackPanel:
`
Button myButton = new Button();
//All button stuff (Background, text...).
myStackPanel.Children.add(myButton);
`
But, as every button, it highlights every time the mouse is over or when I click it. Is there any way to change that in an easy code (I'm still new to C#) can remove that highlight.
I don't know how to do this. I haven't seen anything explaining this and the only codes I could find were in XAML, and I didn't understand them so couldn't translate them to C#.
The problem is all the code I find is about retemplating the XAML code. What I need is to do what I mentioned in C#, as the control is created from scratch in C#.

I took a look at a few of the answers for this and didn't see any I liked much.
WPF controls are lookless, meaning they have fixed behaviour but not specific look to them. You can re template a wpf control to pretty much anything you can describe in xaml. Many wpf controls have quite complicated templates.
Here's one way to template a button as described.
I've put this style in my window's resources. Usually such styles are in resource dictionaries which are merged in app.xaml.
<Window.Resources>
<Style x:Key="NoMouseOverButtonStyle" TargetType="{x:Type Button}">
<Setter Property="SnapsToDevicePixels" Value="true" />
<Setter Property="OverridesDefaultStyle" Value="true" />
<Setter Property="BorderBrush" Value="LightGray"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="Background" Value="Transparent"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border x:Name="Border"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Background="{TemplateBinding Background}" >
<ContentPresenter Margin="2"
HorizontalAlignment="Center"
VerticalAlignment="Center"
RecognizesAccessKey="True" />
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<Grid>
<Button Style="{StaticResource NoMouseOverButtonStyle}"
Content="This is my Button"
Click="Button_Click"
HorizontalAlignment="Left"
VerticalAlignment="Top"
/>
</Grid>
</Window>
The button references the style as a resource.
That style sets some defaults so the button has a border you can see but over ride.
The contentpresenter is critical because this is where whatever you make content of your button will appear.
If I set an actual value on a button then that will over ride the style.
Hence
<Button Style="{StaticResource NoMouseOverButtonStyle}"
Content="This is my Button"
Click="Button_Click"
HorizontalAlignment="Left"
VerticalAlignment="Top"
BorderBrush="Red"
/>
Gives me a red border on my button.
A lightgray border is rather simpler than a button has by default.
You could reproduce that. Maybe that'd be an interesting learning exercise.
Lookup the button template on msdn.
Google: "wpf button template msdn"
Take a look at that. Brace yourself - it is complicated.
See the button border brush is hard coded in the template?
Change the style above so it does the same.
Clue:
<Setter.Value>

Custom title bar behing pivot header

After the 1809 Windows 10 update, I have been running in some issues with my title bar being behind the pivot header. Something like on chrome where you have your tabs on top.
If I test this sample code in a Windows machine with 1803 update it works fine. But if it is running in a 1809 machine I cannot drag my app if the pivot is on top.
Here is the sample I've been using:
https://github.com/nikomac/CustomTitleBar
I modified the pivot style so I could reach the titlebar behind.
<Style x:Key="PivotDefaultStyle"
TargetType="Pivot">
<Setter Property="Margin" Value="0" />
<Setter Property="Padding" Value="0" />
<Setter Property="IsTabStop" Value="False" />
<Setter Property="Background" Value="{x:Null}" />
<Setter Property="ItemsPanel">
...
<ScrollViewer x:Name="ScrollViewer"
Margin="{TemplateBinding Padding}"
VerticalContentAlignment="Stretch"
Background="{x:Null}"
BringIntoViewOnFocusChange="False"
HorizontalScrollBarVisibility="Hidden"
HorizontalSnapPointsAlignment="Center"
...
Those background property are the only modification I had to do to make it work in 1803.
Is there any way I could adjust this style or fix to make it work again?
Thank you.

WPF Custom Control with Colour Animation Between User-Settable Values

I've been trying to make a custom control that represents an alarm annunciator. visually, the control is quite simple and looks something like this:
The important design criteria for the Annunciator control are:
Can be shipped as part of a control library
Has a default style (colours, fonts) that differ from the system defaults but can be overridden by the user
Has text (usually one word, e.g. "ALARM") that can be specified by the user.
The text must flash with one of a number of different cadences, depending on alert severity. Cadence is settable by the user. Cadences include SteadyOn and SteadyOff and a few different alternatives in between.
When the annunciator is on/illuminated, it renders in a colour specified by ActiveColor property.
When the annunciator is off, it renders in the InactiveColor property. InactiveColor is typically close but not identical to the background colour
ActiveColor and InactiveColor can be set by the user.
I have based my custom control on the Control class. The visual tree consists of basically a border and a TextBlock, defined in Generic.xaml like this:
<Style TargetType="{x:Type local:Annunciator}">
<Setter Property="FontFamily" Value="OCR A Extended" />
<Setter Property="FontSize" Value="12" />
<Setter Property="BorderThickness" Value="1" />
<Setter Property="BorderBrush" Value="Black" />
<Setter Property="Margin" Value="2" />
<Setter Property="Padding" Value="2" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type local:Annunciator}">
<Border Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}">
<TextBlock x:Name="AnnunciatorTextBlock"
TextWrapping="Wrap"
Text="{TemplateBinding AnnunciatorText}"
Foreground="{TemplateBinding ActiveColor}"
TextAlignment="Center"
/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Initially I tried to get the animations working using story boards and triggers. This would have been an elegant solution but I ran into a brick wall because in a control template, I was unable to use {TemplateBinding} for the To property of a ColorAnimation. After many hours and much reading, I concluded that this was not a viable option (maybe I'm wrong?).
So I tried again using code-behind and basing my solution on a similar control I did for Windows Forms, several years ago. In that solution I have a Cadencemanager singleton. My controls then register with the CadenceManager and whenever the control needs to be updated, the CadenceManager calls the control's ICadencedControl.CadenceUpdate() method. I tried this technique using a DispatcherTimer to avoid any cross-threading update issues and all of the code runs. In my custom control's update method, I update the foreground colour of the text block like so:
public void CadenceUpdate(bool newState)
{
var brush = newState && IsEnabled && !Muted ? ActiveColor : InactiveColor;
textBlockControl.Foreground = brush;
}
The update method is being called as expected (as evidenced by setting a breakpoint in the debugger). However, the text colour never updates.
So how do I make the colour of my TextBlock element in my custom control update in response to a DispatcherTimer tick event? I just can't see why this isn't working.

You could use VisualStates for the different flashing states:
<ControlTemplate TargetType="{x:Type local:Annunciator}">
<Border Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}">
<Border.Resources>
<Storyboard x:Key="BlinkingStoryboard">
<ColorAnimation
Storyboard.TargetName="AnnunciatorTextBlock"
Storyboard.TargetProperty="Foreground.Color"
From="{Binding InactiveColor,
RelativeSource={RelativeSource TemplatedParent}}"
To="{Binding ActiveColor,
RelativeSource={RelativeSource TemplatedParent}}"
Duration="0:0:1"
AutoReverse="True"
RepeatBehavior="Forever"/>
</Storyboard>
<!-- more Storyboards -->
</Border.Resources>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup Name="FlashStates">
<VisualState Name="Blinking"
Storyboard="{StaticResource BlinkingStoryboard}"/>
<!-- more VisualStates -->
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<TextBlock x:Name="AnnunciatorTextBlock" Text="Hello">
<TextBlock.Foreground>
<SolidColorBrush Color="{TemplateBinding Foreground}"/>
</TextBlock.Foreground>
</TextBlock>
</Border>
</ControlTemplate>
Note that the Storyboards are declared as resources to make the InactiveColor and ActiveColor bindings work with RelativeSource TemplatedParent.
You would now activate a VisualState like this:
VisualStateManager.GoToState(annunciator, "Blinking", false);

How to change default mouse hover behavior on dynamically generated buttons

I am a relatively new user of WPF and have run into a problem regarding dynamic Button generation and Buttons' default hover properties.
I am currently working on an application where a significant number of buttons are being generated on a Canvas in the code behind. The contents of each button are unique images referenced by an array of objects containing Uri strings. This array is populated by reading in a file containing these Uri strings, so the number and placement of buttons on this canvas vary based on which file is being read.
For the most part, the appearance of the Canvas when the application runs is what was intended, however hovering over any of the Buttons replaces the image with the default blue background for the duration that the mouse overlaps.
Here is an example of the code that I am using to generate the buttons:
exampleButton = new Button { Content = "Name", Width = 50, Height = 65, Background = new ImageBrush(new BitmapImage(new Uri(#object.UriString, UriKind.Relative))) };
exampleButton.Style = exampleStyle;
exampleCanvas.Children.Add(exampleButton);
Please understand that I have omitted pieces of code irrelevant to my question.
Here is an example of the style that was used, also in the code behind:
exampleStyle = new Style(typeof(Button));
exampleStyle.Setters.Add(new Setter(Button.ForegroundProperty, Brushes.Transparent));
exampleStyle.Setters.Add(new Setter(Button.BorderBrushProperty, Brushes.Transparent));
Together these achieve the effect I am trying to create, barring hover behavior.
So far I have tried appending ControlTemplate overrides into the style declaration but am unsure of how that translates from XAML to the C# code behind. I have also tried creating and binding button templates created in the XAML but I haven't had success in finding explanations or tutorials that apply to my situation.
Any help to accomplish this via the code behind would be greatly appreciated. Of course, if I'm doing this really unconventionally and there is a more standard way of doing things I am all ears.
EDIT:
This is the XAML I am using to declare the style that my dynamically generated buttons are using.
<Style x:Key="MySuperButtonStyle" TargetType="{x:Type Button}">
<Setter Property="OverridesDefaultStyle" Value="True" />
<Setter Property="Width" Value="50" />
<Setter Property="Height" Value="65" />
<Setter Property="Foreground" Value="Transparent" />
<Setter Property="BorderBrush" Value="Black" />
<Setter Property="BorderThickness" Value="1" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="BorderBrush" Value="Black"/>
</Trigger>
</Style.Triggers>
</Style>
Using this call to assign the style in the code behind:
exampleButton.Style = (Style)FindResource("MySuperButtonStyle");

This is happening because the default Button control style has a trigger that changes the Background property of the button when the mouse hovers over it. You need to use a custom style for the button:
<Style x:Key="MySuperButtonStyle" TargetType="{x:Type Button}">
<Setter Property="OverridesDefaultStyle" Value="True" />
<Setter Property="Width" Value="50" />
<Setter Property="Height" Value="65" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border Background="{TemplateBinding Background}">
<ContentPresenter HorizontalAlignment="Center"
VerticalAlignment="Center" />
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Here the width and the height are set using the style, so you no longer need to set those properties in code. The control template has been changed so it consists only of a Border element with the content inside of it. There are no triggers at all, so the button won't change its appearance when clicked or hovered over.
In your code all you need to do is obtain a reference to this style then assign that to the Style property when you are creating the button.
Having said all this, in WPF you rarely need to create controls in code. Instead you should really be using the MVVM (Model-View-ViewModel) pattern and data binding. You probably shouldn't be creating styles and setters in code either.

ColorAnimation stuck on color when button is pressed repeatedly

I have a custom button-style with a ColorAnimation.
This works fine, but when pressed multiple times repeatedly, it stays stuck on the target color.
<Style TargetType="Button" x:Key="mainButton">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}">
<ContentPresenter Content="{TemplateBinding ContentControl.Content}" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsPressed" Value="True">
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<ColorAnimation
Duration="0:0:0.10"
Storyboard.TargetProperty="(Foreground).(SolidColorBrush.Color)"
To="Red"
AutoReverse="True"/>
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
How can I resolve this ?

Update
Yeh if you cannot afford to remove the Storyboard in Trigger.ExitActions then you do indeed have to address the From issue for intermediate starting Storyboard's yourself.
However specifying a hard-coded From isn't the only solution. You can let the animation reset itself to the underlying base color when it's starting up.
The benefit of this is by not specifying a From you got one less thing to keep track of with future updates.
<Storyboard AutoReverse="True">
<!-- By not specifying a To or From we pretty much reset the property to un-animated state(Exactly what the hard-coded from does) -->
<ColorAnimation Duration="0:0:0"
Storyboard.TargetProperty="(Foreground).(SolidColorBrush.Color)" />
<!-- This part is same as original time to kick into new Foreground as desired -->
<ColorAnimation Duration="0:0:1.5"
Storyboard.TargetProperty="(Foreground).(SolidColorBrush.Color)"
To="Red" />
</Storyboard>

You have not set the From property on your ColorAnimation. So when you press the button in the middle of its animation, the Storyboard takes the current Foreground color value as its From, and this is the color that the animation reverses back to.
Now when you repeatedly press the button, the From color moves closer and closer to red, giving the impression that the color is stuck on red.
Update:
This answer only points out the problem. Refer to Viv's answer for an elegant solution