Styling multiple types of WPF controls

Question

I have a stack panel with a few (different) items:

<StackPanel ...>
    <TextBlock ... />
    <CheckBox ... />
    <CheckBox ... />
    <Button ... />
</StackPanel>

I would like to apply VerticalAlignment="Center" to all children of the StackPanel without having to add VerticalAlignent="Center" or Style=... to every single child. So, I guess I want to define an implicit style which applies to the TextBlock, the CheckBoxes and the Button.

I tried adding a <Style TargetType="FrameworkElement"> in the stack panel's resources, but (obviously) this doesn't work, since the TargetType creates an implicit x:Key of {x:Type FrameworkElement}, whereas TextBlock only automatically binds to Styles with an x:Key of {x:Type TextBlock}.

So, as far as I can see, the only options I have are: (1) create three Styles for all three types in the stack panel's resources, (2) create one style and manually bind it to all children, (3) manually set the VerticalAlignment option at all children. What I want is: (4) Create one Style and automatically bind it to all children of the stack panel. Is that possible? Or is there some other solution that is less redundant than (1)-(3)?

Scott Scott · Accepted Answer · 2009-11-20T20:07:30

Heinzi,

If I'm understanding your question correctly, it seems like you have a StackPanel that you want to contain a set of children. These children you want to have a style VerticalAlignment="Center" but you don't want to add this property to each child. If this is the case, I have a solution for you:

There is, however, no way to set a base object's properties and have them used in the inherited class. So, a FrameworkElement has a property VerticalAlignment, but you can't set that directly in a style and have it applied automatically. In my proposed solution, you do have to create a style for each object type, but you don't have to create a distinct style for each. In my solution, you can create a "BaseStyle" then base each of your other styles on this one to get the desired result. So you can do this:

<Window x:Class="Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Window1" Height="300" Width="500">
    <Window.Resources>
        <ResourceDictionary>
            <Style x:Key="BaseStyle" TargetType="{x:Type FrameworkElement}">
                <Style.Setters>
                    <Setter Property="VerticalAlignment" Value="Center" />
                </Style.Setters>
            </Style>

            <Style TargetType="{x:Type TextBlock}" BasedOn="{StaticResource BaseStyle}" />
            <Style TargetType="{x:Type CheckBox}" BasedOn="{StaticResource BaseStyle}" />
            <Style TargetType="{x:Type Button}" BasedOn="{StaticResource BaseStyle}" />
        </ResourceDictionary>
    </Window.Resources>
    <Grid>
        <StackPanel Orientation="Horizontal">
            <TextBlock Text="testing textblock" />
            <CheckBox  Content="testing check1 "/>
            <CheckBox Content="testing check2" />
            <Button Content="testing button" />
        </StackPanel>
    </Grid>
</Window>

Also, you can set these at an application level via Application.xaml. This would mean that you only have to create these styles once, and you shouldn't need to implement them across all of your pages/screens.

I hope this helps,

Styling multiple types of WPF controls

1 Answers

Thanks!