.NET WPF : XAML locations to place and change WPF Styles

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>

Über Björn Karpenstein

Diplom Informatiker, Programmierer, Musikbegeisterter
Dieser Beitrag wurde unter WPF Windows Presentation Foundation abgelegt und mit , , , verschlagwortet. Setze ein Lesezeichen auf den Permalink.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.