Applying a style to all derived classes in WPF - wpf

I want to apply a style to all classes derived from Control. Is this possible with WPF?
The following example does not work. I want the Label, TextBox and Button to have a Margin of 4.
<Window x:Class="WeatherInfo.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Wetterbericht" Height="300" Width="300">
<Window.Resources>
<Style TargetType="Control">
<Setter Property="Margin" Value="4"/>
</Style>
</Window.Resources>
<Grid>
<StackPanel Margin="4" HorizontalAlignment="Left">
<Label>Zipcode</Label>
<TextBox Name="Zipcode"></TextBox>
<Button>get weather info</Button>
</StackPanel>
</Grid>
</Window>

Here's one solution:
<Window.Resources>
<Style TargetType="Control" x:Key="BaseStyle">
<Setter Property="Margin" Value="4"/>
</Style>
<Style BasedOn="{StaticResource BaseStyle}" TargetType="Button" />
<Style BasedOn="{StaticResource BaseStyle}" TargetType="Label" />
<Style BasedOn="{StaticResource BaseStyle}" TargetType="TextBox" />
</Window.Resources>
<Grid>
<StackPanel Margin="4" HorizontalAlignment="Left">
<Label>Zipcode</Label>
<TextBox Name="Zipcode"></TextBox>
<Button>get weather info</Button>
</StackPanel>
</Grid>

This is not possible in WPF. You have a couple of options to help you out:
Create one style based on another by using the BasedOn attribute.
Move the common information (margin, in this case) into a resource and reference that resource from each style you create.
Example of 1
<Style TargetType="Control">
<Setter Property="Margin" Value="4"/>
</Style>
<Style TargetType="TextBox" BasedOn="{StaticResource {x:Type Control}}">
</Style>
Example of 2
<Thickness x:Key="MarginSize">4</Thickness>
<Style TargetType="TextBox">
<Setter Property="Margin" Value="{StaticResource MarginSize}"/>
</Style>

Related

How to put ContextMenu into Window.Resources

As you can see I am able to put Height property and Foreground property to the Window.Resources
<Window x:Class="WpfApplication1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<Window.Resources>
<Style TargetType="{x:Type TextBox}">
<Setter Property="Height" Value="50"/>
<Setter Property="Foreground" Value="Green"/>
</Style>
</Window.Resources>
<Grid>
<TextBox Text="StackOverFlow">
<TextBox.ContextMenu>
<ContextMenu Background="Blue"/>
</TextBox.ContextMenu>
</TextBox>
</Grid>
</Window>
How can I put <ContextMenu Background="Blue"/> to the Window.Resources?
You can just put the context menu into separate resource
<Window.Resources>
<ContextMenu x:Key="ContextMenu" Background="Blue"/>
<Style TargetType="{x:Type TextBox}" BasedOn="{StaticResource {x:Type TextBox}}">
<Setter Property="Height" Value="50"/>
<Setter Property="Foreground" Value="Green"/>
<Setter Property="ContextMenu" Value="{StaticResource ContextMenu}"/>
</Style>
</Window.Resources>
<Grid>
<TextBox Text="StackOverFlow"/>
</Grid>

Is there a container where I can target the styles of a number of elements

