如何将图标放入按钮 (MahApps)

Question

我想将 MahApps 库中的图标放入普通按钮中。我这样试过：

<Button Height="20" Width="25" Background="Transparent" Foreground="White" Content="{StaticResource appbar_close}"/>

结局是这样的：

那么如何将这个图标集成到这个按钮的合适位置呢？

Answer 1

正如您在 github example 中看到的，他们在 Button 中放置了一个 Rectangle，然后使用 OpacityMask 属性.

<ToggleButton Width="50"
          Height="50"
          IsEnabled="False"
          Style="{DynamicResource MetroCircleToggleButtonStyle}">
<Rectangle Width="20"
           Height="20"
           Fill="{Binding Path=Foreground, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type ToggleButton}}}">
    <Rectangle.OpacityMask>
        <VisualBrush Stretch="Fill"
                     Visual="{DynamicResource appbar_city}" />
    </Rectangle.OpacityMask>
</Rectangle>

Source

Answer 2

您可以尝试以下方法...正如@ganchito55 所建议的那样

<Button Width="25" Height="20">
  <Button.Content>
    <Rectangle Width="20" Height="20">
          <Rectangle.Fill>
            <VisualBrush Visual="{StaticResource appbar_close}" Stretch="None" />
          </Rectangle.Fill>
     </Rectangle>
 </Button.Content>
</Button>

Answer 3

您有 2 个选择。

首先您可以使用图标资源（使用 MetroCircleButtonStyle 的示例）

<Button Width="50"
        Height="50"
        Style="{DynamicResource MetroCircleButtonStyle}">
    <Rectangle Width="20"
                Height="20"
                Fill="{Binding Path=Foreground, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Button}}}">
        <Rectangle.OpacityMask>
            <VisualBrush Stretch="Fill" Visual="{DynamicResource appbar_close}" />
        </Rectangle.OpacityMask>
    </Rectangle>
</Button>

然后是新的图标包

<Button Width="50"
        Height="50"
        Style="{DynamicResource MetroCircleButtonStyle}">
    <Controls:PackIconModern Width="20" Height="20" Kind="Close" />
</Button>

希望对您有所帮助。

Answer 4

在我的应用程序中，我之前使用这段代码创建了许多带有图标的按钮：

 <Button Command="{Binding EditDetailCommand}" ToolTip="Edit" Style="{DynamicResource buttonstyle}">
                        <metro:PackIconModern Width="Auto" Height="Auto" Kind="Edit" />
                    </Button>

似乎不能再使用最新的 MahApps 了？

我真的很喜欢简单的语法，因为我认为它足以填满我的 xaml 个文件。

Answer 5

我只想将图标作为可点击的控件，这就是我使用最新 Mahapps 版本的方式：

<Button Width="16"
        Height="16"
        Padding="0"
        HorizontalAlignment="Right"
        VerticalAlignment="Center"
        Click="HelpButton_Click"
        Style="{x:Null}"
        Background="Transparent"
        BorderThickness="0"
        >
    <Button.Content>
        <Icons:PackIconMaterial Kind="Help"
                                VerticalAlignment="Center"
                                HorizontalAlignment="Center" />
    </Button.Content>
</Button>

希望这对某人有所帮助

如何将图标放入按钮 (MahApps)

How to put an icon into a button (MahApps)

wpf

mahapps.metro