Change WPF control's ControlTemplate to not be disabled - wpf

I have a Devexpress DateEdit and added a trigger for when IsEnabled=False to change the ControlTemplate to be a Label. This all works fine, but my problem is, that the Text of the Label is still Grayed out(Disabled).
My style:
<Style x:Key="DateTimeDropDownStyle" TargetType="{x:Type dxe:DateEdit}">
<Setter Property="Mask" Value="dd MMM yyyy"/>
<Setter Property="MaskUseAsDisplayFormat" Value="True"/>
<Style.Triggers>
<Trigger Property="dxe:DateEdit.IsEnabled" Value="False">
<Setter Property="dxe:DateEdit.Template">
<Setter.Value>
<ControlTemplate>
<Label Content="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Text, StringFormat={}{0:dd MMM yyyyy}}"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Trigger>
</Style.Triggers>
</Style>
So, my question is, how do i change the Style so that the Label is not disabled?

Try setting Foreground on the Label in your template.
If it doesn't help, you'd have to edit the control template for the label. A basic one is:
<ControlTemplate TargetType="{x:Type Label}">
<Border Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}">
<ContentPresenter Margin="{TemplateBinding Padding}"/>
</Border>
<ControlTemplate.Triggers>
<!--This is the trigger to remove-->
<Tirgger Property="IsEnabled"
Value="False">
<Setter Property="Foreground"
Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>

Related

Change Border Thickness by Xaml, `wpf`

Please keep in mind i am new with WPF, I am trying to give my Button a border thickness value via .Xaml templates, However, its not working, Here is my .Xaml:
<Button>
<Button.Style>
<Style TargetType="{x:Type Button}">
<Setter Property="Background" Value="#FFFFFFFF" />
<Setter Property="Foreground" Value="#FFF01F1F" />
<Setter Property="BorderBrush" Value="#FFF01F1F" />
<Setter Property="BorderThickness" Value="5" />
<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.Triggers>
<Trigger Property="IsMouseOver" Value="true">
<Setter Property="Background" Value="#FFF01F1F" />
<Setter Property="Foreground" Value="#FFFFFFFF" />
</Trigger>
</Style.Triggers>
</Style>
</Button.Style>
</Button>
Thanks in Advance.
Update:::
I have tried the Change Thickness answer, however now it disables my IsMouseOver property,
You set your own custom template which doesn't use the BorderThickness property of the button itself, so it should be:
<Border Background="{TemplateBinding Background}" BorderThickness="{TemplateBinding BorderThickness}">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
Or you can set it to 5 directly on the template.

Remove strange behaviour from wpf button mouse-over

I'm fighting with a dummy issue for hours.
In wpf I want to override the behaviour of a Button, and at the moment the basic behaviour I want is reached (a certain color).
But I'm not able to say simply: on mouseover add underline style!
I'm able to add underline but I'm not able to remove the square around the text!
The style I'm using is:
<Style TargetType="Button">
<Setter Property="Foreground" Value="{DynamicResource {x:Static vs_shell:EnvironmentColors.CommandBarMenuLinkTextBrushKey}}"></Setter>
<Setter Property="Cursor" Value="Hand"></Setter>
<Setter Property="Background" Value="Transparent"></Setter>
<Setter Property="BorderThickness" Value="0"></Setter>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="Transparent"/>
<Setter Property="ContentTemplate">
<Setter.Value>
<DataTemplate>
<TextBlock TextDecorations="Underline" Text="{TemplateBinding Content}" Background="Transparent"/>
</DataTemplate>
</Setter.Value>
</Setter>
</Trigger>
</Style.Triggers>
</Style>
Any idea/suggestion?
Thanks!
Maybe this will help you :
Disable Control's Selection Background Effect in WPF
It concerns the ListViewItems, but you can apply this mechanism on buttons or any other WPF Controls.
Good luck
Add this setter to the style:
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}">
<ContentPresenter Margin="{TemplateBinding Padding}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>

WPF Trigger Not Working As Intended

I want a red button that turns black when the mouse hovers over it.
<Button Content="Hover me" Grid.Column="3" Grid.Row="3">
<Button.Style>
<Style TargetType="{x:Type Button}">
<Setter Property="Background" Value="Red"/>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="Black"/>
</Trigger>
</Style.Triggers>
</Style>
</Button.Style>
</Button>
However, my problem is that when I hover over the button, it turns into the default Windows style with a gradient gray appearance.
Try it
<Window.Resources>
<Style x:Key="MyButtonStyle" TargetType="{x:Type Button}">
<Setter Property="Background" Value="Red"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}">
<ContentPresenter x:Name="PART_Content"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
TextElement.Foreground="{TemplateBinding Foreground}"></ContentPresenter> </Border>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="Black"/>
<Setter Property="Foreground" Value="White"/>
</Trigger>
</Style.Triggers>
</Style>
</Window.Resources>
and apply the custom Style as following
<Button Content="Hover me" Style="{StaticResource MyButtonStyle}" Height="30" Width="100"/>
The reason is the default Aero style of a Button. It has a chrome defined in ControlTemplate, which has it own behavior on various mouse events. So That over write your trigger call.
So you must override default ControlTemplate of Button to achieve your desired result.

