I want that the Background changes to Gray if the Window is not the current active Window. I tried this:
<mm:MetroWindow.Style>
<Style TargetType="{x:Type mm:MetroWindow}">
<Style.Triggers>
<Trigger Property="IsFocused" Value="False">
<Setter Property="Background" Value="Gray" />
</Trigger>
</Style.Triggers>
</Style>
</mm:MetroWindow.Style>
But it does not work, the Background is always Gray, even if the Window is in focus. Did I use the wrong Property or what am I doing wrong?
Use IsActive property:
XAML:
<Style x:Key="MetroWindowStyle2" TargetType="{x:Type Controls:MetroWindow}">
<Style.Triggers>
<Trigger Property="IsActive" Value="False">
<Setter Property="Background" Value="Gray" />
</Trigger>
</Style.Triggers>
</Style>
You need to add:
<Trigger Property="IsFocused" Value="True">
<Setter Property="Background" Value="Red" />
</Trigger>
(or whatever colour you want the background to be).
You might also have to add:
<Setter Property="Focusable" Value="true"/>
to your style.
Source
You need to set the active background in the Style as well. There are several ways a background can by set, and the Style does not come high in the heirarchy. See https://msdn.microsoft.com/en-us/library/ms743230%28v=vs.100%29.aspx
<mm:MetroWindow.Style>
<Style TargetType="{x:Type mm:MetroWindow}">
<Setter Property="Background" Value="someColour" />
<Style.Triggers>
<Trigger Property="IsFocused" Value="False">
<Setter Property="Background" Value="Gray" />
</Trigger>
</Style.Triggers>
</Style>
</mm:MetroWindow.Style>
Actually, I can see that you are using the theme MahApps.Metro. For that theme, you can just set the property 'NonActiveWindowTitleBrush' as below to control the color of inactive window title. In my below example, I set the inactive window title as white.
<Controls:MetroWindow x:Class="CefSharp.MinimalExample.Wpf.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:wpf="clr-namespace:CefSharp.Wpf;assembly=CefSharp.Wpf"
xmlns:cef="clr-namespace:CefSharp;assembly=CefSharp.Core"
xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity"
xmlns:Controls="clr-namespace:MahApps.Metro.Controls;assembly=MahApps.Metro"
NonActiveWindowTitleBrush="White"
>
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 have a Ribbonbutton wich i want to change the Icon on MouseOver but it does not seem to work.
Here is my Code:
<RibbonButton Label="Verbindung testen" LargeImageSource="../Resources/Buttons/disconnect.png" Command="{Binding SettingsVM.TestConnectionCommand}">
<RibbonButton.Style>
<Style TargetType="{x:Type RibbonButton}">
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="LargeImageSource" Value="../Resources/Buttons/connect.png"/>
</Trigger>
<Trigger Property="IsMouseOver" Value="False">
<Setter Property="LargeImageSource" Value="../Resources/Buttons/disconnect.png"/>
</Trigger>
</Style.Triggers>
</Style>
</RibbonButton.Style>
</RibbonButton>
It just shows the first Icon "disconnect.png" and on mouse over it gets highlighted like all the other buttons, but no image change.
I also tried it this way, with ControlTemplate:
<RibbonButton Label="Verbindung testen" LargeImageSource="../Resources/Buttons/disconnect.png" Command="{Binding SettingsVM.TestConnectionCommand}">
<RibbonButton.Template>
<ControlTemplate TargetType="{x:Type RibbonButton}">
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="LargeImageSource" Value="../Resources/Buttons/connect.png"/>
</Trigger>
<Trigger Property="IsMouseOver" Value="False">
<Setter Property="LargeImageSource" Value="../Resources/Buttons/disconnect.png"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</RibbonButton.Template>
Here it doesnt show an icon at all.
Found the Answer!
WPF RibbonButton: LargeImageSource and Label not updated via DataTriggers
The problem is your setting properties for LargeImageSource and Label in the button itself. When you do this it takes precidence over your style triggers. I suggest using setters in the style to set your defaults, and remove the property settings it the button.
So it has to be:
<RibbonButton Label="Verbindung testen" Command="{Binding SettingsVM.TestConnectionCommand}">
<RibbonButton.Style>
<Style TargetType="{x:Type RibbonButton}">
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="LargeImageSource" Value="../Resources/Buttons/connect.png"/>
</Trigger>
<Trigger Property="IsMouseOver" Value="False">
<Setter Property="LargeImageSource" Value="../Resources/Buttons/disconnect.png"/>
</Trigger>
</Style.Triggers>
</Style>
</RibbonButton.Style>
Removing the "LargeImageSource" from the Button itself.
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 just started learning WPF and trying to hide a StackPanel during MouseOver. Below is the code that I use. I can only see the Panel flickering when mouse is placed on it but, it doesn't hide completely. Am I missing something here? Thanks in advance.
<Style x:Key="myStyle" TargetType="{x:Type StackPanel}">
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="true">
<Setter Property="Visibility" Value="Hidden" />
</Trigger>
<Trigger Property="IsMouseOver" Value="false">
<Setter Property="Visibility" Value="Visible" />
</Trigger>
</Style.Triggers>
</Style>
Stackpanel:
<StackPanel Style="{StaticResource myStyle}">
// Child controls
</StackPanel>
When the StackPanel is hidden, the IsMouseOver property toggles to false, which makes the StackPanel visible again.
You might set the Opacity property instead of Visibility:
<Style x:Key="myStyle" TargetType="{x:Type StackPanel}">
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Opacity" Value="0" />
</Trigger>
<Trigger Property="IsMouseOver" Value="False">
<Setter Property="Opacity" Value="1" />
</Trigger>
</Style.Triggers>
</Style>
Or, as pointed out in the other answer, declare just one Trigger for IsMouseOver == true:
<Style x:Key="myStyle" TargetType="{x:Type StackPanel}">
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Opacity" Value="0" />
</Trigger>
</Style.Triggers>
</Style>
Clemens has already answered your question, but just FYI when you are triggering on a Boolean value, you don't need a trigger for both states. Just set a single trigger for the true or false state, then when the state no longer applies the properties that were changed by the setters in the trigger will revert back to their previous values. This will cut down on the amount of XAML you need to write.
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>