c# - 创建表达式混合式按钮样式

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。