How to remove default mouse-over effect on WPF buttons?

My problem is that in WPF, whenever I try and change the colour of a button's background using triggers or animations, the default mouseover effect (of being grey with that orange glow) seems to take priority.
After extensive searches I'm clueless as to how to remove this effect.
This is similar to the solution referred by Mark Heath but with not as much code to just create a very basic button, without the built-in mouse over animation effect. It preserves a simple mouse over effect of showing the button border in black.
The style can be inserted into the Window.Resources or UserControl.Resources section for example (as shown).
<UserControl.Resources>
<!-- This style is used for buttons, to remove the WPF default 'animated' mouse over effect -->
<Style x:Key="MyButtonStyle" TargetType="Button">
<Setter Property="OverridesDefaultStyle" Value="True"/>
<Setter Property="Margin" Value="5"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border Name="border"
BorderThickness="1"
Padding="4,2"
BorderBrush="DarkGray"
CornerRadius="3"
Background="{TemplateBinding Background}">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="border" Property="BorderBrush" Value="Black" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</UserControl.Resources>
<!-- usage in xaml -->
<Button Style="{StaticResource MyButtonStyle}">Hello!</Button>
Just to add a very simple solution, that was good enough for me, and I think addresses the OP's issue. I used the solution in this answer except with a regular Background value instead of an image.
<Style x:Key="SomeButtonStyle" TargetType="Button">
<Setter Property="Background" Value="Transparent" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid Background="{TemplateBinding Background}">
<ContentPresenter />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
No re-templating beyond forcing the Background to always be the Transparent background from the templated button - mouseover no longer affects the background once this is done. Obviously replace Transparent with any preferred value.
You need to create your own custom button template to have full control over the appearance in all states. Here's a tutorial.
The Muffin Man had a very simple answer which worked for me.
To add a little more specific direction, at least for VS 2013:
Right-click the control
Select Edit Template => Edit a copy...
I selected 'Application' for where to save the style
From here you can directly edit App.xaml and see the intuitively named properties. For my purposes, I just set RenderMouseOver="False"
Then, in the MainWindow.xaml or wherever your GUI is, you can paste the new style at the end of the Button tag, e.g. ... Style="{DynamicResource MouseOverNonDefault}"/>
This Link helped me alot
http://www.codescratcher.com/wpf/remove-default-mouse-over-effect-on-wpf-buttons/
Define a style in UserControl.Resources or Window.Resources
<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.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Opacity" Value="0.8" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
Then add the style to your button this way Style="{StaticResource MyButton}"
<Button Name="btnSecond" Width="350" Height="120" Margin="15" Style="{StaticResource MyButton}">
<Button.Background>
<ImageBrush ImageSource="/Remove_Default_Button_Effect;component/Images/WithStyle.jpg"></ImageBrush>
</Button.Background>
</Button>
If someone doesn't want to override default Control Template then here is the solution.
You can create DataTemplate for button which can have TextBlock and then you can write Property trigger on IsMouseOver property to disable mouse over effect. Height of TextBlock and Button should be same.
<Button Background="Black" Margin="0" Padding="0" BorderThickness="0" Cursor="Hand" Height="20">
<Button.ContentTemplate>
<DataTemplate>
<TextBlock Text="GO" Foreground="White" HorizontalAlignment="Center" VerticalAlignment="Center" TextDecorations="Underline" Margin="0" Padding="0" Height="20">
<TextBlock.Style>
<Style TargetType="TextBlock">
<Style.Triggers>
<Trigger Property ="IsMouseOver" Value="True">
<Setter Property= "Background" Value="Black"/>
</Trigger>
</Style.Triggers>
</Style>
</TextBlock.Style>
</TextBlock>
</DataTemplate>
</Button.ContentTemplate>
</Button>
An extension on dodgy_coder's answer which adds support for..
Maintaining WPF button style
Adds support for IsSelected and hover, i.e. a toggled button
<Style x:Key="Button.Hoverless" TargetType="{x:Type ButtonBase}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ButtonBase}">
<Border Name="border"
BorderThickness="{TemplateBinding BorderThickness}"
Padding="{TemplateBinding Padding}"
BorderBrush="{TemplateBinding BorderBrush}"
Background="{TemplateBinding Background}">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
</Border>
<ControlTemplate.Triggers>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsMouseOver" Value="True" />
<Condition Property="Selector.IsSelected" Value="False" />
</MultiTrigger.Conditions>
<Setter Property="Background" Value="#FFBEE6FD" />
</MultiTrigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsMouseOver" Value="True" />
<Condition Property="Selector.IsSelected" Value="True" />
</MultiTrigger.Conditions>
<Setter Property="Background" Value="#BB90EE90" />
</MultiTrigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsMouseOver" Value="False" />
<Condition Property="Selector.IsSelected" Value="True" />
</MultiTrigger.Conditions>
<Setter Property="Background" Value="LightGreen" />
</MultiTrigger>
<Trigger Property="IsPressed" Value="True">
<Setter TargetName="border" Property="Opacity" Value="0.95" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
examples..
<Button Content="Wipe On" Selector.IsSelected="True" />
<Button Content="Wipe Off" Selector.IsSelected="False" />
Using a template trigger:
<Style x:Key="ButtonStyle" TargetType="{x:Type Button}">
<Setter Property="Background" Value="White"></Setter>
...
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border Background="{TemplateBinding Background}">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="White"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

