I am attempting to make it so that when I hover over a button in my application, the "tooltip" displays my wording, along with a transparent background, instead of the white background.
I am merely trying to change the tooltip default settings to a transparent background..
I have looked and looked, but to no success.. anyone have any ideas?
Thanks.
<Style x:Key="{x:Type ToolTip}"
TargetType="{x:Type ToolTip}">
<Setter Property="Background"
Value="Transparent" />
</Style>
Place this in the resource dictionary of your view, or for your application.
And this is the final style which sets the tooltip background to transparent:
<Style TargetType="{x:Type ToolTip}">
<Setter Property="Background" Value="Transparent"/>
<Setter Property="BorderBrush" Value="Transparent"/>
</Style>
Note that you need to set also the BorderBrush to Transparent, not only the Background.
The class ToolTip has property Background. See http://msdn.microsoft.com/en-us//library/system.windows.controls.tooltip_members.aspx. You can set Background to Transparent.
Related
I have a WPF Window with a Ribbon with a dark background color (SolidColorBrush)
I have set the font color of the tabs to white, but that's not readable in the selected tab. So I would like to have a black background in the selected tab (or a black font color would also work).
My app.xaml contains this code to style it:
<Application.Resources>
<ResourceDictionary>
<Style x:Key="SelectedRibbonTab" TargetType="RibbonTab">
<Setter Property="Background" Value="Black"></Setter>
</Style>
<Style TargetType="RibbonTab">
<Style.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter Property="HeaderStyle" Value="{DynamicResource SelectedRibbonTab}"></Setter>
</Trigger>
</Style.Triggers>
</Style>
<Style TargetType="RibbonTabHeader">
<Setter Property="Foreground" Value="White"></Setter>
</Style>
</ResourceDictionary>
</Application.Resources>
It is clearly not working, any solutions how I can fix this?
You can use a single style to change the header text color (Foreground) using IsRibbonTabSelected.
<Style TargetType="RibbonTabHeader">
<Setter Property="Foreground" Value="White"/>
<Style.Triggers>
<Trigger Property="IsRibbonTabSelected" Value="True">
<Setter Property="Foreground" Value="Black"/>
</Trigger>
</Style.Triggers>
</Style>
Changing the background of a ribbon tab is not recommended, as it is not that trivial. The ribbon and ribbon tab backgrounds can be customized by setting the Background property of the Ribbon itself. This will in turn adapt the background color of all tabs in all states. These backgrounds use gradients and are defined in the respective control templates. Again, it is not easy to even get these control templates, see:
How to customize the WPF Ribbon 4.5 (styles, templates, etc.)
If you want to try it nevertheless, here is a related post that links an MSDN forum answer that offers a possible style and control template that might be adapted. However, I recommend to simply use the style above.
Changing Windows.Ribbon background color
Placing a Background to a Tab on a Ribbon Control
An alternative is to use the Fluent.Ribbon instead, which offers more support for customization.
Fluent.Ribbon GitHub
Fluent.Ribbon NuGet package
Fluent.Ribbon Docs on Creating Custom Themes
I am new XAML however I am given the task to override some styles for certain elements within an existing application.
In my custom Theme, I am attempting to override the style of a BORDER control.
From what I can tell (using Snoop) to inspect the application, the element I want to change is just a plain border.
The border also seems to have a Name of "SubMenuBorder". Please see the image below.
Here is the latest iteration of my style snippet in which I am trying to set the border control's Background, BorderBrush and BorderThickness BUT ONLY if the control has a name of "SubMenuBorder"
<Style TargetType="{x:Type Border}">
<Style.Triggers>
<Trigger Property="Name" Value="SubMenuBorder">
<Setter Property="Background" Value="Red"></Setter>
<Setter Property="BorderBrush" Value="Red"></Setter>
<Setter Property="BorderThickness" Value="20"></Setter>
</Trigger>
</Style.Triggers>
</Style>
Unfortunately the above does NOT work.
The style trigger does not seem to fire/apply to the intended control.
If I simplify things further and just style ALL borders with the following snippet, then it seems to work and the border control I want to change, is styled, but so is every other border control in the application.
<Style TargetType="{x:Type Border}">
<Setter Property="Background" Value="Red"></Setter>
<Setter Property="BorderBrush" Value="Red"></Setter>
<Setter Property="BorderThickness" Value="20"></Setter>
</Style>
Further Findings
I attempted to use a DataTrigger... which unfortunately doesn't work either.
Snoop shows below that the data trigger is being satisfied, however on the second image below you can see that the property of the background and borderbrush are still from the parenttemplate.
Any ideas please?
<Style TargetType="{x:Type Border}">
<Style.Triggers>
<DataTrigger Binding="{Binding RelativeSource={RelativeSource Self}, Path=Name}" Value="SubMenuBorder">
<Setter Property="Background" Value="Red"></Setter>
<Setter Property="BorderBrush" Value="Red"></Setter>
<Setter Property="BorderThickness" Value="20"></Setter>
</DataTrigger>
</Style.Triggers>
</Style>
You cannot use triggers to modify a Border that is defined in a ControlTemplate, with the exception of using an implicit Style that applies to all elements of the type specified by the TargetType property of the implicit Style.
You will either have to modify the ControlTemplate itself, or programmatically find the Border element in the visual tree and then change its runtime property values. The first approach, i.e. modifying or creating a custom template, is the recommended approach.
The name "SubMenuBorder" is only known and applicable within that Border element's namescope.
I'm maintaining a big old C#/WPF application in which a style has been set globally for all buttons It can sound ugly, but I can't change this without refactoring the whole app.
Here is an extract of this style:
<Style TargetType="Button">
<Setter Property="Height" Value="32"/>
<Setter Property="MinWidth" Value="96"/>
<Setter Property="Margin" Value="10"/>
</Style>
The problem is that when I want to use a DatePicker, this global style influenced the appearance of the DataPicker:
Is there a simple way to restore the default Margin, Height and MinWidth only for the Button inside the DatePicker?
You can override the Style for the Buttons locally. The following XAML sets the Style for all Buttons inside the DatePicker back to the default Style.
<DatePicker>
<DatePicker.Resources>
<!-- Default Style -->
<Style TargetType="{x:Type Button}"/>
</DatePicker.Resources>
</DatePicker>
Edit
As requested in the comments, a Style to fix this issue globally
<Style TargetType="{x:Type DatePicker}">
<Style.Resources>
<Style TargetType="{x:Type Button}"/>
</Style.Resources>
</Style>
Note: This Style should be placed in the same hierarchy-context as the Button Style.
I'm testing wpf applications using MahApp.Metro.
Somehow I'm not able to change the style of the ToggleSwitch. I just want to change simple properties like foreground or background of the switch. What am I doing wrong?
Mainwindow.xaml
<Style x:Key="flyoutToggleSwitchStyle" TargetType="{x:Type Controls:ToggleSwitch}" BasedOn="{StaticResource {x:Type Controls:ToggleSwitch}}">
<Setter Property="BorderBrush" Value="WhiteSmoke"/>
<Setter Property="Background" Value="White"/>
<Setter Property="Foreground" Value="Yellow"/>
<Setter Property="OnLabel" Value="Yes"/> <!--<<<---THIS WORKS!!-->
<Setter Property="OffLabel" Value="No"/>
</Style>
<Controls:ToggleSwitch Style="{StaticResource flyoutToggleSwitchStyle}">
<Controls:ToggleSwitch.Header>
<TextBlock>
Test
</TextBlock>
</Controls:ToggleSwitch.Header>
</Controls:ToggleSwitch>
Now there is a new ToggleSwitch property called SwitchForeground which allows changing the colour for ON position (tested on v0.14).
Example:
<controls:ToggleSwitch SwitchForeground="{StaticResource MyGreen}" />
The problem is that in the Mahapps.Metro ToggleSwitch most of the properties can not be changed within a style, because there is no TemplateBinding or Key defined in the original template definition.
So the style can only be changed by creating a new template. For this the ToggleSwitch and the ToggleSwitchButton templates have to be changed.
Issue on GitHub
Source of the templates
I am trying to make the column header of my WPF Datagrid to be transparent.
I am able to set it to a color without problem, but I can't have it transparent. Here is what I tried:
<Style x:Key="DatagridColumnHeaderStyle" TargetType="{x:Type tk:DataGridColumnHeader}">
<Setter Property="Background" Value="Transparent" />
<Setter Property="Foreground" Value="#C2C4C6" />
</Style>
<Style x:Key="DashboardGridStyle" TargetType="{x:Type tk:DataGrid}">
<Setter Property="ColumnHeaderStyle" Value="{StaticResource DatagridColumnHeaderStyle}" />
<Setter Property="Background" Value="Transparent" />
<Setter Property="RowBackground" Value="Transparent" />
</Style>
<tk:DataGrid Style="{StaticResource DashboardGridStyle}" >
...
</tk:DataGrid>
With this code, it seems to take the default brush.
What am I missing?
I used Snoop to take a look at what was happening. It seems that another DataGridColumnHeader is always created behind the one you can modify, and it's not affected by changes on styles. When you set a transparent background, in fact is being correctly applied, so what you see is that ghost header behind (which has the usual grey background).
If you apply a coloured background and play with Opacity, you will see how the two colours are mixed. I don't know if this can be solved.
With the answer from Natxo (thanks!), I was able to find a solution. And it is a simple one too!
Knowing that there was another DataGridColumnHeader behind the one we can modify through the ColumnHeaderStyle, I just had to set a style that will affect all DataGridColumnHeader:
<Style TargetType="{x:Type tk:DataGridColumnHeader}">
<Setter Property="Background" Value="Transparent" />
</Style>