Question

I have a Grid control where each row contains a stackpanel, and each stackpanel contains one or more textblocks (while not the core of the question, if there’s a better way to achieve a custom grid of textblocks – i.e. rows of “header label: content”, I’d appreciate some tips)

Anyway… I want to have a header row, where the stackpanel has a dark background and the textblock has white, bold text, and then each other row to have black text. Note that only the first row is defined with Style HeaderRow. I’ve used the “BasedOn” to define that only textblocks within a header row should be bold/white, however I’m finding that this impacts all textblocks in other rows too (that don’t have another style defined).

I’d effectively like to be able to do

Sample XAML

Styles:

 <Style x:Key="TitleLabel" TargetType="TextBlock">
                    <Setter Property="FontFamily" Value="Verdana"/>
                    <Setter Property="Margin" Value="5 0 0 0"/>
                    <Setter Property="Width" Value="105"/>
                    <Setter Property="FontWeight" Value="Bold"/>
                </Style>
                <Style x:Key="AlternatingRow" TargetType="StackPanel">
                    <Setter Property="Background" Value="#f0f1ff"/>
                </Style>
                <Style x:Key="HeaderRow" TargetType="StackPanel">
                    <Setter Property="Background" Value="#666666"/>
                </Style>
                <Style TargetType="TextBlock" BasedOn="StaticResource HeaderRow" >
                    <Setter Property="Foreground" Value="White"/>
                    <Setter Property="FontWeight" Value="Bold"/>
                </Style>

XAML

<Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="auto"/>
                        <RowDefinition Height="auto"/>
                        <RowDefinition Height="auto"/>
                        <RowDefinition Height="auto"/>
                        <RowDefinition Height="auto"/>
                        <RowDefinition Height="auto"/>
                    </Grid.RowDefinitions>
                    <StackPanel Orientation="Horizontal" Grid.Row="0" Style="{StaticResource HeaderRow}">
                        <TextBlock Text="Header Row" />
                    </StackPanel>
                    <StackPanel Orientation="Horizontal" Grid.Row="1" Style="{StaticResource AlternatingRow}">
                        <TextBlock Text="HeaderLabel:" Style="{StaticResource TitleLabel}" />
                        <TextBlock Text="Content" />
                    </StackPanel>
                    <StackPanel Orientation="Horizontal" Grid.Row="2">
                        <TextBlock Text="HeaderLabel"  Style="{StaticResource TitleLabel}" />
                        <TextBlock Text="Content" />
                    </StackPanel>
                    <StackPanel Orientation="Horizontal" Grid.Row="3" Style="{StaticResource AlternatingRow}">
                        <TextBlock Text="HeaderLabel"  Style="{StaticResource TitleLabel}" />
                        <TextBlock Text="Content" />
                    </StackPanel>
                    <StackPanel Orientation="Horizontal" Grid.Row="4">
                        <TextBlock Text="HeaderLabel"  Style="{StaticResource TitleLabel}" />
                        <TextBlock Text="Content" />
                    </StackPanel>
                </Grid>

Answer 1

You are not using Style BasedOn property correctly. All it does is indicate that one style ‘extends’ another, i.e. it copies all its setter values. (Note, your example will also fail because you are trying to base on style on another where the TargetTypes are not compatible) It does not indicate that a style is applied when one element is nested inside another.

Unfortunately Silverlight does not have the feature you require, you cannot style based on element location within the visual tree. You are going to have to style each TextBlock explicitly.

Although, I did create a mechanism for using CSS for styling a while back:

http://www.scottlogic.co.uk/blog/colin/2009/03/using-css-selectors-for-styling-in-wpf/

This allows you to create selectors based on parent elements.