Question

I’ve just started with WPF (I’m sorry if the question is too obvious), and I managed to put together this mouseover style. The background color animates to a darker color. I now want to also animate the text to white, so it’s easier to read.

This is how I tried to add it, but it gives me the error “Cannot resolve all property references in the property path ‘TextBlock.Foreground’. Verify that applicable objects support the properties” when I mouseover it.

<Border Background="#e6ebf3" CornerRadius="0,10,0,10" >
    <Border.Style>
        <Style TargetType="Border">
            <Setter Property="Background" Value="#e6ebf3" />
            <Setter Property="TextBlock.Foreground" Value="Black"/>
            <Style.Triggers>
                <EventTrigger RoutedEvent="UIElement.MouseEnter">
                    <BeginStoryboard>
                        <Storyboard>
                            <ColorAnimation Duration="0:0:0.1" Storyboard.TargetProperty="Background.Color" To="#6d809b" />
                            <ColorAnimation Duration="0:0:0.1" Storyboard.TargetProperty="TextBlock.Foreground" To="white" />
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
                <EventTrigger RoutedEvent="UIElement.MouseLeave">
                     <BeginStoryboard>
                         <Storyboard>
                             <ColorAnimation Duration="0:0:0.1" Storyboard.TargetProperty="Background.Color" To="#e6ebf3" />
                            <ColorAnimation Duration="0:0:0.1" Storyboard.TargetProperty="TextBlock.Foreground" To="Black" />
                         </Storyboard>
                     </BeginStoryboard>
                </EventTrigger>
            </Style.Triggers>
         </Style>
     </Border.Style>........

Answer 1

I found an alternative way without using storyboard or animations, so I’ll post it just in case. Still wondering about the original one, though.

<Border CornerRadius="0,10,0,10" >
<Border.Style>
     <Style TargetType="Border">
          <Setter Property="Background" Value="#e6ebf3" />
          <Setter Property="TextBlock.Foreground" Value="Black"/>

          <Style.Triggers>
               <Trigger Property ="IsMouseOver" Value="True">
                    <Setter Property= "Background" Value="#6d809b"/>
                    <Setter Property= "TextBlock.Foreground" Value="White"/>
               </Trigger>
          </Style.Triggers>
     </Style>
 </Border.Style>
 ...