XAML in WP8.1: Child Element Styles

Question

I have a Grid and TextBlock s. I want to style all TextBlock s within the Grid . So I do this:

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="1*" />
        <ColumnDefinition Width="1*" />
    </Grid.ColumnDefinitions>
    <Grid.Resources>
        <Style TargetType="TextBlock">
            <Setter Property="Margin" Value="0,0,0,15" />
        </Style>
    </Grid.Resources>

    <StackPanel Grid.Column="0">
        <TextBlock Text="myText" Style="{StaticResource TitleTextBlockStyle}" />
        <TextBlock Text="myText" Style="{StaticResource TitleTextBlockStyle}" />
    </StackPanel>

    <StackPanel Grid.Column="1">
        <TextBlock Text="123456" Style="{StaticResource TitleTextBlockStyle}" Foreground="{ThemeResource PhoneAccentBrush}" />
        <TextBlock Text="123456" Style="{StaticResource TitleTextBlockStyle}" Foreground="{ThemeResource PhoneAccentBrush}" />
    </StackPanel>

</Grid>

1) It's not working. TextBlock s don't get any Margins . Why?

2) How can I set the Style and Foreground properties of TextBlock s in the <Grid.Resources> tag?

Answer 1

1) It's not working. TextBlocks don't get any Margins. Why?

It's not working because you're assigning the style " TitleTextBlockStyle " to the TextBlocks . So the implicit style you defined in Grid.Resources doesn't come in to play. Remove the Style="{StaticResource TitleTextBlockStyle}" parts from the TextBlock s, and your margins will appear.

2) How can I set the Style and Foreground properties of TextBlock s in the <Grid.Resources> tag?

The same as you set everything else:

<Setter Property="Foreground" Value="AliceBlue"/>

or if you have a more elaborate brush:

    <Setter Property="Foreground">
       <Setter.Value>
        <!-- Whatever brush you want -->
       <Setter.Value/>
    </Setter>

I assume that with "Set the style property of TextBlocks" , you actually want your new style to inherit from an already defined style. In that case you can base your new style on an already existing style:

        <Style TargetType="TextBlock"
               BasedOn="{StaticResource StyleToInheritFrom}">

or, in your case, presumably:

    <Style TargetType="TextBlock" BasedOn="{StaticResource TitleTextBlockStyle}">
        <Setter Property="Margin" Value="0,0,0,15" />
    </Style>

The full thing would look something like:

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="1*" />
        <ColumnDefinition Width="1*" />
    </Grid.ColumnDefinitions>
    <Grid.Resources>
        <Style TargetType="TextBlock" BasedOn="{StaticResource TitleTextBlockStyle}">
            <Setter Property="Margin" Value="0,0,0,15" />
            <Setter Property="Foreground" Value="{ThemeResource PhoneAccentBrush}"/>
        </Style>
    </Grid.Resources>

    <StackPanel Grid.Column="0">
        <TextBlock Text="myText" />
        <TextBlock Text="myText" />
    </StackPanel>

    <StackPanel Grid.Column="1">
        <TextBlock Text="123456" />
        <TextBlock Text="123456" />
    </StackPanel>

</Grid

Answer 2

What sort of margins are you looking for? If you are looking for left right margins, its due to your margin declaration. Declare like this:

<object Margin="left,top,right,bottom"/>
- or -
<object Margin="left,top"/>
- or -
<object Margin="thicknessReference"/>

Right now, you're just adding a bottom margin. You could also just add

Margin="15"

which will be interpreted as a thickness reference and set all values to 15