c# - 在鼠标悬停时更改标签前景，但标签在按钮内容内

Question

我是 WPF 和 XAML 的新手，但在我读到这方面的内容时仍然很棘手。我想在鼠标悬停时更改的是 Label 前景色，但标签位于按钮内容的内部。一切都应该通过样式来完成，没有 C#。

<Button Name="Home_Button" Height="50" VerticalAlignment="Top" Click="Home_Click" Background="Gray" Foreground="{x:Null}" BorderBrush="{x:Null}" BorderThickness="0">
   <DockPanel>
       <Image Source="Images/icons/home.png" HorizontalAlignment="Left" Margin="-90,0,0,0" />
       <Label VerticalAlignment="Center" HorizontalAlignment="Right"  Margin="0,0,-90,0" Foreground="LightGray" FontSize="12">Home</Label>
   </DockPanel>
</Button>

我的样式设置如下所示:

<Style TargetType="{x:Type Button}" x:Key="MetroButton">
    <Setter Property="MinHeight" Value="25" />
    <Setter Property="FontWeight" Value="Bold" />
    <Setter Property="FontSize" Value="10" />
    <Setter Property="FontFamily" Value="{DynamicResource DefaultFont}" />
    <Setter Property="Background" Value="{DynamicResource GrayBrush7}" />
    <Setter Property="BorderBrush" Value="{DynamicResource TextBoxBorderBrush}" />
    <Setter Property="Foreground" Value="{DynamicResource TextBrush}" />
    <Setter Property="Padding" Value="5,6" />
    <Setter Property="BorderThickness" Value="1" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Button">
                <Grid>
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="CommonStates">
                            <VisualState x:Name="Normal" />
                            <VisualState x:Name="MouseOver">
                                <Storyboard>
                                    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="MouseOverBorder">
                                        <EasingDoubleKeyFrame KeyTime="0" Value="1" />
                                    </DoubleAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Pressed">
                                <Storyboard>
                                    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="PressedBorder">
                                        <EasingDoubleKeyFrame KeyTime="0" Value="1" />
                                    </DoubleAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Disabled">
                                <Storyboard>
                                    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Opacity" Storyboard.TargetName="DisabledVisualElement">
                                        <SplineDoubleKeyFrame KeyTime="0" Value="0.7" />
                                    </DoubleAnimationUsingKeyFrames>
                                    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="contentPresenter">
                                        <EasingDoubleKeyFrame KeyTime="0" Value="0.3" />
                                    </DoubleAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                        <VisualStateGroup x:Name="FocusStates">
                            <VisualState x:Name="Focused">
                                <Storyboard>
                                    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="ActiveContent">
                                        <EasingDoubleKeyFrame KeyTime="0" Value="1" />
                                    </DoubleAnimationUsingKeyFrames>
                                    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="ActiveContent">
                                        <EasingDoubleKeyFrame KeyTime="0" Value="1" />
                                    </DoubleAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Unfocused" />
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                    <Border x:Name="Background"
                            BorderBrush="{TemplateBinding BorderBrush}"
                            BorderThickness="{TemplateBinding BorderThickness}"
                            Background="{TemplateBinding Background}" />
                    <Rectangle x:Name="DisabledVisualElement"
                               Fill="{DynamicResource ControlsDisabledBrush}"
                               IsHitTestVisible="false"
                               Opacity="0"
                               RadiusY="3"
                               RadiusX="3" />
                    <Border x:Name="MouseOverBorder"
                            Background="{DynamicResource GrayBrush8}"
                            BorderThickness="{TemplateBinding BorderThickness}"
                            Opacity="0" />
                    <Border x:Name="ActiveContent"
                            Background="LightGray"
                            Opacity="0" 
                            />
                    <Border x:Name="PressedBorder"
                            Background="{DynamicResource GrayBrush5}"
                            BorderThickness="{TemplateBinding BorderThickness}"
                            Opacity="0" />
                    <Rectangle x:Name="FocusRectangle"
                               Stroke="{DynamicResource TextBoxMouseOverInnerBorderBrush}"
                               RadiusY="4"
                               RadiusX="4"
                               Margin="-1"
                               Opacity="0" />
                    <Rectangle x:Name="FocusInnerRectangle"
                               StrokeThickness="{TemplateBinding BorderThickness}"
                               Stroke="{DynamicResource TextBoxMouseOverBorderBrush}"
                               RadiusX="3"
                               RadiusY="3"
                               Opacity="0" />
                    <ContentPresenter x:Name="contentPresenter"
                                      RecognizesAccessKey="True"
                                      ContentTemplate="{TemplateBinding ContentTemplate}"
                                      Content="{TemplateBinding Content, Converter={StaticResource ToUpperConverter}}"
                                      HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                      Margin="{TemplateBinding Padding}"
                                      VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

现在我想更改 Button 内 Label 上 MouseOver 上的 Foreground.Color .现在，样式设置仅更改 MouseOver 上 Button 的 Background。

Answer 1

将 Label 的子样式放入按钮样式的 Style.Resources 中，这是一个精简的示例，但应该可以解释我想说的内容。

<Window x:Class="WpfApplication1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">

    <Window.Resources>
        <Style TargetType="Button">
            <Style.Resources>
                <Style TargetType="Label">
                    <Style.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter Property="Foreground" Value="Green"/>
                        </Trigger>
                    </Style.Triggers>
                </Style>
            </Style.Resources>
            <Style.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter Property="Background" Value="Blue"/>
                </Trigger>
            </Style.Triggers>
                <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Button">
                        <Grid Background="Gray">
                            <Grid.RowDefinitions>
                                <RowDefinition />
                                <RowDefinition/>
                            </Grid.RowDefinitions>

                            <!-- This represents your image/-->
                            <Grid Grid.Row="0" Background="{TemplateBinding Background}"/>
                            <Label FontSize="20" Grid.Row="1" Content="{TemplateBinding Content}"/>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Window.Resources>

    <Grid>
        <Button Margin="172,122,131,79" Foreground="Green">
            test
        </Button>
    </Grid>
</Window>

Label 样式不会应用于 Button 之外的任何内容，如果您将鼠标悬停在按钮区域的任何部分上，它的上半部分会变成蓝色，但只有当鼠标在下半部分上方时才会将文本变成绿色(被标签覆盖)