Use trigger to change colour of a path declared in ResourceDictionary - wpf

I'm creating a radiobutton style. The RadioButton has a Border which hosts a ContentControl. The ContentControl has its Content property set to a Path (FemaleVector) declared in a separate ResourceDictionary. How can I change the Fill property of the path when the radiobutton IsChecked? Below is what I have so far. I am able to change the background property of the border but setting the Foreground property of the ContentControl does not change the colour of the path. (Didn't think that would work.)
<Style x:Key="Female" TargetType="{x:Type RadioButton}">
<Setter Property="Margin" Value="0,0,5,0"/>
<Setter Property="Cursor" Value="Hand"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type RadioButton}">
<Border x:Name="border" Padding="7,3,7,3" Width="35" Height="35" BorderBrush="#8CD567DC" Background="#00D567DC" CornerRadius="5" BorderThickness="0.8">
<ContentControl x:Name="content" Content="{DynamicResource FemaleVector}"/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsChecked" Value="True">
<Setter Property="Background" TargetName="border" Value="#8CD567DC"/>
<Setter Property="Foreground" TargetName="content" Value="Blue"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
I don't like having the long Data property of paths in my Styles, so I have moved them into a separate ResourceDictionary. Should I just put the Path back into my Style instead of keeping it in a separate ResourceDictionary?
Edit: similar questions are here and here.

If the style is not reused somewhere, I would personally keep it in local style resources section. That way you see bigger picture. Otherwise it would be wise to keep it in ResourceDictionary :)
Either way you should be able to change Fill property with:
<Setter Property="Content.Fill" TargetName="content" Value="Blue"/>
If this is not working, I advise few ways more:
You can use Trigger.EnterActions<> in Xaml. Perhaps setting property through animation will have better effect? ControlTemplate triggers with setters are sometimes way limiting.
There's also relative binding. But you gotta be careful with that. (If you pla to make it reusable)
In your FemaleVector style, you can bind Fill against ContentControl Foreground. Look for RelativeBinding in Google.
And then there's property inheritance. If you set Fill color in FemaleVector, you need to do it with style. Such as:
<Style>
<Setter Property="Fill" Value="BLACK" />
</Style>
you can later set ContentControls Style and add trigger there, like:
<ContentControl.Style>
<Style>
<Style.Triggers>
<DataTrigger Binding={Binding IsChecked, RelativeSource={RelativeSource AncestorType=RadioButto}} Value=TRUE>
<Setter Property="Path.Fill" Value="BLACK" />
</DataTrigger>

Related

XAML Style Trigger - Change Style ONLY for Object of with a specific Name

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.

WPF change tab header color

I am trying to set the tab color of the header when the tab is selected. I work with Mah:
<Style x:Key="MenuLevel2" BasedOn="{StaticResource MetroTabItem}" TargetType="{x:Type TabItem}">
<Setter Property="mah:ControlsHelper.HeaderFontSize" Value="20" />
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="true">
<Setter Property="Foreground" Value="SteelBlue"/>
</Trigger>
<Trigger Property="IsSelected" Value="True">
<!-- Sould do the work -->
<Setter Property="Foreground" Value="SteelBlue"/>
</Trigger>
</Style.Triggers>
</Style>
The text of the header is unfortunately still the one from the theme color. Any clue?
Your problem lies in the Controls.TabControl.xaml of MahApps.Metro. Most of the design lies in a template. As you can see in line 227 and 274, the Foreground is not bound to any property like done with other properties like Underline or HeaderFontSize.
This means you can't style these properties explicit without creating a whole new template. Since dynamic resources are used as color a solution is to override the used resources. Here is a workaround to change the colors for a tab item like required:
<TabItem Header="TabItem1">
<TabItem.Resources>
<SolidColorBrush x:Key="AccentColorBrush" Color="SteelBlue"/>
<SolidColorBrush x:Key="HighlightBrush" Color="SteelBlue"/>
</TabItem.Resources>
</TabItem>

Conditional BasedOn in XAML styles

