WPF Styling all elements using UIElement - wpf

Here's something I want to do:
<Application.Resources>
<Style TargetType="{x:Type UIElement}">
<Setter Property="Opacity"
Value=".1" />
</Style>
</Application.Resources>
So that I can style any type (not just some final concrete UI type). I am not looking for best practices, its more of a question to ponder.
I noticed that WPF does not style any super class specified in TargetType (UIElement, FrameworkElement, etc etc). It styles only if the TargetType equates to the concrete UI class (Button, Rectangle).

if you just want to define a base Style, you can however use BasedOn property.
<Style TargetType="FrameworkElement" x:Key="ElementBase">
<Setter Property="Height" Value="24"/>
</Style>
<Style TargetType="TextBlock" BasedOn="{StaticResource ElementBase}">
</Style>
It is a little bit more work, but maybe it helps.

Related

Set default Style for FrameworkElement is not applied to derived class

I am a beginner in XAML. I create a new default style in a ResourceDictionary.
<Style TargetType="FrameworkElement" BasedOn="{StaticResource {x:Type FrameworkElement}}">
<Setter Property="Margin" Value="5"/>
<Setter Property="VerticalAlignment" Value="Center"/>
</Style>
Then I import it to UserControl.Resources.
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="pack://application:,,,/PathToStyle.xaml"/>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
What I expect is that it will be applied to all FrameworkElements used in that UserControl, but it is not.
What infomation am I missing here?
The problem is because TargetType is specific.
A style which you do not give a x:Key to automatically is given a key which is equivalent to it's type.
Hence your style:
<Style TargetType="FrameworkElement"
Actually has an x:Key given to it which is
<Style x:Key="{x:Type FrameworkElement}"
https://learn.microsoft.com/en-us/dotnet/api/system.windows.style.targettype?redirectedfrom=MSDN&view=netcore-3.1#System_Windows_Style_TargetType
A piece of ui which is "looking" for a style looks for a matching key to it's type using that x:Key. It does not search up it's inheritance chain as well.
EDIT:
You can prove this:
In a new wpf app, add a frameworkelement to you mainwindow and a style targets frameworkelement.
<Window.Resources>
<Style TargetType="FrameworkElement">
<Setter Property="Height" Value="10"/>
</Style>
</Window.Resources>
<Grid>
<local:TestSubClass/>
</Grid>
and
public class TestSubClass : FrameworkElement
Spin it up and take a look at the live visual tree > Properties.
The frameworkelement fills the grid and has an actualheight matching the grid's height.
No style is set on it.
Hence this is the situation where no style is set and inheritance is not working as claimed in another post.
Change that to a regular frameworkelement:
<Window.Resources>
<Style TargetType="FrameworkElement">
<Setter Property="Height" Value="10"/>
</Style>
</Window.Resources>
<Grid>
<FrameworkElement/>
</Grid>
Spin it up with an f5 and take a look at the live visual tree.
There is a style in the properties.
Actualheight is 10.
What I'm expecting is it will apply to all FrameworkElement used in That UserControl
By all FrameworkElements you probably mean all FrameworkElements including its derivatives. Applying the Style as implicit style works perfectly if you target a distinct control like a Button. However, it may not work as you expect, if you target a base type of a control, like FrameworkElement, because each derivative of that base type can have their own style applied explicitly or implicitly that breaks your anticipated behavior by:
Not being based on the style of the base type
Not being based on a style that is transitively based on the base type style
Overriding the properties of the base style
The essential misunderstanding here is that all styles of derivatives of a base type will base their style on the style of said base type, but this does not apply in general.
You can check this yourself by extracting the Style of any control via Visual Studio or Blend. For example, let's look at the Style of a Button. As you can see, it is not even based on FrameworkElement, so it will not apply your base style. Even if it would, there is a chance that it will override the Margin property itself.
<Style x:Key="ButtonStyle" TargetType="{x:Type Button}">
<Setter Property="FocusVisualStyle" Value="{StaticResource FocusVisual}"/>
<Setter Property="Background" Value="{DynamicResource PrimaryHueMidBrush}"/>
<Setter Property="BorderBrush" Value="{DynamicResource PrimaryHueMidBrush}"/>
<!-- ...other setters. -->
</Style>
Apart from that, you have to define your base type style before any other styles of derivatives, because you can only use BasedOn with StaticResource. Consequently, if the style of a derived control is already defined before your style, your base style will not be applied.
What infomation am I missing here?
The fact that there are default styles defined for more derived types such as for example Button and Control and that these will take precedence over and be applied instead of your custom FrameworkElement style.
Your approach of defining a single Style for all FrameworkElements won't work. You'll need to define an implicit type for each derived FrameworkElement type.

