Intention
Like in HTML/CSS there are different source code locations where it is possible to apply appearance styles to WPF controls. In this article i want to make a really short summary of those points.
Approach
The following examples are showing the declaration places for styles in the order from local control styles to global application styles
Location examples
App.xaml (global application wide styles)
<Application x:Class="WPFTutorial.App"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
StartupUri="MainWindow.xaml">
<Application.Resources>
<Style TargetType="TextBlock">
<Setter Property="Foreground" Value="#ff0000" />
<Setter Property="FontSize" Value="24" />
</Style>
</Application.Resources>
</Application>
MainWindow.xaml (local hierarchical inheritance from the WPF DOM)
<Window x:Class="WPFTutorial.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="WPF Layoutmanager" Height="322" Width="528">
<Window.Resources>
<Style TargetType="TextBlock">
<!-- This sets all TextBlock FontSize Styles within the Grid -->
<Setter Property="FontSize" Value="15" />
<Setter Property="Foreground" Value="red" />
</Style>
<Style TargetType="TabControl">
<Setter Property="VerticalContentAlignment" Value="Stretch"/>
<Setter Property="VerticalAlignment" Value="Stretch"/>
</Style>
</Window.Resources>
<DockPanel>
<TextBlock DockPanel.Dock="Top" VerticalAlignment="Center" Text="Ein Dockpanel.Dock=Top ist das hier und TabControl als LastChild gestretcht" />
<TabControl>
<TabItem Header="Grid">
<Grid>
<Grid.Resources>
<Style TargetType="TextBlock">
<!-- This sets all TextBlock FontSize Styles within the Grid -->
<Setter Property="FontSize" Value="15" />
</Style>
</Grid.Resources>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="1*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="1*" />
<RowDefinition Height="1*" />
<RowDefinition Height="1*" />
</Grid.RowDefinitions>
<Button Width="140" Height="50" Click="Button_Click">
<StackPanel Orientation="Horizontal">
<Image Margin="10" Source="Images/haken.png" Stretch="UniformToFill"/>
<TextBlock VerticalAlignment="Center" Text="Play Sound" />
</StackPanel>
</Button>
<Button Grid.Column="1" Grid.Row="2" Width="140" Height="50" Click="Button_Click">
<StackPanel Orientation="Horizontal">
<Image Margin="10" Source="Images/haken.png" Stretch="UniformToFill"/>
<TextBlock VerticalAlignment="Center" Text="Play Sound" />
</StackPanel>
</Button>
<Button Grid.Column="2" Grid.Row="1" Width="140" Height="50" Click="Button_Click">
<StackPanel Orientation="Horizontal">
<Image Margin="10" Source="Images/haken.png" Stretch="UniformToFill"/>
<TextBlock VerticalAlignment="Center" Text="Play Sound" >
<TextBlock.Style>
<!-- Dieser Style gilt nur für den Textblock local und überschreibt den GRID Style -->
<Style>
<Setter Property="TextBlock.FontSize" Value="10" />
<Setter Property="TextBlock.FontWeight" Value="Bold" />
<Setter Property="TextBlock.Foreground" Value="#ff00ff" />
</Style>
</TextBlock.Style>
</TextBlock>
</StackPanel>
</Button>
</Grid>
</TabItem>
<TabItem Header="StackPanel">
<StackPanel Orientation="Vertical">
<TextBlock Text="Dummfug ersetzt Irrsinn"/>
<TextBlock Text="Irrsinn ersetzt Dummfug" />
<TextBlock Text="Das letzte Child ist im Gegensatz zum Dockpanel nicht gestretcht" >
<TextBlock.Style>
<Style>
<Setter Property="TextBlock.Foreground" Value="#ff00ff" />
</Style>
</TextBlock.Style>
</TextBlock>
</StackPanel>
</TabItem>
</TabControl>
</DockPanel>
</Window>
