悬停时更改前景色和背景色

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>