WPF StaticResource for width

<Style x:Key="Small" TargetType="Button">
<Setter Property="Width" Value="80"/>
</Style>
<Style x:Key="DefaultButtonStyleSmall" TargetType="Button" BasedOn="{StaticResource ButtonBaseStyle}">
<Setter Property="Width" Value="{StaticResource Small}" />
</Style>
I get the error
System.Window.Style is not a valid value for the System.Windows.FrameworkElement.Width property on a setter
What am I doing wrong?
You are assigning a Style to a property, not to the control that has that property. Since you apparently want to use the value in a Style, it can't be a Style itself - it has to be of the same type as the target property, i.e. a Double:
Define the system namespace
xmlns:system="clr-namespace:System;assembly=mscorlib"
And define Small as a Double, not a Style:
<system:Double x:Key="Small">80</system:Double>
Also, keep in mind that this will only work if the button doesn't have a Width set because local values (e.g. Width="Auto") take precedence over style values.

WPF overriding ListViewItem style when use Material Design In XAML Toolkit

I installed Material Design In XAML Toolkit to my project. I have ListView which contains within itself GridView (with GridViewColumns) and i want to override styles for each row in this table. But in each case i lose styles from Material Design In XAML Toolkit.
I tried do several things:
1) Override existing styles based on target type:
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem" BasedOn="{StaticResource {x:Type ListViewItem}}">
<Setter Property="Background" Value="Green" />
</Style>
</ListView.ItemContainerStyle>
I got overriding styles, but in this case i lose type recognition in GridView (Columns contains correct headers, but values contains call result ToString() method my model)
2) I used concrete style from Material Design In XAML Toolkit - MaterialDesignGridViewItem:
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem" BasedOn="{StaticResource MaterialDesignGridViewItem">
<Setter Property="Background" Value="Green" />
</Style>
</ListView.ItemContainerStyle>
In this case i got work solution (it would seem), but when i do adding triggers instead , i lose material styles (got only color, without animations).
3) In other cases i lose all material styles and go back to wpf default styles.
Hope on our help.
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem" BasedOn="{StaticResource MaterialDesignListBoxItem">
<Setter Property="Background" Value="Green" />
</Style>
</ListView.ItemContainerStyle>
Instead of using MaterialDesignGridViewItem, your extended style should be based on MaterialDesignListBoxItem.
The same works for other items. This helped me with TreeViewItem's that used to be in the style of MaterialDesign, but were also overwritten until I added the BasedOn property.
<TreeView.ItemContainerStyle>
<Style TargetType="{x:Type TreeViewItem}" BasedOn="{StaticResource MaterialDesignTreeViewItem}">
<EventSetter Event="TreeViewItem.DragOver" Handler="treeView_DragOver"/>
<EventSetter Event="TreeViewItem.Drop" Handler="treeView_Drop"/>
<EventSetter Event="TreeViewItem.MouseMove" Handler="treeView_MouseMove"/>
<EventSetter Event="TreeViewItem.MouseLeftButtonDown" Handler="treeView_MouseDown"/>
<EventSetter Event="TreeViewItem.MouseRightButtonDown" Handler="treeView_MouseRightDown"/>
</Style>
</TreeView.ItemContainerStyle>
Please note a "}" is missing after "MaterialDesignListBoxItem", so that:
<Style TargetType="ListViewItem" BasedOn="{StaticResource MaterialDesignListBoxItem}">

Cannot base style on another style

I have some locally defined styles within Window.Resources. I have some styles for a TextBlock, TextBox, CheckBox and RadioButton. These are supposed to be applied to all controls in the window, so I haven't provided a value for x:Key. I would like them to inherit from a style targeting FrameworkElement. So I have something like:
<Style TargetType="{x:Type RadioButton}">
...
</Style>
<Style TargetType="{x:Type TextBlock}">
...
</Style>
<Style TargetType="{x:Type TextBox}">
...
</Style>
<Style TargetType="{x:Type CheckBox}">
...
</Style>
<Style x:Key="TriggerBase" TargetType="{x:Type FrameworkElement}">
<Style.Triggers>
<Trigger Property="UIElement.IsMouseOver" Value="True">
...
</Trigger>
</Style.Triggers>
</Style>
My problem is that I am unable to set the BasedOn property to inherit from my TriggerBase style. After looking at similar questions, such as this and this, I still cannot get it working. These answers suggest you need to specify the TargetType on your base style, which I have done.
I thought maybe the Styles have to target the exact same type, but after digging around on MSDN I found that wasn't the problem:
If you create a style with a TargetType property and base it on another style that also defines a TargetType property, the target type of the derived style must be the same as or be derived from the type of the base style.
If I set BasedOn like BasedOn="{DynamicResource TriggerBase}", it can find my TriggerBase, but I get an error stating:
A 'DynamicResourceExtension' cannot be set on the 'BasedOn' property
of type 'Style'. A 'DynamicResourceExtension' can only be set on a
DependencyProperty of a DependencyObject.
If I try BasedOn="{StaticResource TriggerBase}", I get an error that it cannot find TriggerBase. One of the linked answers above showed using StaticResource like BasedOn="{StaticResource {x:Type FrameworkElement}, but it still cannot resolve the style.
How can I inherit from the TriggerBase style? I'm targeting .NET 4.5.
You are correct and you can base your styles on FrameworkElement style just need to move
<Style x:Key="TriggerBase" TargetType="{x:Type FrameworkElement}">
</Style>
to the top and then
<Style TargetType="{x:Type RadioButton}" BasedOn="{StaticResource TriggerBase}">
will work

WPF Replacing AND extending styles

How do I change what WPF's idea of the default style for a control is? And why is this happening in the first place? In the below XAML, I declare a Style for Button, and then further declare a new Style that overrides one of the setters called "HugeBut". I would expect that HugeBut is implicitly BasedOn my new un-named style, but apparently it is not;
<Window.Resources>
<Style TargetType="{x:Type Button}">
<Setter Property="Foreground" Value="Black"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border Background="Red">
<ContentPresenter/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<!-- badness -->
<Style TargetType="{x:Type Button}" x:Key="HugeBut">
<Setter Property="Foreground" Value="Yellow"/>
</Style>
<!-- works, but I do not want to explicitly set the based-on. -->
<Style TargetType="{x:Type Button}" x:Key="HugeBut" BasedOn="{StaticResource {x:Type Button}}">
<Setter Property="Foreground" Value="Yellow"/>
</Style>
</Window.Resources>
<Button Content="Regular" />
<Button Content="huge!" Style="{StaticResource HugeBut}"/>
You would expect two red buttons, one with black text and one with yellow, but Style HugeBut inherits all of the values that I did not specify in my unnamed style from the system default theme for Button (Aero in my case).
What can I do to change this behavior?
It appears that the answer is here:
http://wpfthemereplacer.codeplex.com/
From the site description:
This library allows users to provide their own resource dictionaries
to replace the default theme dictionaries loaded by WPF. This makes it
so you don't have to decorate custom styles with
BasedOn="{StaticResource {x:Type ...}}" when your own custom theme is
being used in your application. It also makes it so if you have custom
controls that just provide enhanced capability and don't need to
replace the the style, you don't need to define a new style or
override the DefaultStyleKey when you create the custom control.
This is exactly what I'm looking for. This will allow me to use Styles as they are meant to be used across an app that has been extensively "re-themed", rather than theme-ing by setting global styles (and then deal with tracking down bits of code that are missing BasedOn, or cannot deal with it at all due to WPF bugs and other constraints)
works, but I do not want to explicitly set the based-on.
Well, the framework does not really care if you don't want to, for all i know, you have to.

Resources