In WPF is there container like an HTML div (where this is easy), where I could target all textblocks within that container? So I do not have to specify the style on every textblock?
I have a complex canvas and in just a region I would like to target the textblocks.
Something to the effect of this (where something other than StackPanel that would work as a style targeting container):
<StackPanel>
<StackPanel.Resources>
<Style TargetType="{x:Type TextBlock}">
<Setter Property="Foreground" Value="White"></Setter>
<Setter Property="FontFamily" Value="Arial"></Setter>
</Style>
</StackPanel.Resources>
<TextBlock Canvas.Left="87" Canvas.Top="210">
mytext1
</TextBlock>
<TextBlock Canvas.Left="87" Canvas.Top="232">
mytext2
</TextBlock>
<TextBlock Canvas.Left="87" Canvas.Top="254">
mytext2
</TextBlock>
</StackPanel>
So if I try a grid the canvas coordinates get ignored and my textblock appears at the top of the canvas.
<Window x:Class="WpfApplication1.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window1" Height="300" Width="300">
<Canvas Width="500" Height="500">
<Grid>
<Grid.Resources>
<Style TargetType="TextBlock">
<Setter Property="Foreground" Value="Red"></Setter>
</Style>
</Grid.Resources>
<TextBlock Text="MyTextBlock1" Canvas.Left="300" Canvas.Top="300">
</TextBlock>
</Grid>
</Canvas>
In this case you are using the canvas coordinates to give 87 spacing on the left and 22 spacing between tops of elements. The StackPanel is already laying out the items one after another. You just need to set the margins for your textblocks
<StackPanel>
<StackPanel.Resources>
<Style TargetType="{x:Type TextBlock}">
<Setter Property="Foreground" Value="Red"></Setter>
<Setter Property="FontFamily" Value="Arial"></Setter>
<Setter Property="FontSize" Value="14" />
<Setter Property="Margin" Value="87,4, 0, 4" />
</Style>
</StackPanel.Resources>
<TextBlock>mytext1</TextBlock>
<TextBlock>mytext2</TextBlock>
<TextBlock>mytext3</TextBlock>
</StackPanel>
To answer your question you can use a Grid control (or Canvas or any other element) wherever you wish to isolate a Resources section. Grid does not perform any layout.
<StackPanel>
<StackPanel.Resources>
<Style TargetType="{x:Type TextBlock}">
<Setter Property="Foreground" Value="White"></Setter>
<Setter Property="FontFamily" Value="Arial"></Setter>
</Style>
</StackPanel.Resources>
<TextBlock>
mytext1
</TextBlock>
<Canvas>
<Canvas.Resources>
<Style TargetType="{x:Type TextBlock}">
<Setter Property="Foreground" Value="Red"></Setter>
<Setter Property="FontFamily" Value="Times"></Setter>
</Style>
</Canvas.Resources>
<TextBlock Canvas.Left="87" Canvas.Top="210">mytext2</TextBlock>
<TextBlock Canvas.Left="87" Canvas.Top="232">mytext2</TextBlock>
</Canvas>
</StackPanel>

Why doesn't my TextBlock/TextBox apply values from a Base Style?

