创建类似表达式混合的按钮样式

Question

我想以这种方式创建一个类似表达式混合按钮的按钮样式：

• 当鼠标悬停在它们上面时，它们的图标是黑白色的 半透明的。
• 当鼠标悬停在它们上方时，它们会变色并变得清晰，没有透明度。

是否可以为XAML图标创建这样的样式而无需在表达式混合中进行编码？

请注意，我不想使用2个图标。

Answer 1

这样的事情可能是一个很好的起点。

你有2张图片（这些图片来自在线资源，你可以用资源替换.png）当鼠标悬停在按钮上时，“iconfocus”将会显示，而当没有鼠标时，“iconNofocus”将会显示

这是一个非常粗略的例子：

 <Style TargetType="{x:Type Button}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Button}">
                        <Border x:Name="PART_border" Background="{TemplateBinding Background}"  BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="5">
                            <Grid>
                                <Border x:Name="Highlight" Opacity="0">
                                    <Border.Background>
                                        <LinearGradientBrush EndPoint="0.5,0.1" StartPoint="0.5,0.8">
                                            <GradientStop Color="#90009FFF" Offset="0"/>
                                            <GradientStop Color="#00FFFFFF" Offset="1"/>
                                        </LinearGradientBrush>
                                    </Border.Background>
                                </Border>
                                <StackPanel Orientation="Horizontal">
                                    <Grid Width="{TemplateBinding ActualHeight}"  Height="{TemplateBinding ActualHeight}">
                                        <Image x:Name="iconFocus" Margin="2" Opacity="0" Source="http://icons.iconarchive.com/icons/deleket/soft-scraps/32/Folder-icon.png"/>
                                        <Image x:Name="iconNofocus" Margin="2" Opacity="0.5" Source="http://icons.iconarchive.com/icons/deleket/soft-scraps/32/Folder-Generic-Green-icon.png"/>
                                    </Grid>
                                    <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" Width="Auto" />
                                </StackPanel>
                            </Grid>
                        </Border>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter TargetName="Highlight" Property="Opacity" Value="1" />
                                <Setter TargetName="iconFocus" Property="Opacity" Value="1" />
                                <Setter TargetName="iconNofocus" Property="Opacity" Value="0" />
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

正常：

鼠标悬停：

Answer 2

使用路径而不是图像时，您可以使用“可视状态”切换，从显示带边框的路径和透明填充到原始路径非常容易。

您可以使用InkScape将自己的图片转换为路径（xaml），在Xamalot等网站上在线搜索已准备好的图片，或使用Syncfusion Metro Studio之类的工具创建xaml you'我喜欢。