I have a custom Style for textbox, I apply DropShadowEffect and a border in this textbox, I would like to remove the effect of both the border and the Shadow when user clicks outside the wpf.
For example if a user has wpf open and clicks on the windows desktop, wpf should remove the border and shadow.
My Style:
<Style x:Key="MTextBox" TargetType="{x:Type TextBox}">
<Setter Property="BorderBrush" Value="White" />
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="BorderThickness" Value="2" />
<Setter Property="BorderBrush" Value="Red" />
</Trigger>
<Trigger Property="IsFocused" Value="True">
<Setter Property="BorderThickness" Value="2" />
<Setter Property="BorderBrush" Value="Red" />
<Setter Property="Effect">
<Setter.Value>
<DropShadowEffect ShadowDepth="1" Color="Red" Opacity="1" BlurRadius="2"/>
</Setter.Value>
</Setter>
</Trigger>
</Style.Triggers>
Try property "IsKeyboardFocused" instead of "IsFocused" in your second trigger.
Related
I'm trying to recreate a Valve VGUI interface style in WPF. So far I am able to assign a border to a button, but the border style does not change when pressing the button.
Here's my XAML code:
<Window.Resources>
<Style x:Key="BorderLight_Style" TargetType="Border">
<Setter Property="BorderBrush" Value="#889180" />
<Setter Property="BorderThickness" Value="1,1,0,0" />
</Style>
<Style x:Key="BorderShadow_Style" TargetType="Border">
<Setter Property="BorderBrush" Value="#FF282E22" />
<Setter Property="BorderThickness" Value="0,0,1,1" />
</Style>
<Style x:Key="BorderLight_Style_pressed" TargetType="Border">
<Setter Property="BorderBrush" Value="#FF282E22" />
<Setter Property="BorderThickness" Value="1,1,0,0" />
</Style>
<Style x:Key="BorderShadow_Style_pressed" TargetType="Border">
<Setter Property="BorderBrush" Value="#889180" />
<Setter Property="BorderThickness" Value="0,0,1,1" />
</Style>
<Style TargetType="Grid">
<Setter Property="Background" Value="#FF4C5844" />
</Style>
<Style TargetType="Button">
<Setter Property="Background" Value="#FF4C5844" />
<Setter Property="Foreground" Value="#D8DED3" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border x:Name="border" Style="{StaticResource BorderShadow_Style}">
<Border x:Name="border2" Style="{StaticResource BorderLight_Style}" />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsPressed" Value="True">
<Setter TargetName="border" Property="Style" Value="{StaticResource BorderShadow_Style_pressed}" />
<Setter TargetName="border2" Property="Style" Value="{StaticResource BorderLight_Style_pressed}" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
Am I doing anything wrong with this? Thanks!
Controls need to have a defined Background property to participate in hit-testing - and thus to allow the IsPressed property to be set on a Button for example.
Set the Background property of your inner Border to any valid value - such as Transparent - to fix your Trigger.
Note: if you were to press TAB to select your button and press the space bar, you would see your Trigger working even though you didn't set it any background, because IsPressed also reacts to the space bar.
I have below button style in window resources:
<Style x:Key="MyStyle" TargetType="{x:Type Button}">
<Setter Property="BorderBrush" Value="Transparent"/>
<Setter Property="BorderThickness" Value="0 0 0 3"/>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="BorderBrush" Value="Orange" />
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Setter Property="BorderBrush" Value="Red" />
</Trigger>
</Style.Triggers>
</Style>
This style is shared by two wpf buttons. But there is a button I want to show a custom color when it is pressed, the color will be green.
So in this special button I would like to override the value specified for borderbrush property in the trigger, instead of Red I would like Green.
How to do this?
You could set the BorderBrush property using a {DynamicResource} that you can override:
<SolidColorBrush x:Key="pressed" Color="Red" />
<Style x:Key="MyStyle" TargetType="{x:Type Button}">
<Setter Property="BorderBrush" Value="Transparent"/>
<Setter Property="BorderThickness" Value="0 0 0 3"/>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="BorderBrush" Value="Orange" />
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Setter Property="BorderBrush" Value="{DynamicResource pressed}" />
</Trigger>
</Style.Triggers>
</Style>
...
<Button Content="Red" Style="{StaticResource MyStyle}" />
<Button Content="Green" Style="{StaticResource MyStyle}">
<Button.Resources>
<SolidColorBrush x:Key="pressed" Color="Green" />
</Button.Resources>
</Button>
Or you could create another Style that overrides the entire trigger:
<Button Content="Green">
<Button.Style>
<Style TargetType="Button" BasedOn="{StaticResource MyStyle}">
<Style.Triggers>
<Trigger Property="IsPressed" Value="True">
<Setter Property="Foreground" Value="Green" />
</Trigger>
</Style.Triggers>
</Style>
</Button.Style>
</Button>
When i add this controltemplate my checkboxes disapear and only the checkbox text is shown. And when mouse is over the textbackground becomes red, how do i get my checkbox background red when mouse is over?
<Style TargetType="CheckBox" x:Key="Checkbox">
<Setter Property="BorderThickness" Value="2" />
<Setter Property="VerticalAlignment" Value="Top" />
<Setter Property="Margin" Value="20,15,0,0" />
<Setter Property="FontFamily" Value="/Resources/Fonts/Source Sans Pro/#Source Sans Pro" />
<Setter Property="FontSize" Value="14" />
<Setter Property="HorizontalAlignment" Value="Left" />
<Setter Property="Foreground" Value="{DynamicResource CheckboxForegroundColor}" />
<Setter Property="Background" Value="{DynamicResource CheckboxBackgroundColor}" />
<Setter Property="BorderBrush" Value="{DynamicResource CheckboxBorderbrushColor}"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type CheckBox}">
<CheckBox Background="{TemplateBinding Background}" >
<ContentPresenter />
</CheckBox>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="Red"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
This will work for some properties (try FontSize, for example), but not for others. The default template for the CheckBox has triggers of its own, and they don't bother with such things as TemplateBindings.
This post tells you how to extract the default template for a ComboBox. Here is an excerpt which shows your problem:
<ControlTemplate.Triggers>
...
<Trigger Property="IsMouseOver" Value="true">
<Setter
Property="Background"
TargetName="checkBoxBorder"
Value="{StaticResource OptionMark.MouseOver.Background}"/>
...
</Trigger>
...
</ControlTemplate.Triggers>
Your best bet is probably to override the entire template. Happily, it isn't too complex...
Remove your own template.
Follow the steps outlined in the post I linked to. That should give you a copy of the default CheckBox template.
Modify that copy. In particular, the IsMouseOver trigger that I excerpted: Change {StaticResource OptionMark.MouseOver.Background} to Red.
If this is still unclear, see this related post.
I have a styled window and I want to override a datagrid style to ALL datagrids in my application
<Window.Resources>
<Style x:Name="dtgStyle" TargetType="{x:Type DataGridRow}">
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="Transparent" />
</Trigger>
<Trigger Property="IsSelected" Value="True">
<Setter Property="Background" Value="Blue" />
</Trigger>
<Trigger Property="IsSelected" Value="False">
<Setter Property="Background" Value="Transparent" />
</Trigger>
</Style.Triggers>
<Setter Property="Background" Value="Transparent" />
<Setter Property="Foreground" Value="White" />
</Style>
</Window.Resources>
I thougth this had to work but I have to apply
Style s = Resources["dtgStyle"] as Style;
mydtg.Style = s;
now I wouldn't like to have to apply that to ALL dtgs.
The best would be to automatically apply it in xaml.
Thanx
---ADD for ASh----
Thank you for your help. The only problem is that when the datagrid loses focus the selected line in the datagrid changes colour as you can see in the following pic (foreground turns to black).
I have tried to add various property but nothing works.
additionally the left border gets bolder (no pun intended) and larger.
Any idea how to fix it?
Thanks
if you need default style for FrameworkElement, declare it without x:Key, only with TargetType.
Both DataGridRow and DataGridCell have IsSelected property. Not enough to change Background only for DataGridRow, it has to be done for DataGridCell as well
<Style TargetType="{x:Type DataGrid}">
<Setter Property="RowStyle" >
<Setter.Value>
<Style TargetType="{x:Type DataGridRow}" BasedOn="{StaticResource {x:Type DataGridRow}}">
<Setter Property="Background" Value="Transparent" />
<Setter Property="Foreground" Value="White" />
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="Transparent" />
</Trigger>
<Trigger Property="IsSelected" Value="True">
<Setter Property="Background" Value="Orange" />
<Setter Property="Foreground" Value="White" />
</Trigger>
</Style.Triggers>
</Style>
</Setter.Value>
</Setter>
<Setter Property="CellStyle">
<Setter.Value>
<Style TargetType="{x:Type DataGridCell}" BasedOn="{StaticResource {x:Type DataGridCell}}">
<Style.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter Property="Background" Value="Orange" />
</Trigger>
<DataTrigger Binding="{Binding IsKeyboardFocusWithin, RelativeSource={RelativeSource AncestorType={x:Type DataGrid}}}" Value="False">
<Setter Property="Foreground" Value="White"/>
</DataTrigger>
</Style.Triggers>
</Style>
</Setter.Value>
</Setter>
</Style>
fix for Foreground was found here: DataGrid's selected row color when inactive (https://stackoverflow.com/a/25204493/1506454)
I have a Style-Template for my buttons in my app, that looks like this:
<Style TargetType="{x:Type Button}">
<Setter Property="OverridesDefaultStyle" Value="true"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border Name="Border">
<ContentPresenter RecognizesAccessKey="True"/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsKeyboardFocused" Value="true">
<Setter TargetName="Border" Property="BorderBrush" Value="#ffffff" />
</Trigger>
<Trigger Property="IsDefaulted" Value="true">
<Setter TargetName="Border" Property="BorderBrush" Value="#ffffff" />
</Trigger>
<Trigger Property="IsMouseOver" Value="true">
<Setter TargetName="Border" Property="Background" Value="Transparent" />
</Trigger>
<Trigger Property="IsPressed" Value="true">
<Setter TargetName="Border" Property="Background" Value="Transparent" />
<Setter TargetName="Border" Property="BorderBrush" Value="#ffffff" />
</Trigger>
<Trigger Property="IsEnabled" Value="false">
<Setter TargetName="Border" Property="Background" Value="Transparent" />
<Setter TargetName="Border" Property="BorderBrush" Value="#ffffff" />
<Setter Property="Foreground" Value="Transparent"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Now I wanted to put a MouseEnter and a MouseLeave Event in some of my buttons and change their background, etc. on the fly. If I disable the Style, everything works fine as expected (except, that the buttons get the border and the blue background of the standard style).Now my question would be: "How can I change the style to a borderless, transparent button without blue background on MouseOver and get the MouseEnter and MouseLeave to fire, so I can set the background programmatically?
you should add extra styles for the buttons that you want to react differently than the rest, then use the triggers like in your pasted code to change backgrounds.
<Style x:Key="diffrentButton" TargetType="{x:Type Button}">
...