It's not uncommon for me to write something like below for styling a data entry form, but my problem is that TextBox and TextBlock don't seem to implement the Setters that are in the BaseElementStyle. Usually I need to define them separately.
Why is this? And is there a way around it?
I am guessing it has to do with the fact they are usually used in other control templates (for example TextBlock is used in most controls and TextBox is used in DatePickers and ComboBoxes)
<Style x:Key="BaseElementStyle" TargetType="{x:Type FrameworkElement}">
<Setter Property="Margin" Value="5" />
<Setter Property="VerticalAlignment" Value="Center" />
</Style>
<Style TargetType="{x:Type TextBlock}" BasedOn="{StaticResource BaseElementStyle}" />
<Style TargetType="{x:Type TextBox}" BasedOn="{StaticResource BaseElementStyle}" />
<Style TargetType="{x:Type Label}" BasedOn="{StaticResource BaseElementStyle}" />
<Style TargetType="{x:Type ComboBox}" BasedOn="{StaticResource BaseElementStyle}" />
<Style TargetType="{x:Type DatePicker}" BasedOn="{StaticResource BaseElementStyle}" />
<Style TargetType="{x:Type CheckBox}" BasedOn="{StaticResource BaseElementStyle}" />
I would like to suggest the two possible workarounds. It seems that each of Key and Type can be used but both of them cannot be used together as your question case, x:Key="BaseElementStyle" TargetType="{x:Type FrameworkElement}".
using x:Key
<Style x:Key="BaseElementStyle">
<Setter Property="FrameworkElement.Margin" Value="5" />
<Setter Property="FrameworkElement.VerticalAlignment" Value="Center" />
</Style>
<Style TargetType="{x:Type TextBlock}" BasedOn="{StaticResource BaseElementStyle}" />
<Style TargetType="{x:Type TextBox}" BasedOn="{StaticResource BaseElementStyle}" />
<Style TargetType="{x:Type Label}" BasedOn="{StaticResource BaseElementStyle}" />
<Style TargetType="{x:Type ComboBox}" BasedOn="{StaticResource BaseElementStyle}" />
<Style TargetType="{x:Type DatePicker}" BasedOn="{StaticResource BaseElementStyle}" />
<Style TargetType="{x:Type CheckBox}" BasedOn="{StaticResource BaseElementStyle}" />
using x:Type
<Style TargetType="{x:Type FrameworkElement}">
<Setter Property="Margin" Value="5" />
<Setter Property="VerticalAlignment" Value="Center" />
</Style>
<Style TargetType="{x:Type TextBlock}" BasedOn="{StaticResource {x:Type FrameworkElement}}" />
<Style TargetType="{x:Type TextBox}" BasedOn="{StaticResource {x:Type FrameworkElement}}" />
<Style TargetType="{x:Type Label}" BasedOn="{StaticResource {x:Type FrameworkElement}}" />
<Style TargetType="{x:Type ComboBox}" BasedOn="{StaticResource {x:Type FrameworkElement}}" />
<Style TargetType="{x:Type DatePicker}" BasedOn="{StaticResource {x:Type FrameworkElement}}" />
<Style TargetType="{x:Type CheckBox}" BasedOn="{StaticResource {x:Type FrameworkElement}}" />
Also keep in mind that WPF considers a ControlTemplate to be an inflation boundary and does NOT apply default styles inside of templates. The exception to the rule: anything that inherits from Control WILL BE inflated with the default style. Since TextBlock inherits from FrameworkElement and not from Control, if you use of it inside of a ControlTemplate you will also have to apply it's style manually. This is true for both TextBlocks that are added by hand, or by TextBlocks added by WPF for string Content. A quick example:
<Window x:Class="ImplicitStyles.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<StackPanel>
<StackPanel.Resources>
<Style x:Key="BaseElementStyle">
<Setter Property="FrameworkElement.Tag" Value="Hello World" />
</Style>
<Style TargetType="{x:Type Button}" BasedOn="{StaticResource BaseElementStyle}" />
<Style TargetType="{x:Type TextBlock}" BasedOn="{StaticResource BaseElementStyle}" />
<!-- Default style for TextBlock will not be applied, Tag will be null -->
<ControlTemplate x:Key="MyContentControlTemplateOne" TargetType="{x:Type ContentControl}">
<Border BorderBrush="Red" BorderThickness="2">
<TextBlock Text="{Binding RelativeSource={RelativeSource Self}, Path=Tag}" />
</Border>
</ControlTemplate>
<!-- Default style for Button will be applied, Tag will be Hello World -->
<ControlTemplate x:Key="MyContentControlTemplateTwo" TargetType="{x:Type ContentControl}">
<Border BorderBrush="Red" BorderThickness="2">
<Button Content="{Binding RelativeSource={RelativeSource Self}, Path=Tag}" />
</Border>
</ControlTemplate>
</StackPanel.Resources>
<ContentControl Template="{StaticResource MyContentControlTemplateOne}" />
<ContentControl Template="{StaticResource MyContentControlTemplateTwo}" />
</StackPanel>
</Window>
For more information, see this blog post:
http://blogs.msdn.com/b/wpfsdk/archive/2009/08/27/implicit-styles-templates-controls-and-frameworkelements.aspx

How to apply style in WPF Controls?

