Question

因此，我有一个WPF按钮，该按钮下有一个图像（图标）和一个TextBlock。当用户将鼠标悬停在按钮上时，我希望图标和文本更改颜色，但是看起来那样简单，在弄清所有内容之前，我总是被卡住了一步！

下面是按钮的XAML示例以及自定义模板的相关部分...

<Button HorizontalAlignment="Left" Height="87" Margin="141,455,0,0" VerticalAlignment="Top" Width="87" Style="{DynamicResource MenuButton}" Background="{x:Null}" BorderBrush="{x:Null}" Cursor="Hand">
    <StackPanel VerticalAlignment="Center" HorizontalAlignment="Center">
        <Image Source="Resources/my_icon_normalState.png" Width="25" Height="25"/>
        <TextBlock TextWrapping="Wrap" Margin="0,10,0,0" FontFamily="Roboto" Foreground="#FFA2A2A2"  HorizontalAlignment="Center" FontSize="10" TextAlignment="Center">
            Button<LineBreak></LineBreak> Text
        </TextBlock>
    </StackPanel>
</Button>

模板：

<ControlTemplate TargetType="{x:Type Button}">
    <Border x:Name="border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" SnapsToDevicePixels="true" CornerRadius="15">
        <ContentPresenter x:Name="contentPresenter" Focusable="False" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
    </Border>
    <ControlTemplate.Triggers>
        <Trigger Property="IsDefaulted" Value="true">
            <Setter Property="BorderBrush" TargetName="border" Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}"/>
        </Trigger>
        <Trigger Property="IsMouseOver" Value="true">
            <Setter Property="Background" TargetName="border" Value="#209452"/>
            <Setter Property="BorderBrush" TargetName="border" Value="{x:Null}"/>
        </Trigger>
        <Trigger Property="IsPressed" Value="true">
            <Setter Property="Background" TargetName="border" Value="#FFECECEC"/>
            <Setter Property="BorderBrush" TargetName="border" Value="{x:Null}"/>
        </Trigger>
        <Trigger Property="IsEnabled" Value="false">
            <Setter Property="Background" TargetName="border" Value="{StaticResource Button.Disabled.Background}"/>
            <Setter Property="BorderBrush" TargetName="border" Value="{StaticResource Button.Disabled.Border}"/>
            <Setter Property="TextElement.Foreground" TargetName="contentPresenter" Value="{StaticResource Button.Disabled.Foreground}"/>
        </Trigger>
    </ControlTemplate.Triggers>

我知道我必须在“ IsMouseOver”触发器上放置一些内容，但是我似乎无法弄清楚到底是什么...一些例子使我想到必须更改“ Content”属性，但是它将不允许我同时更改图像和文本。

Answer 1