Given:
<Style x:Key="ThirdLevelGroupBoxStyle" TargetType="GroupBox" BasedOn="{StaticResource MetroGroupBox}">
<Setter Property="Background" Value="{DynamicResource AccentColorBrush3}" />
</Style>
<Style x:Key="SecondLevelGroupBoxStyle" TargetType="GroupBox" BasedOn="{StaticResource MetroGroupBox}">
<Setter Property="Background" Value="{DynamicResource AccentColorBrush2}" />
</Style>
<Style TargetType="GroupBox" x:Key="WidgetControlTemplateStyle" BasedOn="{StaticResource ThirdLevelGroupBoxStyle}">
<Style.Triggers>
<DataTrigger Binding="{Binding CanExecuteClickCommand}" Value="True">
<!-- TODO: SecondLevelGroupBoxStyle -->
<Setter Property="Background" Value="{DynamicResource AccentColorBrush2}" />
</DataTrigger>
</Style.Triggers>
</Style>
<ControlTemplate TargetType="ContentControl" x:Key="WidgetControlTemplate">
<GroupBox ... Style="{StaticResource WidgetControlTemplateStyle}">
<ContentPresenter />
</GroupBox>
</ControlTemplate>
ControlTemplate has style WidgetControlTemplate. I want to base (BasedOn) the WidgetControlTemplate style conditionally on ThirdLevelGroupBoxStyle or SecondLevelGroupBoxStyle, in order to avoid XAML duplication. Is there way to achieve this?
If I can't do that, I have to duplicate the definition of SecondLevelGroupBoxStyle.
Is there way to achieve this?
No, not in XAML. The base style to base the style on must be known at design-time.
If I can't do that, I have to duplicate the definition of SecondLevelGroupBoxStyle.
Since you have two different styles that are based on MetroGroupBox, each style that is based on either of this will always be a separate style because you cannot base a single style on more than one style.
What you could do is to use a trigger that sets the Background property of the GroupBox to either AccentColorBrush3 or AccentColorBrush2 instead of trying to inherit this property from another style. It seems like you are already doing this in your WidgetControlTemplateStyle style. And yes, if the ThirdLevelGroupBoxStyle/SecondLevelGroupBoxStyle sets more than one property you will have to set all these in the WidgetControlTemplateStyle as well.
I am afraid there is no way around this unless you merge your two style into one or define them programatically somehow.

WPF override declared style in vb.net

I've declared the below style. How can I override the style foreground color dynamically in my vb.net?
<Style x:Key="LabelWinner" TargetType="{x:Type Label}">
<Setter Property="Effect">
<Setter.Value>
<DropShadowEffect Color="#FF000000" ShadowDepth="6" />
</Setter.Value>
</Setter>
<Setter Property="Foreground" Value="#FFFF0000"/>
</Style>
As mentioned in the comment #nit, In WPF have a powerful system behavior properties in the form of Style.Triggers.
Earlier, in WinForms to change a specific property, we had to do it through the code that was not quite comfortable and practical. The developers of WPF decided to separate the visual logic related to the appearance of the program, and business logic, which contains the desired behavior of the program. Actually, it was a Style.
To set the Style trigger, you need to select the appropriate properties. The trigger is as follows:
<Trigger Property="SomeProperty" Value="SomeValue">
... Some actions by way of setters...
</Trigger>
For example, we want to see, when you hover the mouse cursor changes Foreground color and FontSize. Then we choose the property IsMouseOver, and then write a Trigger:
<Style x:Key="LabelWinner" TargetType="{x:Type Label}">
<Setter Property="Effect">
<Setter.Value>
<DropShadowEffect Color="#FF000000" ShadowDepth="6" />
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Foreground" Value="Green" />
<Setter Property="FontSize" Value="14" />
</Trigger>
</Style.Triggers>
</Style>
It should be remembered, that in WPF have a list of value precedence (MSDN), that the local value of a higher priority than the trigger style. Therefore, if you value for property of Label will be set locally, the trigger will not be able to change it, for example:
<Label Foreground="Red" ... /> <!-- Trigger don't change foreground -->
If the standard property are missing, or the need to implement your scenario, then it have the attached dependency property (MSDN). Inside it, you can set any condition, for example to start the animation and the trigger in the style it will work.
Example of trigger with attached dependency property:
<Trigger Property="local:YourClass.MyProperty" Value="True">
<Setter TargetName="SaveButton" Property="Background" Value="AliceBlue" />
</Trigger>

Can you define multiple TargetTypes for one XAML style?

