【发布时间】：2021-07-20 14:00:53
【问题描述】：
所以我有一个 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”属性，但它会不允许我同时更改图像和文本。
【问题讨论】：
-
您应该考虑使用路径而不是位图来使您的图标美观且有序
-
您将如何更改图像的颜色？您需要某种路径或形状，而不是图像。
-
我会替换图片源，我有两张图片；一灰一白。我不知道如何使用路径！
-
您可以使用免费工具 inkscapt 将 dxf/vector 文件导出为 XAML，但通常您自己做会得到更好的代码
-
我可以从 Adobe XD 中做到这一点吗？