WPF SystemColors: color of TextBox border

I am trying to make a search TextBox with an embedded magnifying glass icon. I have the following markup so far:
<Border DockPanel.Dock="Bottom" Margin="2,4,0,4"
BorderThickness="1" SnapsToDevicePixels="True"
BorderBrush="{DynamicResource {x:Static SystemColors.ControlDarkBrushKey}}">
<DockPanel>
<StackPanel Orientation="Horizontal" DockPanel.Dock="Right">
<Image Source="/Resources/search-13x13.png" Width="13"/>
</StackPanel>
<TextBox Name="searchTextBox" DockPanel.Dock="Bottom" BorderThickness="0"
Text="{Binding FilterText, UpdateSourceTrigger=PropertyChanged}"/>
</DockPanel>
</Border>
However, I can't find the entry in SystemColors which will give me the same color as the standard TextBox border. This is a blueish color by default. Am I being really stupid here?!?
EDIT: btw, the image is contained in a stackpanel because I'm planning to put a dropdown arrow in there as well.
You might try using Microsoft.Windows.Themes.ListBoxChrome instead of the Border; that's what the default template for TextBox uses:
<ControlTemplate TargetType="TextBoxBase"
xmlns:mwt="clr-namespace:Microsoft.Windows.Themes;assembly=PresentationFramework.Aero">
<mwt:ListBoxChrome Name="Bd" SnapsToDevicePixels="True">
<ScrollViewer Name="PART_ContentHost"
SnapsToDevicePixels="{TemplateBinding UIElement.SnapsToDevicePixels}" />
</mwt:ListBoxChrome>
<ControlTemplate.Triggers>
<Trigger Property="UIElement.IsEnabled" Value="False">
<Setter TargetName="Bd" Property="Panel.Background"
Value="{DynamicResource {x:Static SystemColors.ControlBrushKey}}" />
<Setter Property="TextElement.Foreground"
Value="{DynamicResource {x:Static SystemColors.ControlBrushKey}}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
You should be able to use just ListBoxChrome instead of Border rather than re-templating TextBox to match the code you presented.
I was able to get it programatically with:
TextBox.BorderBrush = SystemColors.ControlDarkBrush;
Based on Nicholas Armstrong's answer, that solution is working for me:
<Style TargetType="{x:Type local:CustomTextBox}" BasedOn="{StaticResource {x:Type TextBox}}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type local:CustomTextBox}">
<mwt:ListBoxChrome x:Name="Bd" SnapsToDevicePixels="true" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" RenderFocused="{TemplateBinding IsKeyboardFocusWithin}" RenderMouseOver="{TemplateBinding IsMouseOver}">
<ScrollViewer x:Name="PART_ContentHost" />
</mwt:ListBoxChrome>
<ControlTemplate.Triggers>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Background" TargetName="Bd" Value="{DynamicResource {x:Static SystemColors.ControlBrushKey}}"/>
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
To anyone that is looking for a list of Brushes and what their colors will look like with different themes/OS:
Originally posted: http://blogs.msdn.com/b/wpf/archive/2010/11/30/systemcolors-reference.aspx.
It seems hackish, but I've had the best luck by creating a textbox (perhaps collapsed) and binding to its border brush.

Resources