路径和MouseOverTrigger的工作示例，可以将其用作一般指导使其适合您：风格：

    <Style TargetType="{x:Type Button}" x:Key="ButtonWithIcon">
    <Setter Property="Background" Value="Lime"/>
    <Setter Property="Foreground" Value="HotPink"/>
    <Setter Property="BorderThickness" Value="1"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Button}">
                <Border BorderBrush="{TemplateBinding BorderBrush}" Background="{TemplateBinding Background}">                        
                    <StackPanel Orientation="Horizontal">                        
                        <ContentPresenter TextBlock.Foreground="{TemplateBinding Foreground}"/>
                        <Viewbox Height="25" Width="25">                            
                            <Path Fill="{TemplateBinding Foreground}" Data="M 27 0 C 23.699219 0 21 2.699219 21 6 C 21 9.300781 23.699219 12 27 12 C 30.300781 12 33 9.300781 33 6 C 33 2.699219 30.300781 0 27 0 Z M 27 2 C 29.222656 2 31 3.777344 31 6 C 31 8.222656 29.222656 10 27 10 C 24.777344 10 23 8.222656 23 6 C 23 3.777344 24.777344 2 27 2 Z M 21.90625 12.90625 C 20.007813 12.90625 18.339844 14.074219 17.59375 15.8125 C 17.582031 15.832031 17.570313 15.855469 17.5625 15.875 L 12.5 29.90625 L 12.46875 29.90625 C 12.460938 29.925781 12.476563 29.949219 12.46875 29.96875 C 10.75 34.09375 13.671875 39 18.1875 39 C 21.191406 39 24.601563 38.355469 26.21875 38.03125 L 25.21875 45.46875 C 24.953125 47.597656 26.421875 49.734375 28.6875 50 C 28.730469 50.003906 28.769531 50.003906 28.8125 50 L 29.1875 50 C 31.175781 50 32.921875 48.53125 33.1875 46.53125 L 35 33.53125 C 35 33.519531 35 33.511719 35 33.5 C 35.128906 32.324219 34.742188 31.085938 33.84375 30.15625 L 36.65625 29.90625 C 36.667969 29.90625 36.675781 29.90625 36.6875 29.90625 C 38.582031 29.753906 40.007813 28.066406 39.90625 26.1875 C 39.90625 26.175781 39.90625 26.167969 39.90625 26.15625 C 39.90625 26.144531 39.90625 26.136719 39.90625 26.125 C 39.867188 24.191406 38.058594 22.859375 36.21875 23 L 31.03125 23.4375 L 29.5625 18.03125 C 29.164063 16.683594 28.859375 15.503906 28.1875 14.53125 C 27.515625 13.558594 26.34375 12.90625 24.90625 12.90625 Z M 21.90625 14.90625 L 24.90625 14.90625 C 25.871094 14.90625 26.152344 15.105469 26.53125 15.65625 C 26.90625 16.199219 27.230469 17.238281 27.625 18.5625 L 29.34375 24.75 C 29.460938 25.214844 29.894531 25.53125 30.375 25.5 L 36.375 25 C 37.117188 24.941406 37.90625 25.554688 37.90625 26.1875 C 37.90625 26.21875 37.90625 26.25 37.90625 26.28125 C 37.96875 27.167969 37.398438 27.84375 36.53125 27.90625 C 36.519531 27.90625 36.511719 27.90625 36.5 27.90625 L 28.59375 28.59375 L 28.40625 28.59375 C 27.730469 28.59375 27.148438 28.191406 26.96875 27.53125 L 26.5625 26.125 C 26.445313 25.703125 26.066406 25.410156 25.632813 25.394531 C 25.195313 25.382813 24.800781 25.652344 24.65625 26.0625 L 22.96875 30.65625 C 22.839844 30.988281 22.902344 31.367188 23.128906 31.644531 C 23.351563 31.921875 23.710938 32.058594 24.0625 32 L 30.65625 31 C 30.667969 30.988281 30.675781 30.980469 30.6875 30.96875 C 31.386719 30.828125 31.910156 31.003906 32.40625 31.5 C 32.863281 31.957031 33.058594 32.65625 33 33.25 C 33 33.257813 33 33.273438 33 33.28125 L 31.21875 46.25 C 31.21875 46.261719 31.21875 46.269531 31.21875 46.28125 C 31.085938 47.28125 30.199219 48 29.1875 48 L 28.90625 48 C 27.78125 47.867188 27.070313 46.808594 27.1875 45.75 L 27.1875 45.71875 L 28.40625 36.9375 C 28.457031 36.609375 28.339844 36.277344 28.097656 36.050781 C 27.851563 35.824219 27.511719 35.734375 27.1875 35.8125 C 27.1875 35.8125 21.566406 37 18.1875 37 C 15.125 37 13.085938 33.550781 14.3125 30.6875 C 14.324219 30.667969 14.335938 30.644531 14.34375 30.625 L 19.40625 16.59375 C 19.414063 16.578125 19.429688 16.578125 19.4375 16.5625 L 19.4375 16.53125 C 19.902344 15.511719 20.828125 14.90625 21.90625 14.90625 Z M 25.6875 29.03125 C 25.832031 29.234375 25.941406 29.460938 26.125 29.625 L 25.4375 29.75 Z M 16.09375 40.6875 C 16.03125 40.703125 15.964844 40.722656 15.90625 40.75 C 15.042969 41.027344 14.371094 41.511719 13.96875 42.0625 C 13.566406 42.613281 13.410156 43.175781 13.3125 43.625 C 13.226563 44.027344 13.191406 44.296875 13.15625 44.40625 C 13.125 44.414063 13.09375 44.425781 13.0625 44.4375 C 13.050781 44.4375 13.042969 44.4375 13.03125 44.4375 C 12.835938 44.488281 12.664063 44.597656 12.53125 44.75 C 11.257813 45.308594 10.449219 46.289063 10.1875 47.1875 C 9.882813 48.226563 10 49.125 10 49.125 C 10.0625 49.628906 10.492188 50.003906 11 50 L 20.5 50 C 20.804688 50 21.089844 49.863281 21.28125 49.625 C 22.226563 48.410156 22.207031 46.847656 21.59375 45.6875 C 20.992188 44.546875 19.855469 43.6875 18.46875 43.53125 L 18.46875 43.5 C 18.089844 43.4375 18.007813 43.378906 17.8125 43.09375 C 17.617188 42.808594 17.398438 42.234375 17.15625 41.40625 C 17.03125 40.976563 16.636719 40.683594 16.1875 40.6875 C 16.15625 40.6875 16.125 40.6875 16.09375 40.6875 Z M 15.71875 43.125 C 15.859375 43.484375 15.945313 43.910156 16.15625 44.21875 C 16.585938 44.855469 17.304688 45.363281 18.125 45.5 C 18.15625 45.5 18.1875 45.5 18.21875 45.5 C 18.898438 45.566406 19.53125 46.035156 19.84375 46.625 C 20.085938 47.085938 20.078125 47.539063 19.875 48 L 12.0625 48 C 12.082031 47.878906 12.054688 47.878906 12.09375 47.75 C 12.230469 47.28125 12.539063 46.882813 13.125 46.59375 C 13.574219 46.941406 14.039063 47.167969 14.46875 47.28125 C 15.148438 47.460938 15.75 47.5 15.75 47.5 C 16.300781 47.527344 16.769531 47.097656 16.796875 46.546875 C 16.824219 45.996094 16.394531 45.527344 15.84375 45.5 C 15.84375 45.5 15.445313 45.460938 15 45.34375 C 14.964844 45.335938 14.96875 45.324219 14.9375 45.3125 C 15.164063 44.816406 15.203125 44.414063 15.28125 44.0625 C 15.359375 43.710938 15.441406 43.429688 15.59375 43.21875 C 15.617188 43.1875 15.691406 43.15625 15.71875 43.125 Z "/>
                        </Viewbox>
                    </StackPanel>
                </Border>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsMouseOver" Value="True">
                        <Setter Property="Foreground" Value="SkyBlue" />
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