I am beginner on WPF and need your help.
Problem:
I have 4 buttons on the form and need to apply 2 different style on pair of 2 buttons.
Is there any way we can achive this ?
please provide me sample if possible...
Thanks in advance...
You can define named styles and then assign them explicitly to any controls as you wish.
Here is a primer for styling buttons: Getting Started with WPF : Button Control Part 2 – Basic Styling
And here is an example:
<Window x:Class="WpfButtonStyling.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="250" Width="400">
<Window.Resources>
<Style x:Key="ButtonStyle1"
TargetType="{x:Type Button}">
<Setter Property="Foreground"
Value="Red" />
<Setter Property="Margin"
Value="10" />
</Style>
<Style x:Key="ButtonStyle2"
TargetType="{x:Type Button}">
<Setter Property="Foreground"
Value="Blue" />
<Setter Property="Margin"
Value="10" />
</Style>
</Window.Resources>
<Grid>
<StackPanel>
<Button x:Name="FirstButton"
Content="First!"
Style="{StaticResource ButtonStyle1}"/>
<Button x:Name="SecondButton"
Content="Second"
Style="{StaticResource ButtonStyle2}" />
</StackPanel>
</Grid>
</Window>
If someone want to write Style directly in Button, write like below:
<Button>
<Button.Style>
<Style TargetType="{x:Type Button}">
<Setter Property="FontFamily" Value="TimesNewRoman" />
<Setter Property="FontSize" Value="50"/>
<Setter Property="Background" Value="Green"/>
</Style>
</Button.Style>
</Button>
Use this Code For different styles for different buttons or any other
<Window x:Class="WpfApplication1.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"
HorizontalAlignment="Left"
VerticalAlignment="Top">
<Window.Resources>
**<Style x:Key="a" TargetType="{x:Type TextBlock}">
<Setter Property="FontFamily" Value="Verdana" />
<Setter Property="FontSize" Value="50"/>
<Setter Property="Background" Value="Indigo"/>
</Style>
<Style x:Key="b" TargetType="{x:Type TextBlock}">
<Setter Property="FontFamily" Value="Arial"/>
<Setter Property="FontSize" Value="16"/>
</Style>
<Style x:Key="c" TargetType="{x:Type Button}">
<Setter Property="FontFamily" Value="TimesNewRoman" />
<Setter Property="FontSize" Value="50"/>
<Setter Property="Background" Value="Green"/>
</Style>
</Window.Resources>
<Grid>
<TextBlock Margin="26,41,39,0" Style="{StaticResource a}" Height="100" VerticalAlignment="Top">TextBlock with Style1</TextBlock>
<TextBlock Margin="26,77,39,0" Height="32" VerticalAlignment="Top">TextBlock with no Style</TextBlock>
<TextBlock Margin="26,105,67,96" Style="{StaticResource b}">TextBlock with Style2</TextBlock>
<StackPanel Orientation="Horizontal" VerticalAlignment="Top" Margin="26,170,-26,0">
<Button Style="{StaticResource c}">
<Bold >Styles</Bold></Button>
<Button Style="{StaticResource c}">are</Button>
<Button Style="{StaticResource c}">cool</Button>
</StackPanel>
</Grid>
here i declaring the style for both textBlock and button.Use this one..

WPF UserControl Style

I want to set the background property of all the usercontrols of my project.
I tried with
<style TargetType={x:Type UserControl}>
<setter property="Background" Value="Red" />
</style>
It compiles but didn't work.
¿Any Idea?
Thanks!
You can only set a a style to a specific class, so this will work (create a UserControl object, not very useful):
<Window.Resources>
<Style TargetType="{x:Type UserControl}">
<Setter Property="Background" Value="Red" />
</Style>
</Window.Resources>
<Grid>
<UserControl Name="control" Content="content"></UserControl>
</Grid>
But this doesn't (Create a class derived from UserControl):
<Window.Resources>
<Style TargetType="{x:Type UserControl}">
<Setter Property="Background" Value="Red" />
</Style>
</Window.Resources>
<Grid>
<l:MyUserControl Name="control" Content="content"></l:MyUserControl>
</Grid>
What you can do is either explicitly set the style using the Style property:
<Window.Resources>
<Style TargetType="{x:Type UserControl}" x:Key="UCStyle">
<Setter Property="Background" Value="Red" />
</Style>
</Window.Resources>
<Grid>
<l:MyUserControl Name="control" Content="content" Style="{StaticResource UCStyle}"></l:MyUserControl>
</Grid>
or create a style for each derived class, you can use BasedOn to avoid duplicating the style content:
<Window.Resources>
<Style TargetType="{x:Type UserControl}" x:Key="UCStyle">
<Setter Property="Background" Value="Red" />
</Style>
<Style TargetType="{x:Type l:MyUserControl}" BasedOn="{StaticResource UCStyle}" />
</Window.Resources>
<Grid>
<l:MyUserControl Name="control" Content="content"></l:MyUserControl>
</Grid>
I think you're missing some double quotes:
Try this:
<Window.Resources>
<Style TargetType="{x:Type UserControl}">
<Setter Property="Background" Value="Red" />
</Style>
</Window.Resources>
<Grid>
<UserControl Name="control" Content="content"></UserControl>
</Grid>

Resources