Here is a fully reproducible example:
<Window x:Class="DemoWPF.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
Title="MainWindow" Height="450" Width="800">
<Grid Name="GridMain">
<Grid.Resources>
<Style x:Key="{x:Type Grid}">
<Setter Property="Control.Background" Value="Red"/>
</Style>
</Grid.Resources>
<StackPanel>
<Label>First Content</Label>
<TextBox>First Edit</TextBox>
<StackPanel>
<Label>Second Content</Label>
<TextBox>Second Edit</TextBox>
</StackPanel>
</StackPanel>
</Grid>
</Window>
The output of this is as follows:
What I find confusing is that the TextBox control has a BackgroundProperty which inherits from Control - no different than the Label. However, as can be seen the TextBoxes do not have their background colour changed. Although the Grid does not have a Control.Background property, but has a Panel.Background property, yet it still has its background property set, even though the property being set is Control.Background.
Short answer:
Because it's not transparent, it has a color by default:
A text box is an input field so it should be easy to spot.
On the other hand, Label is transparent for convenience/design:
Assuming it had a default color (in this case, blue) it wouldn't be very convenient, right ?
We get to the point, labels should melt into background, while fields such as textboxes should be easily distinguishable by nature.
What I find confusing is that the TextBox class has a BackgroundProperty which inherits from Control - no different than the Label. However, as can be seen the TextBoxes do not have their background colour changed.
Each control has a default style and control template. They define the required parts of a control, its apprearance and its visual states. The Background is one of the properties that may or may not be defined, depending on the control. For the controls that you use, the backgrounds are defined like this:
Label: Transparent
TextBox: SystemColors.WindowBrushKey
Grid: None, default value.
StackPanel: None, default value.
Consequently, the Label appears to be red, but is not. It is the StackPanel or Grid background that you see through its Transparent background. For the TextBox, the background does not change because of dependency property setting precedence. The background value of the default implicit style of TextBox just has a higher precedence than your local style setter.
What to do now? Assign the background with a higher precedence, e.g.:
Add it as a local value.
Define a style and assign it directly to the Style property of TextBox.
Define an implicit style for TextBox
<Style x:Key="{x:Type TextBox}" BasedOn="{StaticResource {x:Type TextBox}}">
<Setter Property="Control.Background" Value="Red"/>
</Style>
Although the Grid does not have a Control.Background property, but has a Panel.Background property, yet it still has its background property set, even though the property being set is Control.Background.
That is another implementation detail in WPF. As you can see in the reference source for Panel, it defines the Background property, but when you look at the reference source for Control, you can see that it does not define a Background property itself, but adds itself as the owner of the property defined by Panel. From the documentation of AddOwner:
Typically, AddOwner is used to add dependency properties to classes that do not already expose that dependency property through managed class inheritance (class inheritance would cause the wrapper properties to be inherited by the derived class, and thus would provide general members-table access to the dependency property already). AddOwner enables the property system to recognize a dependency property on a type that did not register that dependency property initially.
In other words, the properties work as if they were inherited and the XAML processor is smart enough to recognize that the Control.Background and Panel.Background properties are essentially the same.
Used BaseOn property For inherited
<Grid.Resources>
<Style x:Key="DefaultStyle" TargetType="{x:Type FrameworkElement}">
<Setter Property="Control.Background" Value="Red"/>
</Style>
<Style TargetType="TextBox" BasedOn="{StaticResource DefaultStyle}"/>
<Style TargetType="Label" BasedOn="{StaticResource DefaultStyle}"/>
</Grid.Resources>
<StackPanel>
<Label>First Content</Label>
<TextBox>First Edit</TextBox>
<StackPanel>
<Label>Second Content</Label>
<TextBox>Second Edit</TextBox>
</StackPanel>
</StackPanel>
</Grid>
Related
I'm using MaterialDesignInXaml for WPF which provides 3rd party controls and styles. I need to edit one of these styles by changing one property.
I am using an Expander control which has a template creating a bunch of child controls. I've discovered the child 'Border' control (4 layers deep) has the property (padding) which I need to set to zero.
See this output from Snoop showing the property I need to change:
Link to image
My question is how can I do this? I've tried extending the style used by the control as follows, but it isn't changing anything so I assume I'm doing something wrong?
<Style TargetType="{x:Type Expander}"
x:Key="MaterialDesignExpanderHeadless"
BasedOn="{StaticResource MaterialDesignExpander}">
<Style.Resources>
<Style TargetType="{x:Type Border}">
<Setter Property="Padding" Value="0"></Setter>
</Style>
</Style.Resources>
</Style>
I am able to use the style like this. And I know this is working for sure:
<Expander Header="Header Content" Style="{StaticResource MaterialDesignExpanderHeadless}">
Some Content
</Expander>
You're right, this method should work. Something else is setting the border's padding.
Snoop is telling you the padding is defined by the parent template, which could be the HeaderSite (ToggleButton).
You could try to extend the ToggleButton style (BasedOn) or redefine it locally.
I have followed the DiagramDesigner example on Codeproject for learning how to use Adorners in WPF as it fits quite a few of my needs relatively closely.
I have adapted the implementation a little, and also added my own adorner, for controlling the opacity of a control via a slider (slider on the adorner).
Following the same methods as the author, I placed the slider and other feature in a xaml style definition file as below. I am just now struggling A) to figure out how to access the slider at any level, B) how best to start hooking this up with an underlying Viewmodel that will be used for various settings (on adorners).
<Style x:Key="OpacityAdorner" TargetType="{x:Type adorners:OpacityChrome}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type adorners:OpacityChrome}">
<Grid>
<Slider x:Name="OpacitySlider" Style="{StaticResource OpacityControl}" ToolTip="Alter the opacity of the image to overlay with other images" Visibility="Collapsed"/>
<Ellipse x:Name="OpacitySliderEnable" Style="{StaticResource OpacityIcon}" ToolTip="Alter the visual opacity of the image" Visibility="Visible"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
The codeproject example is here http://www.codeproject.com/Articles/22952/WPF-Diagram-Designer-Part
A) Use something like the following snippet to get the slider from the applied template.
var slider = opacityAdorner.Template.FindName("OpacitySlider", opacityAdorner) as Slider;
there are cases where the template has not yet been applied, in that case you need to preceed the previous call with the following:
opacityAdorner.ApplyTemplate();
B) The best approach for hooking up with the view model (in my opinion) is to expose the required properties as dependency properties on the OpacityChrome adorner. You then use normal Binding to hook up the new properties to the view-model, and TemplateBinding to hook them up to the template elements.
Edit (as commented: XY-Problem) - Problem:
I want to create my own control which has predefined styles and positions for special elements (Button,...), but in general everything should be able to be placed inside my custom control. The custom control in my case is just a "menubar" which should be able to be used anywhere in the "GUI code" - but there is no need it has to be there. But when it is used it should be the same style and behavior everywhere. A style is - I think - not enough, because there are also predefined elements in this menubar (e.g. Help is already in menubar)
Edit end.
I want to build a custom control (just a special stackpanel) in WPF with the following requirements:
can be used as any other control within a xaml
has defined styles for controls within the custom control
First I simply tried to create a UserControl containing a stackpanel with defined styles (in the xaml) for containing elements (e.g. Button). This UserControl contained the
<ContentPresenter />
in the xaml. With this method it is not possible to name the containing elements. E.g.:
<mynamespace:MyStackPanel>
<Button Name="w00t">This does not work!</Button>
</mynamespace:MyStackPanel>
Next try was to create a "real" custom control. This custom control is just a class without the xaml. Code is very simple. Class inherits from UserControl and just contains:
StackPanel sp = new StackPanel();
sp.Children.Add(new ContentPresenter());
this.AddChild(sp);
Woooohoooo, now it's possible to name the containing elements. But still a big problem: How to define the styles?
I could define the style for my very own custom control in a ResourceDictionary. But i have to add the ResourceDictionary to the global (App.xaml) Resources. And then I can define styles only for my custom control - not for the containing elements? - But anyway... doing it like this just feels wrong!
So the main question is: WHAT is the "correct" way of creating a custom control which can be used in xaml like any other control? If the second way is the correct way - how is it possible to set the style like I do it in a xaml (e.g. every Button in this element has a special style) and has it to be a "global" ResourceDictionary?
How is it implemented in third-party stuff?
Ok I made an example for you, which involves Custom Controls (as Opposed to UserControls)
Step 1:
Create a new class (code only, no XAML) derived from ContentControl (or whatever UI element that has a behavior similar to what you need)
public class ReusableContainer : ContentControl
{
public static readonly DependencyProperty ButtonProperty = DependencyProperty.Register("Button", typeof(Button), typeof(ReusableContainer), new PropertyMetadata(default(Button)));
public Button Button
{
get { return (Button)GetValue(ButtonProperty); }
set { SetValue(ButtonProperty, value); }
}
}
See how I'm defining the Button property as a DependencyProperty here. You can add more DPs for whatever "content placeholders" that you need in your custom control.
Step 2:
Have your predefined Styles for the UI elements inside the container in a separate ResourceDictionary:
CustomStyles.xaml
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Style TargetType="Button">
<Setter Property="Background" Value="Green"/>
</Style>
</ResourceDictionary>
Step 3: in app.xaml, define an application-wide style for the ReusableContainer, which defines it's template:
<Application x:Class="WpfApplication14.App"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:WpfApplication14"
StartupUri="MainWindow.xaml">
<Application.Resources>
<Style TargetType="{x:Type local:ReusableContainer}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type local:ReusableContainer}">
<ControlTemplate.Resources>
<ResourceDictionary Source="CustomStyles.xaml"/>
</ControlTemplate.Resources>
<ContentPresenter Content="{TemplateBinding Button}"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Application.Resources>
</Application>
See how I'm using the TemplateBinding expression to define that the ContentPresenter's content is going to be defined by the Button property in the ReusableContainer.
Also notice how I'm Adding the Resources in CustomStyles.xaml to the ControlTemplate.Resources collection. This makes these resources available to all UI elements inside the Template.
Step 4:
Place your ReusableContainer in a Window:
<Window x:Class="WpfApplication14.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:WpfApplication14"
Title="MainWindow" Height="350" Width="525">
<StackPanel>
<local:ReusableContainer>
<local:ReusableContainer.Button>
<Button x:Name="Button1" Content="Hello! Button 1"/>
</local:ReusableContainer.Button>
</local:ReusableContainer>
<local:ReusableContainer>
<local:ReusableContainer.Button>
<Button x:Name="Button2" Content="Hello! Button 2"/>
</local:ReusableContainer.Button>
</local:ReusableContainer>
<local:ReusableContainer>
<local:ReusableContainer.Button>
<Button x:Name="Button3" Content="Hello! Button 3"/>
</local:ReusableContainer.Button>
</local:ReusableContainer>
</StackPanel>
</Window>
Is there anyway to turn off a style programatically?
As an example, I have a style that is linked to all textboxes
<Style TargetType="{x:Type TextBox}">
I would like to add some code to actually stop the style elements being used, so basically reverting back to the default control style.
I need a way to make a switch in my styles, so I can switch between Windows default style and my custom style through C# code.
Is there anyway to do this?
Thanks
Working Solution
Switching between themes in WPF
For setting the style to default,
In XAMl use,
<TextBox Style="{x:Null}" />
In C# use,
myTextBox.Style = null;
If style needs to be set as null for multiple resources, see CodeNaked's response.
I feel, all the additional info should be in your question and not in the comments. Anyways, In code Behind I think this is what you are trying to achieve:
Style myStyle = (Style)Application.Current.Resources["myStyleName"];
public void SetDefaultStyle()
{
if(Application.Current.Resources.Contains(typeof(TextBox)))
Application.Current.Resources.Remove(typeof(TextBox));
Application.Current.Resources.Add(typeof(TextBox),
new Style() { TargetType = typeof(TextBox) });
}
public void SetCustomStyle()
{
if (Application.Current.Resources.Contains(typeof(TextBox)))
Application.Current.Resources.Remove(typeof(TextBox));
Application.Current.Resources.Add(typeof(TextBox),
myStyle);
}
You could inject a blank Style that would take precedence over your other Style. Like so:
<Window>
<Window.Resources>
<Style TargetType="TextBox">
<Setter Property="Background" Value="Red" />
</Style>
</Window.Resources>
<Grid>
<Grid.Resources>
<Style TargetType="TextBox" />
</Grid.Resources>
</Grid>
</Window>
In the example above, only the Grid's implicit Style would be applied to TextBoxes in the Grid. You could even add this to the Grid programmatically, something like:
this.grid.Resources.Add(typeof(TextBox), new Style() { TargetType = typeof(TextBox) });
I know the answer has been accepted, but i want to add my solution which works awesome in the following scenario:
One main application using mahapps.metro
additional project imported from the main application with no reference to mahapps.metro, it is imported as a plugin (loading compiled .dll on the fly)
using the < ToolBar> re-styles everything to null therefore the mahapps.metro styles are not being applied to items inside the toolbar.
usercontrol is used to provide custom controls to the main application.
in the user control root set the resources:
<UserControl.Resources>
<Style x:Key="ButtonStyle" TargetType="Button" BasedOn="{StaticResource {x:Type Button}}" />
<Style x:Key="ComboBoxStyle" TargetType="ComboBox" BasedOn="{StaticResource {x:Type ComboBox}}" />
</UserControl.Resources>
then the toolbar code can be the following
<ToolBar>
Block Template:
<ComboBox Style="{StaticResource ComboBoxStyle}"/>
<Button Content="Generate!" Style="{StaticResource ButtonStyle}"/>
</ToolBar>
this successfully applies the main application style to the controls inside the < ToolBar>
In Xaml, you can override this by setting a style explicitly. In code-behind, you can also set the style explicitly.
<TextBox Style="{StaticResource SomeOtherStyle}"/>
myTextBox.Style = Application.Resources["SomeOtherStyle"];
Could you tell me what is the main differences between Style and ControlTemplate ?
When or why to use one or the other ?
To my eyes, they are exactly the very same. As I am beginner I think that I am wrong, thus my question.
In a style you set properties of a control.
<Style x:Key="MyButtonStyle" TargetType="Button">
<Setter Property="Background" Value="Red"/>
</Style>
<Button Style="{StaticResource MyButtonStyle}"/>
All buttons that use this style will have their Backgrounds set to Red.
In a template you define the UI (structure) of the control.
<ControlTemplate x:Key="MyButtonTemplate" TargetType="Button">
<Grid>
<Rectangle Fill="Green"/>
<ContentPresenter/>
</Grid>
</ControlTemplate>
<Button Template="{StaticResource MyButtonTemplate}"/>
All buttons that use this template will have a green background that cannot be changed.
Values set in a template can only be replaced by replacing the entire template. Values in a style can be replaced by setting the value explicitly when using the control. That is why is better to use the properties of the control by using TemplateBinding instead of coding values.
<ControlTemplate x:Key="MyButtonTemplate" TargetType="Button">
<Grid>
<Rectangle Fill="{TemplateBinding Background}"/>
<ContentPresenter/>
</Grid>
</ControlTemplate>
Now the template uses the value of the Background property of the button it is applied to, so it can be customized:
<Button Template="{StaticResource MyButtonTemplate}" Background="Yellow"/>
Another useful feature is that controls can pick up a default style without having a specific style being assigned to them. You can't do that with a template.
Just remove the x:Key attribute of the style (again: you can't do this with templates). All buttons in the visual tree below the style will have this style applied.
Combining Templates and Styles is extra powerful: you can set the Template property in the style:
<Style TargetType="Button">
<Setter Property="Background" Value="Red"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid>
<Rectangle Fill="{TemplateBinding Background}"/>
<ContentPresenter/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
No indeed you are quite wrong.
Styles set properties on controls. ControlTemplate is a property shared by most controls that specify how they are rendered.
To elaborate, you can use a style to group settings for a bunch of properties so you can re-use that to standardize your controls. Styles can be set explicitly on controls or applied too all of a certain type.
Control Templates can be set by a style or set explicitly on a control to change the way it appears. All controls have default templates (and styles for that matter) that are embedded in the .net wpf assemblies. It is quite enlightening to see these and understand how the wpf developers implemented the normal versions of all controls. If you have Expression blend installed, look in its "SystemThemes" folder.
UPDATE:
To understand how Styles and ControlTemplates can "add controls". In some way or another, the ControlTemplate is the only way to define the controls a control is made up of. But, some default .net controls allow you to use controls in place of text.
For example:
<GroupBox>
<GroupBox.Header>
<CheckBox/>
</GroupBox.Header>
</GroupBox>
This "adds" a checkbox to the groupbox without changing the ControlTemplate, but this is because the default ControlTemplate for GroupBox allows anything as the Header. This is done by using special controls such as ContentPresenter.
However, sometimes the default ControlTemplate for a control doesn't allow you to change something that you want to change via properties. Then you must change the ControlTemplate.
Whether you set the Properties of a control (Content, Header, ControlTemplate, IsEnabled, etc.) directly or via a style does not matter, Styles are only a convenience.
Hopefully this answers your question more clearly.
You can think of a Style as a convenient way to apply a set of property values to more than one element. You can change the default appearance by setting properties, such as FontSize and FontFamily, on each TextBlock element directly. However, if you want your TextBlock elements to share some properties, you can create a Style in the Resources section of your XAML file.
On the other hand, a ControlTemplate specifies the visual structure and visual behavior of a control. You can customize the appearance of a control by giving it a new ControlTemplate. When you create a ControlTemplate, you replace the appearance of an existing control without changing its functionality. For example, you can make the buttons in your application round instead of the default square shape, but the button will still raise the Click event.
Ref: http://msdn.microsoft.com/en-us/library/ms745683.aspx
I found some interesting differences in
The difference between styles and templates (msdn)
Style:
You can set only pre-existing properties in the style. For example, you cannot set a default value for a property that belongs to a new part that you added to the template.
Template:
When you modify a template, you have access to more parts of a control than when you modify a style. For example, you can change the way the pop-up list appears in a combo box, or you change the look of the button that triggers the pop-up list in the combo box by modifying the items template.
Style:
You can use styles to specify the default behavior of a control. For example, in a style for a button, you can specify a trigger so that when users move their mouse pointer over the button, the background color will change. These property changes are instantaneous (they cannot be animated gradually).
Template:
You can specify the behavior of any new and existing parts in a template by using triggers. For example, you can specify a trigger so that when users move their mouse pointer over a button, the color of one of the parts will change. These property changes can be instantaneous or animated gradually to produce a smooth transition.
OK, I had the exact same question and the answers I found in this thread pointed me in the right direction so I'm sharing, if only so I can understand it better myself.
A Style is more flexible than a ControlTemplate.
From Windows Presentation Foundation Unleashed, Adam Nathan and gang (writers) state this:
"Besides the convenience of combining a template [with a style using the Style's ControlTemplate setter] with arbitrary property settings, there are important advantages of doing this [setting the ControlTemplate setter on a style]:
It gives you the effect of default templates. For example, when a typed Style gets applied to elements by default, and that Style contains a custom control template, the control template gets applied without any explicitly markings on those elements.
It enables you to provide default yet overridable property valus that control the look of the template. In other words, it enables you to respect the templated parent's properties but still provide your own default values."
In other words, creating a style allows the user of the Style's Template setter to override the values set, even if they did not use a TemplateBinding ({TemplateBinding Width} for example). If you hardcoded the Width in your style, the user of the Style could still override it, but if you hardcoded that Width property in a Template, the user is stuck with it.
Also, (and this is kind of confusing) when using a ContentTemplate with a TemplateBinding the onus is on the user to set that property otherwise it will use the default property for the TargetType. If you use a style, you can override the default property of the TargetType by using a setter for the property and then applying a TemplateBinding referencing back to that setter. The book explains it better, page 338 (Mixing Templates with Styles)