Disable WPF Button Hover Effect - c#

The standard WPF Button control has a mouseover highlight that changes the colour of the control. I'm trying to disable this effect. Whilst I see lots of questions and answers to this on SO that involve changes to XAML, I'm trying to do this 100% programmatically, and I haven't been able to find any solution to this problem.
I don't have any XAML, as my WPF app dynamically adds a list of (derived) button controls to the form. The derived button class has no XAML whatsoever.
var button = new CustomButton(); // Inherits System.Windows.Controls.Button
button.Content = textBlock; // System.Windows.Controls.TextBlock
// other various property changes to the custom button removed
button.Focusable = false;
grid.Children.Add(button);
The button works perfectly with my custom code, but I just can't remove the mouseover effect. This is particularly bad, as it's being used on a touch screen, so the last touched button retains the mouseover effect until another button is pressed or the user clicks an unused area of the window.
Thanks to Kostas in the comments, I now know I need to create a global style and apply this to my custom control, however as per my original question, all the examples of doing this involve XAML, so my question really ought to be more specifically, how can I create a global style without a mouse over trigger, entirely programmatically?


The piece of the puzzle I was missing, was that the XAML for the style doesn't need to go in the button class, it instead goes into the parent window XAML. The Style is then added to the button class as it's added to the Window:
<Window x:Class="SomeOrg.SomeApp.WpfInterface.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:WpfInterface"
mc:Ignorable="d"
Title="SomeApp" Height="450" Width="800"
Background="#ffffffe1">
<Window.Resources>
<Style x:Key="MyButton" TargetType="Button">
<Setter Property="OverridesDefaultStyle" Value="True" />
<Setter Property="Cursor" Value="Hand" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border Name="border" BorderThickness="0" BorderBrush="Black" Background="{TemplateBinding Background}">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<Grid>
<Grid x:Name="grid" HorizontalAlignment="Stretch" Height="Auto" Margin="10,10,10,10" VerticalAlignment="Stretch"
Width="Auto" Background="#ffffffe1"/>
</Grid>
</Window>
In the parent window's code, where the custom button is added to the window, the above style (MyButton), is applied as follows:
var button = new CustomButton();
customButton.Style = (Style) this.Resources["MyButton"];
grid.Children.Add(button);

Related

WPF window with custom WindowChrome maximizes differently

I have just started to use WindowChrome Class on a WPF window. I have noticed that when maximizing the window, it displays differently depending on whether I use the standard Chrome or the custom Chrome. Why?
I am double clicking the top of the window to maximize in both cases there is no code behind.
Here is the XAML - to add or remove the WindowChrome I am just deleting the Style property.
<Window
x:Class="MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:local="clr-namespace:IPSurfer"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:sys="clr-namespace:System;assembly=mscorlib"
Title="MainWindow"
Width="800"
Height="450"
Style="{DynamicResource ResourceKey=StandardStyle}"
WindowStartupLocation="CenterScreen"
mc:Ignorable="d">
<!-- Style="{DynamicResource ResourceKey=StandardStyle}" -->
<Window.Resources>
<Style x:Key="StandardStyle" TargetType="{x:Type local:MainWindow}">
<Setter Property="WindowChrome.WindowChrome">
<Setter.Value>
<WindowChrome
CaptionHeight="50"
GlassFrameThickness="0"
ResizeBorderThickness="5" />
</Setter.Value>
</Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type local:MainWindow}">
<Grid>
<Border BorderBrush="PeachPuff" BorderThickness="5">
<Grid>
<ContentPresenter Content="{TemplateBinding Content}" />
<TextBlock
Margin="10,8,0,0"
HorizontalAlignment="Left"
VerticalAlignment="Top"
Text="This is the new title" />
</Grid>
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<Grid>
<Border BorderBrush="Teal" BorderThickness="5">
<Grid>
</Grid>
</Border>
</Grid>
Not Maximized, Standard Chrome - notice the Teal border
Maximized,Standard Chrome - this is showing the full Teal border fitting into the screen.
With the Window styled with the WindowChrome this is what it looks like not maximized. You see a border from my WindowChrome and the Teal border.
This is what it looks like maximized. My border in the Window Chrome is gone and only about half of the Teal border is there.
I also note that when I look at the Actual Width and Height of the Window when maximized the value is the same. It is just what is displayed is different.