用法：

    <Button Style="{StaticResource ButtonWithIcon}" Content=" busy"/>

编辑：

如评论中所承诺：风格：

<Style TargetType="{x:Type Button}" x:Key="ButtonWithIcon">
    <Setter Property="Background" Value="Lime"/>
    <Setter Property="Foreground" Value="HotPink"/>
    <Setter Property="BorderThickness" Value="1"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Button}">
                <Border Background="{TemplateBinding Background}">
                    <ContentPresenter/>                        
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
    <Style.Triggers>
        <Trigger Property="IsMouseOver" Value="True">
            <Setter Property="Foreground" Value="SkyBlue"/>
        </Trigger>
    </Style.Triggers>
</Style>

用法：

  <Button Style="{StaticResource ButtonWithIcon}" Name="btnPoo">
        <StackPanel Orientation="Horizontal">                    
            <TextBlock>Busy</TextBlock>
            <Viewbox Height="25" Width="25">
                <Path Fill="{Binding ElementName=btnPoo, Path=Foreground}" Data="M 27 0 C 23.699219 0 21 2.699219 21 6 C 21 9.300781 23.699219 12 27 12 C 30.300781 12 33 9.300781 33 6 C 33 2.699219 30.300781 0 27 0 Z M 27 2 C 29.222656 2 31 3.777344 31 6 C 31 8.222656 29.222656 10 27 10 C 24.777344 10 23 8.222656 23 6 C 23 3.777344 24.777344 2 27 2 Z M 21.90625 12.90625 C 20.007813 12.90625 18.339844 14.074219 17.59375 15.8125 C 17.582031 15.832031 17.570313 15.855469 17.5625 15.875 L 12.5 29.90625 L 12.46875 29.90625 C 12.460938 29.925781 12.476563 29.949219 12.46875 29.96875 C 10.75 34.09375 13.671875 39 18.1875 39 C 21.191406 39 24.601563 38.355469 26.21875 38.03125 L 25.21875 45.46875 C 24.953125 47.597656 26.421875 49.734375 28.6875 50 C 28.730469 50.003906 28.769531 50.003906 28.8125 50 L 29.1875 50 C 31.175781 50 32.921875 48.53125 33.1875 46.53125 L 35 33.53125 C 35 33.519531 35 33.511719 35 33.5 C 35.128906 32.324219 34.742188 31.085938 33.84375 30.15625 L 36.65625 29.90625 C 36.667969 29.90625 36.675781 29.90625 36.6875 29.90625 C 38.582031 29.753906 40.007813 28.066406 39.90625 26.1875 C 39.90625 26.175781 39.90625 26.167969 39.90625 26.15625 C 39.90625 26.144531 39.90625 26.136719 39.90625 26.125 C 39.867188 24.191406 38.058594 22.859375 36.21875 23 L 31.03125 23.4375 L 29.5625 18.03125 C 29.164063 16.683594 28.859375 15.503906 28.1875 14.53125 C 27.515625 13.558594 26.34375 12.90625 24.90625 12.90625 Z M 21.90625 14.90625 L 24.90625 14.90625 C 25.871094 14.90625 26.152344 15.105469 26.53125 15.65625 C 26.90625 16.199219 27.230469 17.238281 27.625 18.5625 L 29.34375 24.75 C 29.460938 25.214844 29.894531 25.53125 30.375 25.5 L 36.375 25 C 37.117188 24.941406 37.90625 25.554688 37.90625 26.1875 C 37.90625 26.21875 37.90625 26.25 37.90625 26.28125 C 37.96875 27.167969 37.398438 27.84375 36.53125 27.90625 C 36.519531 27.90625 36.511719 27.90625 36.5 27.90625 L 28.59375 28.59375 L 28.40625 28.59375 C 27.730469 28.59375 27.148438 28.191406 26.96875 27.53125 L 26.5625 26.125 C 26.445313 25.703125 26.066406 25.410156 25.632813 25.394531 C 25.195313 25.382813 24.800781 25.652344 24.65625 26.0625 L 22.96875 30.65625 C 22.839844 30.988281 22.902344 31.367188 23.128906 31.644531 C 23.351563 31.921875 23.710938 32.058594 24.0625 32 L 30.65625 31 C 30.667969 30.988281 30.675781 30.980469 30.6875 30.96875 C 31.386719 30.828125 31.910156 31.003906 32.40625 31.5 C 32.863281 31.957031 33.058594 32.65625 33 33.25 C 33 33.257813 33 33.273438 33 33.28125 L 31.21875 46.25 C 31.21875 46.261719 31.21875 46.269531 31.21875 46.28125 C 31.085938 47.28125 30.199219 48 29.1875 48 L 28.90625 48 C 27.78125 47.867188 27.070313 46.808594 27.1875 45.75 L 27.1875 45.71875 L 28.40625 36.9375 C 28.457031 36.609375 28.339844 36.277344 28.097656 36.050781 C 27.851563 35.824219 27.511719 35.734375 27.1875 35.8125 C 27.1875 35.8125 21.566406 37 18.1875 37 C 15.125 37 13.085938 33.550781 14.3125 30.6875 C 14.324219 30.667969 14.335938 30.644531 14.34375 30.625 L 19.40625 16.59375 C 19.414063 16.578125 19.429688 16.578125 19.4375 16.5625 L 19.4375 16.53125 C 19.902344 15.511719 20.828125 14.90625 21.90625 14.90625 Z M 25.6875 29.03125 C 25.832031 29.234375 25.941406 29.460938 26.125 29.625 L 25.4375 29.75 Z M 16.09375 40.6875 C 16.03125 40.703125 15.964844 40.722656 15.90625 40.75 C 15.042969 41.027344 14.371094 41.511719 13.96875 42.0625 C 13.566406 42.613281 13.410156 43.175781 13.3125 43.625 C 13.226563 44.027344 13.191406 44.296875 13.15625 44.40625 C 13.125 44.414063 13.09375 44.425781 13.0625 44.4375 C 13.050781 44.4375 13.042969 44.4375 13.03125 44.4375 C 12.835938 44.488281 12.664063 44.597656 12.53125 44.75 C 11.257813 45.308594 10.449219 46.289063 10.1875 47.1875 C 9.882813 48.226563 10 49.125 10 49.125 C 10.0625 49.628906 10.492188 50.003906 11 50 L 20.5 50 C 20.804688 50 21.089844 49.863281 21.28125 49.625 C 22.226563 48.410156 22.207031 46.847656 21.59375 45.6875 C 20.992188 44.546875 19.855469 43.6875 18.46875 43.53125 L 18.46875 43.5 C 18.089844 43.4375 18.007813 43.378906 17.8125 43.09375 C 17.617188 42.808594 17.398438 42.234375 17.15625 41.40625 C 17.03125 40.976563 16.636719 40.683594 16.1875 40.6875 C 16.15625 40.6875 16.125 40.6875 16.09375 40.6875 Z M 15.71875 43.125 C 15.859375 43.484375 15.945313 43.910156 16.15625 44.21875 C 16.585938 44.855469 17.304688 45.363281 18.125 45.5 C 18.15625 45.5 18.1875 45.5 18.21875 45.5 C 18.898438 45.566406 19.53125 46.035156 19.84375 46.625 C 20.085938 47.085938 20.078125 47.539063 19.875 48 L 12.0625 48 C 12.082031 47.878906 12.054688 47.878906 12.09375 47.75 C 12.230469 47.28125 12.539063 46.882813 13.125 46.59375 C 13.574219 46.941406 14.039063 47.167969 14.46875 47.28125 C 15.148438 47.460938 15.75 47.5 15.75 47.5 C 16.300781 47.527344 16.769531 47.097656 16.796875 46.546875 C 16.824219 45.996094 16.394531 45.527344 15.84375 45.5 C 15.84375 45.5 15.445313 45.460938 15 45.34375 C 14.964844 45.335938 14.96875 45.324219 14.9375 45.3125 C 15.164063 44.816406 15.203125 44.414063 15.28125 44.0625 C 15.359375 43.710938 15.441406 43.429688 15.59375 43.21875 C 15.617188 43.1875 15.691406 43.15625 15.71875 43.125 Z "/>
            </Viewbox>
        </StackPanel>
    </Button>

您可以像这样使用它，但是基于按钮创建自定义控件确实更有意义。这样您就可以设置PathData属性并相应地显示它

Answer 2

您将无法更改图标“ Resources / my_icon_normalState.png”的颜色，但可以将加载的图标更改为IsMousedOver时的其他图标。看起来像

<Trigger Property="IsMouseOver" Value="True">
      <Setter Property="Background" Value="Red"/>
</Trigger>

但是，您可以加载新图像，而不是更改为背景（除非您要这样做）。

WPF：在按钮的鼠标悬停状态下更改文本和图像的颜色

2 个答案: