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}">
...
Related
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.
I use a template for my buttons. Now I got to a point where I want to change the template on runtime. But that doesn't work with this template.
The template looks like this:
<Application.Resources>
<Style TargetType="{x:Type Button}">
<Setter Property="OverridesDefaultStyle" Value="true"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border Name="Border" Background="Transparent">
<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>
</Application.Resources>
I used it on different windows, therefore as application resource.
How do I access this template and change it for only some buttons?
I thought about creating different templates. But how do I create one where I can change things like Background, etc. on runtime?
If you give an x:key to your resource, you should be able to do something like this:
<Window.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="/MyProject.Styles;component/ButtonStyles.xaml"/>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Window.Resources>
Then Just use :
<Button>
<Button.Style>
<Style BasedOn="{StaticResource StyleFromButtonStyles}" TargetType="Button">
And override with Style.Setter the property that you want to change
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'm doing a wpf program, and I did a custom style button:
<Style x:Key="ButtonMio" TargetType="{x:Type Button}">
<Setter Property="Padding" Value="1"/>
<Setter Property="Background" Value="Transparent" />
<Setter Property="Foreground" Value="Transparent"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border Name="border" Background="{TemplateBinding Background}">
<ContentPresenter Name="content" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
Margin="{TemplateBinding Padding}"
RecognizesAccessKey="True"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="#FF3EC8C6" />
<Setter Property="Foreground" Value="Transparent"/>
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Setter Property="Background" Value="Transparent" />
<Setter Property="Foreground" Value="Transparent"/>
<Setter Property="BorderBrush" Value="Transparent"/>
</Trigger>
<Trigger Property="IsFocused" Value="True">
<Setter Property="Background" Value="Transparent" />
<Setter Property="Foreground" Value="Transparent"/>
<Setter Property="BorderBrush" Value="Transparent"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Well, the button ha an image as content (so it's smaller than the real button). Since the background is transparent, i wrote this in mouse over trigger:
<Setter Property="Background" Value="#FF3EC8C6" />
And it works. But only before the click. Afterclick there is no more background. Even clicking other buttons and making the first one to lose the focus (i think) the background still doesn't appears.
I tiried changing the "IsPressed" and "IsFocused", but in first case, the background doesn't disappear afterclick, and in second, nothing couse I don't use tab to focus elements.
Really sorry for my english. Hope everything is clear. Thanks!
The order in which the triggers are declared is the problem .
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="#FF3EC8C6" />
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Setter Property="Background" Value="Transparent" />
</Trigger>
<Trigger Property="IsFocused" Value="True">
<Setter Property="Background" Value="Transparent" />
</Trigger>
</ControlTemplate.Triggers>
The IsMouseOver Occurs by right after it the IsFocused kicks in and makes the background transparent.
Try it like this :
<ControlTemplate.Triggers>
<Trigger Property="IsFocused" Value="True">
<Setter Property="Background" Value="#FF3EC8C6" /> </Trigger>
<Trigger Property="IsPressed" Value="True">
<Setter Property="Background" Value="Transparent" />
</Trigger>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="Transparent" />
</Trigger>
</ControlTemplate.Triggers>
I want to change border color of tab item when it has key board focus. I have written following trigger in its style
<Style TargetType="{x:Type TabItem}" x:Key="{x:Type TabItem}">
<Style.Triggers>
<Trigger Property="IsKeyboardFocused" Value="True">
<Setter Property="BorderBrush" Value="#800000" />
</Trigger>
It works fine for all other UI controls except tab itme. Can any one please help
Although this is working fine for me (make sure you actually have the keyboard focus to view the change in color)
<Style TargetType="{x:Type TabItem}" >
<Style.Triggers>
<Trigger Property="IsKeyboardFocused" Value="True">
<Setter Property="BorderBrush" Value="Yellow"/>
</Trigger>
<Trigger Property="IsKeyboardFocused" Value="False">
<Setter Property="BorderBrush" Value="Blue"/>
</Trigger>
</Style.Triggers>
</Style>
You can also try this to change the color if any item inside the Tab have keyboard focus
<Style TargetType="{x:Type TabItem}" >
<Style.Triggers>
<Trigger Property="IsKeyboardFocusWithin" Value="True">
<Setter Property="BorderBrush" Value="Yellow"/>
</Trigger>
<Trigger Property="IsKeyboardFocusWithin" Value="False">
<Setter Property="BorderBrush" Value="Blue"/>
</Trigger>
</Style.Triggers>
</Style>