How to globally change the styling of the dottet lines around all focusble elements in one place?

From here I learned how to change the styling of dotted lines around focused button. I would like to apply the same thing on all focus-able elements of the current WPF application (or if not possible current page) in one place ( not doing separately for focus-able buttons, textboxes etc)
PS. Preferably in code behind

Define this Style in your App.Xaml .
<Application.Resources>
<Style x:Key="StyleFocusDefault" TargetType="{x:Type Control}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Control}">
<Grid>
<Rectangle StrokeThickness="2" Stroke="Black" StrokeDashArray="2"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Application.Resources>
And then you can apply like : < ... FocusVisualStyle="{DynamicResource StyleFocusDefault}" .../>
This will change FocusVisualStyle for all Controls who have FocusVisualStyle property. You can further experiment with this appaorach for various controls.

Click on WPF Element with lower ZOrder and without using IsHitTestVisible

To simplify the problem, I have the following XAML Windows :
<Window x:Class="WpfApplication1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:WpfApplication1"
mc:Ignorable="d"
Title="MainWindow" Height="350" Width="525"
DataContext="{StaticResource MainViewModel}">
<Grid>
<Button Click="Button_Click">Click Me</Button>
<ListBox ItemsSource="{Binding Items}" Background="{x:Null}">
</ListBox>
</Grid>
</Window>
When it runs it look like this :
What I would expect is:
I'm able to select Items ( WpfApplication1.BusinessObject )
AND also able click on the button ( as I marked Background as {x:Null} )
But I can't click on the button, only select items in the listbox.
Note: If I use IsHitTestVisible, I can click on the button, but no more on the items, which makes sense. I also absolutely need to have both listbox and button taking the whole windows. Having on top the listbox and on bottom the button is not a solution.
Is there a good way to have this working ?
Thanks for your help !

you can try putting your listbox and button inside a StackPanel
also, it does not seem like your button is bound to any actions, could that be the reason : )?