In HTML/CSS you can define a style which can be applied to many types of elements, e.g.:
.highlight {
color:red;
}
can be applied to both P and DIV, e.g.:
<p class="highlight">this will be highlighted</p>
<div class="highlight">this will also be highlighted</div>
but in XAML you seem to have to define the TargetType for styles, otherwise you get an error:
<Style x:Key="formRowLabel" TargetType="TextBlock">
is there a way to allow a XAML style to be applied to multiple elements or even to leave it open as in CSS?
The setters in WPF styles are checked during compile time; CSS styles are applied dynamically.
You have to specify a type so that WPF can resolve the properties in the setters to the dependency properties of that type.
You can set the target type to base classes that contain the properties you want and then apply that style to derived classes. For example, you could create a style for Control objects and then apply it to multiple types of controls (Button, TextBox, CheckBox, etc)
<Style x:Key="Highlight" TargetType="{x:Type Control}">
<Setter Property="Foreground" Value="Red"/>
</Style>
...
<Button Style="{StaticResource Highlight}" Content="Test"/>
<TextBox Style="{StaticResource Highlight}" Text="Test"/>
<CheckBox Style="{StaticResource Highlight}" Content="Test"/>
<!-- Header text style -->
<Style x:Key="headerTextStyle">
<Setter Property="Label.VerticalAlignment" Value="Center"></Setter>
<Setter Property="Label.FontFamily" Value="Trebuchet MS"></Setter>
<Setter Property="Label.FontWeight" Value="Bold"></Setter>
<Setter Property="Label.FontSize" Value="18"></Setter>
<Setter Property="Label.Foreground" Value="#0066cc"></Setter>
</Style>
<!-- Label style -->
<Style x:Key="labelStyle" TargetType="{x:Type Label}">
<Setter Property="VerticalAlignment" Value="Top" />
<Setter Property="HorizontalAlignment" Value="Left" />
<Setter Property="FontWeight" Value="Bold" />
<Setter Property="Margin" Value="0,0,0,5" />
</Style>
I think both of these methods of declaring a style might answer your question.
In the first one, there is no TargetType specified, but the property names are prefixed with 'Label'. In the second one, the style is created for Label objects.
Another method to do it is:
<UserControl.Resources>
<Style x:Key="commonStyle" TargetType="Control">
<Setter Property="FontSize" Value="24"/>
</Style>
<Style BasedOn="{StaticResource commonStyle}" TargetType="ListBox"/>
<Style BasedOn="{StaticResource commonStyle}" TargetType="ComboBox"/>
</UserControl.Resources>
I wanted to apply a style to a Textblock and a TextBox but the selected answer didn't work for me because Textblock doesn't inherit from Control, in my case I wanted to affect the Visibility property, so I used FrameworkElement
<Style x:Key="ShowIfRequiredStyle" TargetType="{x:Type FrameworkElement}">
<Setter Property="Visibility" Value="Collapsed"/>
<Style.Triggers>
<DataTrigger Binding="{Binding ShowIfRequiredStyle, UpdateSourceTrigger=PropertyChanged}" Value="true">
<Setter Property="Visibility" Value="Visible"/>
</DataTrigger>
</Style.Triggers>
</Style>
<TextBlock Style="{StaticResource ResourceKey=ShowIfRequiredStyle}"/>
<TextBox Style="{StaticResource ResourceKey=ShowIfRequiredStyle}"/>
This works for the Visibility property because both items inherit from Frameworkelement and the property is defined there. Of course this will not work for properties defined only in Control, you can search the hierarchy tree and try to find a base class, anyway I thought this could help someone since this is a top search result and the selected answer is a little incomplete.
There is an alternative answer to the question. You CAN leave the TargetType parameter off the style altogether which will allow it to apply to various different controls, but only if you prefix the property name with "Control."
<Style x:Key="Highlight">
<Setter Property="Control.Foreground" Value="Red"/>
</Style>
Obviously, this only works for properties of the base control class. If you tried to set ItemsSource say, it would fail because there is no Control.ItemsSource
I got this working
<Style x:Key="HeaderStyleThin" TargetType="{x:Type Border}">
<Setter Property="Background" Value="Black" />
<Style.Resources>
<Style TargetType="{x:Type TextBlock}">
<Setter Property="Background=" Value="Red" />
</Style>
</Style.Resources>
</Style>

Resources