How do I set the Foreground property of a possible TextBlock in a ContentPresenter in Silverlight?

Question

I have a custom style for Buttons in my Silverlight project and want to set the Foreground (and other properties) of the text in the button. But my idea is to use a ContentPresenter in the style. This way, I can still put whatever I want in the Button.

But if there's text as Content, I want to be able to set certain properties, like Foreground, FontFamily, FontSize, etc. I also want to change these properties on hover, etc.

This is my style (simplified):

<Style x:Key="ButtonStyle" TargetType="Button">
    <!-- There are other properties here, but I left them out for brevity -->
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Button">
                <Border x:Name="ButtonBorder" 
                        BorderBrush="{TemplateBinding BorderBrush}" 
                        BorderThickness="{TemplateBinding BorderThickness}" 
                        Padding="{TemplateBinding Padding}">
                    <ContentPresenter x:Name="ButtonContent" 
                                      Content="{TemplateBinding Content}" 
                                      HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                      VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
                    </ContentPresenter>
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="CommonStates">
                            <VisualState x:Name="Normal"/>
                            <VisualState x:Name="MouseOver">
                                <Storyboard>
                                    <!-- I would like to change the Foreground here -->
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

All information I find, tell me to add TextBlock.Foreground="..." to the ContentPresenter, i.e.:

                    <ContentPresenter x:Name="ButtonContent" 
                                      Content="{TemplateBinding Content}" 
                                      HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                      VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                      TextBlock.Foreground="{TemplateBinding Foreground}">

                    </ContentPresenter>

However, this doesn't work for me. I get an error saying that the attachable property Foreground isn't available for the type TextBlock. Is this because that solution will only work in WPF, and how can I then set this property in Silverlight?

I know I can just set the Foreground via a <Setter> tag, but then how can I change it on mouse over? I want to set the Foreground of the ContentPresenter, so that in the MouseOver VisualState, I can change it.

Answer 1

(sorry for my bad english)

You can just set the properties on the Button, it should work:

<Button Style="{StaticResource ButtonStyle}" Content="Test" Foreground="Red" FontFamily="Georgia" FontSize="25"/>

Or you can create a style for your text button:

<Style x:Key="ButtonTextStyle" TargetType="Button" BasedOn="{StaticResource ButtonStyle}">
    <Setter Property="Foreground" Value="Red"/>
</Style>

and use it:

<Button Style="{StaticResource ButtonTextStyle}" Content="Test"/>

EDIT:

Try to put a ContentControl in the place of the ContentPresenter - So you will have the ForegroundProperty and on you VisualState, inside your StoryBoard:

<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ButtonContent">
    <DiscreteObjectKeyFrame KeyTime="0" Value="Red"/>
</ObjectAnimationUsingKeyFrames>

Answer 2

Have a look at the base line control template used for Button @ http://msdn.microsoft.com/en-us/library/cc278069(v=vs.95).aspx, I would recommend you take that control and then adjust the mouse over based on your requirements. So for you to on mouse over to red, I would do something like the following

 <VisualState x:Name="MouseOver">
                                    <Storyboard>
                                        <DoubleAnimation Duration="0" Storyboard.TargetName="BackgroundAnimation" Storyboard.TargetProperty="Opacity" To="1"/>
                                        <ColorAnimation Duration="0" Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Color)" To="Red"/>
                                        <ColorAnimation Duration="0" Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[2].(GradientStop.Color)" To="Red"/>
                                        <ColorAnimation Duration="0" Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[3].(GradientStop.Color)" To="Red"/>
                                    </Storyboard>
                                </VisualState>