Another option if you want the listbox sitting on top of and partially covering your button is to set `VerticalAlignment="Top" on your listbox. This will allow the listbox to grow vertically and only the height of the listbox will cover the button. However, if the listbox has a lot of items then it will completely cover the button and you will not be able to click the button.
You could always add PreviewMouseDown handler on the listbox and trigger the button click or command. That way if the listbox fills the entire window, you'll still be able to trigger the button handler.

Have a look at this thread: Canvas in ScrollViewer (Preview)MouseButtonDown event order
The problem is the ScrollViewer that handles mouse events. You could implement your custom ListBox template and use a custom ScrollViewer derived class with the code changes shown in the mentioned thread.

Thanks dotsven, setting handle=false didn't work for me, but I found this question that helped me: Click through ListBox to underlying Control. Taking inspiration from this I removed the ScrollViewer by setting a new style to my listbox and it worked :
<Style x:Key="{x:Type ListBox}" TargetType="ListBox">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ListBox}">
<Border x:Name="Bd" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Padding="1" SnapsToDevicePixels="true">
<ItemsPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Background" TargetName="Bd" Value="{DynamicResource {x:Static SystemColors.ControlBrushKey}}"/>
</Trigger>
<Trigger Property="IsGrouping" Value="true">
<Setter Property="ScrollViewer.CanContentScroll" Value="false"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
I also had to keep the background to {x:Null} :
<ListBox ItemsSource="{Binding Items}" Background="{x:Null}" Height="65" Width="242"/>
Thanks all for your help !

WPF custom control library

I am trying to build a custom control which has button and text. When i am trying to compile i am getting the following error.
Error 1 'ResourceDictionary' root element requires a x:Class attribute to support event handlers in the XAML file. Either remove the event handler for the Click event, or add a x:Class attribute to the root element.
My Code :
<ResourceDictionary
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:textbtn">
<Style TargetType="{x:Type local:CustomControl1}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type local:CustomControl1}">
<Border Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}">
<Grid>
<TextBlock Text="This is a Test" Foreground="Aqua" Background="AntiqueWhite"/>
<Button Content="Button" Height="23" HorizontalAlignment="bottom" Name="button1" VerticalAlignment="Top" Width="75" Click="button1_Click" />
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ResourceDictionary>

The error means exactly what it says. The click event handler actually does the following:
myButtonName.Click += myClass.ClickHandlerName;
If you don't have a class assigned to the resource dictionary, it doesn't know what to assign the click handler to!
Because a control template shouldn't be tightly coupled to a specific class in the code behind, I would remove the click handler from the template entirely. Command is a better choice in MVVM anyways.

The error is well explained by LordTakkera, but he doesn't want the simple solution to be appened to his answer, so, to clear the point, Providing a Class Name to the resource dictionary will allow you to use event handler as in other controls:
<ResourceDictionary
x:Class="ResourceDictionaryClass1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:textbtn">
But indeed is LordTakkera right: Commands are a clean way of implementing ui callbacks.

Border Margin in Window template doesn't have any effect when used with WindowChrome

I was checking out the WindowChrome class in System.Windows.Shell library (v 3.5.41019.1). When I try to create a Window template, the margin of the Border element in the template seems to have no effect:
<Window x:Class="WpfApplication7.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:shell="clr-namespace:Microsoft.Windows.Shell;assembly=Microsoft.Windows.Shell"
Title="MainWindow" Height="350" Width="525" Style="{DynamicResource WindowStyle1}">
<Window.Resources>
<Style x:Key="WindowStyle1" TargetType="{x:Type Window}">
<!-- Here is the WindowChrome.-->
<Setter Property="shell:WindowChrome.WindowChrome">
<Setter.Value>
<shell:WindowChrome />
</Setter.Value>
</Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Window}">
<!-- And here is the Border. Its margin has no effect as far as I can tell.-->
<Border Margin="25" Background="Red">
<AdornerDecorator>
<ContentPresenter/>
</AdornerDecorator>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<Grid>
</Grid>
</Window>
What do you think is the reason for that? I am wondering that, because I saw that some people use something like*:
<Border x:Name="WindowBorder" Margin="{Binding Source={x:Static shell:SystemParameters2.Current}, Path=WindowNonClientFrameThickness}" Background="Red">
But as it doesn't have any effect in my tests, what could be the point of doing this?
(*) One of the places it is used is the ModernUI project on CodePlex.
Edit: I have tested this on Windows 7 with Aero on.
Edit 2: It's still the same with Aero off.

According to MSDN, WindowChrome is
Represents an object that describes the customizations to the non-client area of a window.
After reading MSDN sample and playing your code a while, I noticed your code should be like following from MSDN sample code:
<Style x:Key="StandardStyle" TargetType="{x:Type local:MainWindow}">
<Setter Property="shell:WindowChrome.WindowChrome">
<Setter.Value>
<shell:WindowChrome />
</Setter.Value>
</Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type local:MainWindow}">
<!--Note there is a Grid as the root-->
<Grid>
<Border Background="White"
Margin="{Binding Source={x:Static shell:SystemParameters2.Current}, Path=WindowNonClientFrameThickness}">
<ContentPresenter Content="{TemplateBinding Content}" />
</Border>
<TextBlock Text="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Title}"
VerticalAlignment="Top" HorizontalAlignment="Left"
Margin="36,8,0,0"/>
<Image Source="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Icon}"
VerticalAlignment="Top" HorizontalAlignment="Left"
Margin="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=(shell:WindowChrome.WindowChrome).ResizeBorderThickness}"
Width="{Binding Source={x:Static shell:SystemParameters2.Current}, Path=SmallIconSize.Width}"
shell:WindowChrome.IsHitTestVisibleInChrome="True"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
Note, there's a Grid as the root element which contains a few elements for customizing the NC of the window.
UPDATE:
You may notice in the remark of the MSDN page, it contains sections:
WindowStyle.None
WindowChrome
These are the two ways of customizing the appearance of a WPF application window.
However, setting the Window.WindowStyle property to WindowStyle.None:
This removes the non-client frame from the window and leaves only the
client area, to which you can apply a custom style. However, when the
non-client frame is removed, you also lose the system features and
behaviors that it provides, such as caption buttons and window
resizing. Another side effect is that the window will cover the
Windows taskbar when it is maximized.
Then WindowChrome is introduced to enable NC customization using WPF:
To customize a window while retaining its standard functionality, you
can use the WindowChrome class. The WindowChrome class separates the
functionality of the window frame from the visuals, and lets you
control the boundary between the client and non-client areas of your
application window. The WindowChrome class lets you put WPF content in
the window frame by extending the client area to cover the non-client
area. At the same time, it retains system behaviors through two
invisible areas; the resize border and caption areas.
So back to your question, the template you found, should be copied from the MSDN sample code, but missed the true root Grid.
The Margin on the Border is for giving some space to the NC.
In the MSDN sample code, the ContenPreseter only contains the Client area, while the NC contains the Border, a TextBlock for window title, and an Image for window icon.
To recap, setting WindowChrome enables you to customize the NC area of the window in the Window.Template.
NOTE:
The sample MSDN sample code seems a little out of date in .Net 4.5, the System.Windows.Shell.WindowChrome is now in the PresentationFramework.dll, so the code may look like:
<Window x:Class="WpfApplication1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525" Style="{DynamicResource WindowStyle1}" Icon="Icon1.ico">
<Window.Resources>
<Style x:Key="WindowStyle1" TargetType="{x:Type Window}">
<Setter Property="WindowChrome.WindowChrome">
<Setter.Value>
<WindowChrome />
</Setter.Value>
</Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Window}">
<Grid>
<Border Background="Red"
Margin="{Binding Source={x:Static SystemParameters.WindowNonClientFrameThickness}}">
<ContentPresenter Content="{TemplateBinding Content}" />
</Border>
<TextBlock Text="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Title}"
VerticalAlignment="Top" HorizontalAlignment="Left"
Margin="36,8,0,0"/>
<Image Source="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Icon}"
VerticalAlignment="Top" HorizontalAlignment="Left"
Margin="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=WindowChrome.WindowChrome.ResizeBorderThickness}"
Width="{Binding Source={x:Static SystemParameters.SmallIconWidth}}"
WindowChrome.IsHitTestVisibleInChrome="True"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<Grid>
<Button />
</Grid>

I think there is some misunderstanding in the way you are trying to set the border. Here is the explanation of WindowChrome Class as provided in msdn
The WindowChrome class separates the functionality of the window frame from the visuals, and lets you control the boundary between the client and non-client areas of your application window. The WindowChrome class lets you put WPF content in the window frame by extending the client area to cover the non-client area. At the same time, it retains system behaviors through two invisible areas; the resize border and caption areas.
So if you are trying to customize the NonClient Area of the Window, its not the Content Presenter that you should set Border onto. That is the client area. Instead in the Template you can add your XAML other than Content Presenter to define your NonClient Area. I just tried a simple code based on your code and it shifts the Title Property of the Window to the right by a value of 100. Here is the code.
<Window x:Class="WPF_ToggleButton.ShellWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:shell="clr-namespace:Microsoft.Windows.Shell;assembly=Microsoft.Windows.Shell"
Title="MainWindow" Height="350" Width="525" Style="{DynamicResource WindowStyle1}"
>
<Window.Resources>
<Style x:Key="WindowStyle1" TargetType="{x:Type Window}">
<Setter Property="shell:WindowChrome.WindowChrome">
<Setter.Value>
<shell:WindowChrome />
</Setter.Value>
</Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Window}">
<Grid>
<Border Background="Yellow">
<AdornerDecorator>
<ContentPresenter Content="{TemplateBinding Content}"/>
</AdornerDecorator>
</Border>
<TextBlock Text="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Title}"
VerticalAlignment="Top" HorizontalAlignment="Left"
Margin="100,0,0,0"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<Grid>
<Border Margin="50" Background="AliceBlue"/>
</Grid>
Thus you can have any elements in the NonClient Area like image representing your Window Close Button, etc using XAML code. The last element in the Window defines the Client Area which is passed to the Content Presenter in the Template
In short if you wan't to customize Client Area use the Content Presenter, whereas if you are interested in changing the NonClient Area like Title Bar display, close image icon then you define it in the Template.
One short observation. I think Margin doesn't make any sense for a Window. Try setting it for a normal window and I think it won't respect it.

Run into the same problem. No matter how I tried to set the Margin of the root element (its type does not matter) in MainWindow's ControlTemplate, it was always 0 when starting the app. The answer (thx to ILSpy) is in WindowChrome implementation.
When WindowChrome is attached to a Window, it is applying the Chrome feature, and among others, it executes a method WindowChromWorker._FixupTemplateIssues, which simple resets the window first visual element's Margin to a new Thickness instance, thus, erasing your custom settings by styles, templates, etc.
Workarounds can be:
Embedd your template into a new, look-less root element e.g. a Grid, so your original root's Margin won't be overridden
Adjust Padding of your root

Categories

Resources