I am making a WPF project. While running the application, as I take my cursor to a button, it gets highlighted by blue color filled inside it.
Now, I want to remove this highlight...
How do I do so?
The link isn't working for me, so I can't see exactly what you are getting at, but I assume that you're trying to change that default blue-ish gradient. You need to override the template for the button in a style, and then you can customize it to look however you want. You can't just set the background color or use triggers to change it without overriding the template, because the default template has some extra stuff in it to show that gradient effect.
Here is an example of a button I have used before that is fairly straightforward. This example uses a trigger to change the foreground color of the button when it is pressed, but will never change the background color.
<Style TargetType="{x:Type Button}">
<Setter Property="Background" Value="White"/>
<Setter Property="FontWeight" Value="SemiBold"/>
<Setter Property="Foreground" Value="{StaticResource BrushBtnText}"/>
<Setter Property="Margin" Value="8,4,8,4"/>
<Setter Property="Padding" Value="6"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="BorderBrush" Value="{StaticResource BrushBorderLight}"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border Margin="{TemplateBinding Margin}"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Padding="{TemplateBinding Padding}">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsPressed" Value="True">
<Setter Property="Foreground" Value="{StaticResource BrushBtnText}"/>
</Trigger>
</Style.Triggers>
</Style>
Also, if you're interested, here is what the button's default template is:
<Style 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}">
<Themes:ButtonChrome x:Name="Chrome" BorderBrush="{TemplateBinding BorderBrush}" Background="{TemplateBinding Background}" RenderMouseOver="{TemplateBinding IsMouseOver}" RenderPressed="{TemplateBinding IsPressed}" RenderDefaulted="{TemplateBinding IsDefaulted}" SnapsToDevicePixels="true">
<ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</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>
Actually, I found the thing where I was going wrong. Whenever my pointer goes to a button, does not change the background of the button or even the foreground of the button, but it changes the background of the border.
So, while overwriting the button style, actually the border of the background has to be overwritten and not the button foreground or the background.
Here is the answer to this question : How to Disable MouseOver Effects
Related
This question already has an answer here:
DataGrid row selection not working when padding is added to cells
(1 answer)
Closed 4 years ago.
I'm building a Datagrid that has rows with height=40. On a row selection, the program opens a new tab with a User Control specific to that item.
When I click anywhere in the row that's outside of the cell contents (Red boxes in this image), The event fires but 'CurrentItem' does not get updated.
Essentially, the row only gets selected if the cell contents are clicked. Has anyone else dealt with this, and have a solution for what's going on?
Here's my styling:
<DataGrid Name="MachinesGrid" ItemsSource="{Binding MainData.Machines}">
<DataGrid.Style>
<Style TargetType="DataGrid">
<Setter Property="SelectionMode" Value="Single" />
<Setter Property="SelectionUnit" Value="FullRow" />
<Setter Property="AutoGenerateColumns" Value="False" />
<Setter Property="ColumnWidth" Value="Auto" />
<Setter Property="CanUserAddRows" Value="False" />
<Setter Property="Background" Value="{StaticResource BrushBackground}" />
<Setter Property="RowBackground" Value="{StaticResource BrushGreyMid}" />
<Setter Property="AlternatingRowBackground" Value="{StaticResource BrushGreyDark}" />
<Setter Property="GridLinesVisibility" Value="None" />
<Setter Property="ColumnHeaderStyle">
<Setter.Value>
<Style TargetType="DataGridColumnHeader">
<Setter Property="Background" Value="{StaticResource BrushBlue}" />
<Setter Property="Foreground" Value="{StaticResource BrushWhite}" />
<Setter Property="Height" Value="40" />
<Setter Property="FontWeight" Value="SemiBold" />
</Style>
</Setter.Value>
</Setter>
<Setter Property="CellStyle">
<Setter.Value>
<Style TargetType="DataGridCell">
<Setter Property="VerticalAlignment" Value="Center" />
<Setter Property="Foreground" Value="{StaticResource BrushWhite}" />
<Setter Property="Background" Value="Transparent" />
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="FocusVisualStyle" Value="{x:Null}"/>
</Style>
</Setter.Value>
</Setter>
<Setter Property="RowStyle">
<Setter.Value>
<Style TargetType="DataGridRow">
<Setter Property="Height" Value="40" />
<EventSetter Event="MouseLeftButtonUp" Handler="EventSetter_OnHandler" />
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="{StaticResource BrushGreyLite}" />
</Trigger>
<Trigger Property="IsSelected" Value="True">
<Setter Property="Background" Value="{StaticResource BrushBlue}" />
</Trigger>
</Style.Triggers>
</Style>
</Setter.Value>
</Setter>
</Style>
</DataGrid.Style>
As far as I know your problem is that selection is initially triggered in DataGridCell, by setting
<Setter Property="VerticalAlignment" Value="Center" />
your are telling that DataGridCell should vertically centered within a DataGridRow which leads to some space top and bottom which is not part of the DataGridCell and therefore not triggering any selection.
To solve this you have to set VerticalAlignment to Stretch(default) but then your content isn't centered anymore, for this you have to override the ControlTemplate of DataGridCell:
<ControlTemplate TargetType="{x:Type DataGridCell}">
<Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" SnapsToDevicePixels="True">
<ContentPresenter VerticalAlignment="{TemplateBinding VerticalContentAlignment}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
</Border>
</ControlTemplate>
Now you can set VerticalContentAlignment and HorizontalContentAlignment on DataGridCell to align your content.
Your DataGridCell-Style should then look like this
<Style TargetType="DataGridCell">
<Setter Property="VerticalContentAlignment" Value="Center" />
<Setter Property="Foreground" Value="{StaticResource BrushWhite}" />
<Setter Property="Background" Value="Transparent" />
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="FocusVisualStyle" Value="{x:Null}"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type DataGridCell}">
<Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" SnapsToDevicePixels="True">
<ContentPresenter VerticalAlignment="{TemplateBinding VerticalContentAlignment}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
I am looking for something to set the BorderBrush Color of a Button inside my Mahapps Metro Window when i tabbing with my Keyboard, but I cannot find something. Is there a way to set a new color for the border?
You can create a style that overrides the default template, you can replace the colors with whatever you like and add more triggers if desired:
<Style TargetType="Button" x:Key="DefaultButtonStyle">
<Setter Property="BorderBrush" Value="Transparent"/>
<Setter Property="Background" Value="#3a3a3a"/>
<Setter Property="Cursor" Value="Hand"/>
<Setter Property="metro:ButtonHelper.PreserveTextCase" Value="True"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Padding="{TemplateBinding Padding}"
Margin="{TemplateBinding Margin}">
<ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="#424242"/>
</Trigger>
</Style.Triggers>
</Style>
Alright, so i made it with Aleksandr Albert answer. All i missed was the property IsFocused
<Style x:Key="ButtonMentorPlusStyle" TargetType="{x:Type Button}" BasedOn="{StaticResource AccentedSquareButtonStyle}">
<Setter Property="Foreground" Value="White" />
<Setter Property="Background" Value="#0D6373" />
<Setter Property="FontSize" Value="14" />
<Setter Property="FontFamily" Value="Arial" />
<Setter Property="FontStyle" Value="Normal" />
<Setter Property="MinWidth" Value="100" />
<Setter Property="MinHeight" Value="28" />
<Setter Property="Controls:ButtonHelper.PreserveTextCase" Value="True" />
<Setter Property="Padding" Value="10, 0, 10, 0" />
<Setter Property="VerticalContentAlignment" Value="Center" />
<Style.Triggers>
<Trigger Property="IsFocused" Value="True">
<Setter Property="BorderBrush" Value="White" />
</Trigger>
</Style.Triggers>
</Style>
Thank you guys
I require a toggle button that has not border when IsChecked = False and has a simple 1pt border of a certain color when IsChecked = True. I have the following style but my border when the button IsChecked = True is being set to Transparent (using Snoop to inspect)
<Style x:Key="InfoToggleButton"
TargetType="{x:Type ToggleButton}">
<Setter Property="Background" Value="#EEEEF2"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ToggleButton">
<Border CornerRadius="0"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}">
<ContentPresenter x:Name="contentPresenter"
ContentTemplate="{TemplateBinding ContentTemplate}"
Content="{TemplateBinding Content}"/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsChecked" Value="True">
<Setter Property="BorderBrush" Value="#007ACC"/>
<Setter Property="BorderThickness" Value="1"/>
</Trigger>
<Trigger Property="IsChecked" Value="False">
<Setter Property="BorderBrush" Value="Transparent"/>
<Setter Property="BorderThickness" Value="0"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
The button works and displays properly, but when I check/click it, the border does not get displayed.
I implement this style like
<ToggleButton Grid.Column="0"
Style="{StaticResource InfoToggleButton}"
IsChecked="{Binding IsDisplayingBetInfo, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
Content="{Binding BetInfoIconSource}"/>
How can I get a simple toggle button with border?
Thanks for your time.
I've figured out the problem and the solution but don't exactly know why it happens.
Problem: Some value other than {x:Null} must be set as the content of the toggle button.
Solution: However, a blank string can be set as the content.
My reasoning: When no content is set, the ContentPresenter is null and thus cannot be clicked.
The problem can be solved by setting the default content to "" like this:
<Style x:Key="InfoToggleButton"
TargetType="{x:Type ToggleButton}">
<Setter Property="Background" Value="#EEEEF2"/>
<Setter Property="Content" Value=""/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ToggleButton">
<Border CornerRadius="0"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}">
<ContentPresenter x:Name="contentPresenter"
ContentTemplate="{TemplateBinding ContentTemplate}"
Content="{TemplateBinding Content}"/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsChecked" Value="True">
<Setter Property="BorderBrush" Value="#007ACC"/>
<Setter Property="BorderThickness" Value="1"/>
</Trigger>
<Trigger Property="IsChecked" Value="False">
<Setter Property="BorderBrush" Value="Transparent"/>
<Setter Property="BorderThickness" Value="0"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
you have to assign a name at the Border tag like in this way
<Border x:Name="MyBorderName"...
then the you have to assign the TargetName at the property.
Example
<Setter TargetName="MyBorderName" Property="BorderBrush" Value="#007ACC"/>
<Setter TargetName="MyBorderName" Property="BorderThickness" Value="1"/>
Otherwise WPF does not know who to assign the Property BorderBrush and BorderThickness
I've been trying to remove the Border around a Button and also change the Colour of the Button's Background when the mouse hovers over it.
Here is what I have:
<Button Name="Home" Content="Home" HorizontalAlignment="Left" Width="75" Click="Button_Click_Home" Background="#FF252525" FontFamily="/VideoManager;component/#Myriad Pro" FontSize="13.333" Foreground="White" BorderThickness="5">
<Button.Style>
<Style TargetType="{x:Type Button}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border BorderThickness="0"/>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="#FF36290A"/>
</Trigger>
</Style.Triggers>
</Style>
</Button.Style>
</Button>
The issue is that regardless of what I set BorderThickness to, the Button disappears. Also the Button is not changing to the colour I specified with the Trigger.
I also tried simply using a Style Setter but found this had no effect on my Button.
<Style TargetType="{x:Type Button}">
<Setter Property="BorderThickness" Value="0"/>
</Style>
You need to define following ControlTemplate and remove Style Trigger.
<ControlTemplate TargetType="{x:Type Button}">
<Border Name="border"
Background="{TemplateBinding Background}">
<ContentPresenter HorizontalAlignment="Center"
VerticalAlignment="Center" />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver"
Value="True">
<Setter TargetName="border"
Property="Background"
Value="#FF36290A" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
I have tried this and this is working.
I have a style that I use to remove the default Windows style from buttons ; I'm sure you can use it or use it to achieve what you want. As it is, it just makes a button with absolutely no border, no background, no margins, nothing, just play with the template to achieve what you want :
<Style x:Key="NoChromeButton" TargetType="{x:Type Button}">
<Setter Property="Background" Value="Transparent"/>
<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}">
<Grid x:Name="Chrome" Background="{TemplateBinding Background}" SnapsToDevicePixels="true">
<ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Foreground" Value="#ADADAD"/>
<Setter Property="Opacity" TargetName="Chrome" Value="0.5"/>
</Trigger>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Cursor" Value="Hand"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
It is not mine but I don't remember where I found it, so sorry if the author come by !
You could also take the default button template from MSDN and tweak it.
I'm trying to disable the MouseOver effect on buttons, or at least change the colour of it, in WPF.
I'm using the following style:
<Style x:Key="Borderless" TargetType="{x:Type Button}">
<Setter Property="OverridesDefaultStyle" Value="True"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Button Background="{TemplateBinding Control.Background}"
Focusable="False">
<ContentPresenter
Margin="{TemplateBinding Control.Padding}"
HorizontalAlignment="{TemplateBinding Control.HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding Control.VerticalContentAlignment}"
SnapsToDevicePixels="{TemplateBinding UIElement.SnapsToDevicePixels}"
ContentTemplate="{TemplateBinding ContentControl.ContentTemplate}"
RecognizesAccessKey="True"
Content="{TemplateBinding ContentControl.Content}" />
</Button>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
in Window.Resources, which I thought would override all the default behaviours. But it doesn't.
Any suggestions?
Look what your control template boils down to:
<ControlTemplate TargetType="{x:Type Button}">
<Button>
<ContentPresenter/>
</Button>
</ControlTemplate>
You're saying, "I want to replace the look of my button with... a button." The usage of the ControlTemplate is to replace the visual tree of a control. So you are replacing the visual tree of the existing button with another button. If you want to start a button from scratch, try using the SimpleStyles button:
<Style TargetType="{x:Type Button}">
<Setter Property="SnapsToDevicePixels" Value="true"/>
<Setter Property="OverridesDefaultStyle" Value="true"/>
<Setter Property="MinHeight" Value="23"/>
<Setter Property="MinWidth" Value="75"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border Name="Border" CornerRadius="2" BorderThickness="1"
Background="#C0C0C0"
BorderBrush="#404040">
<ContentPresenter Margin="2"
HorizontalAlignment="Center"
VerticalAlignment="Center"
RecognizesAccessKey="True"/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsKeyboardFocused" Value="true">
<Setter TargetName="Border"
Property="BorderBrush" Value="#202020" />
</Trigger>
<Trigger Property="IsDefaulted" Value="true">
<Setter TargetName="Border"
Property="BorderBrush" Value="#202020" />
</Trigger>
<Trigger Property="IsMouseOver" Value="true">
<Setter TargetName="Border"
Property="Background" Value="#808080" />
</Trigger>
<Trigger Property="IsPressed" Value="true">
<Setter TargetName="Border"
Property="Background" Value="#E0E0E0" />
<Setter TargetName="Border"
Property="BorderBrush" Value="#606060" />
</Trigger>
<Trigger Property="IsEnabled" Value="false">
<Setter TargetName="Border"
Property="Background" Value="#EEEEEE" />
<Setter TargetName="Border"
Property="BorderBrush" Value="#AAAAAA" />
<Setter Property="Foreground" Value="#888888"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Notice that this template creates a button the simplest possible way: a border that contains the button content. It does not use another button embedded inside the template.