Изменить цвет переднего плана и фона при наведении

Question

У меня есть меню, очень похожее на изображение ниже. Элементы меню находятся в левой части панели приборов.

При наведении курсора на элемент я хочу изменить его фон и передний план.

код.

<Border Name="border">

    <Border.Triggers>
        <EventTrigger RoutedEvent="PreviewMouseLeftButtonDown">
            <BeginStoryboard x:Name="MouseDown_BeginStoryboard">
                 <Storyboard>
                      <ColorAnimation Duration="0:0:0" .../><!--Change Background and Foreground  if hover-->
        </EventTrigger>
    </Border.Triggers>
    <Button>
        <Button.Template>
             <ControlTemplate>
                <Grid>
                     <Grid.ColumnDefinitions>
                         <ColumnDefinition />
                         <ColumnDefinition />
                         <ColumnDefinition />
                     </Grid.ColumnDefinitions>
                     <Image Grid.Column="0" Source="SomePlace" />  <!--Change Background and Foreground  if hover--> 
                     <TextBlock Grid.Column="1" Text="Hello" /> <!--Change Background and Foreground  if hover-->
                     <TextBlock Grid.Column="2" Text="World" /> <!--Change Background and Foreground  if hover-->
                </Grid>
             </ControlTemplate>
    </Button>
</Border>

Но я не думаю, что ColorAnimation может это сделать. Может быть ColorAnimationUsingKeyFrames?

Answer 1

это не полный ответ, но, по крайней мере, это поможет вам начать

<Button  Height="50" VerticalAlignment="Top">
            <Button.Template>
                <ControlTemplate>
                    <Border x:Name="border1">
                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition />
                                <ColumnDefinition />
                                <ColumnDefinition />
                            </Grid.ColumnDefinitions>

                            <TextBlock
                                x:Name="txtblock1"
                                Grid.Column="1"
                                Text="Hello" />
                            <TextBlock
                                x:Name="txtblock2"
                                Grid.Column="2"
                                Text="World" />


                        </Grid>
                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="true">
                            <Setter TargetName="border1" Property="Background" Value="Red" />
                            <Setter TargetName="txtblock1" Property="Foreground" Value="Blue" />
                            <Setter TargetName="txtblock2" Property="Foreground" Value="White" />

                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Button.Template>
        </Button>