wpf MahApps.Metro 图​​标未显示

MahApps.Metro icon not showing

提问by thomasb

I am trying to add a "refresh" button in the window title bar, using MahApps.Metro 0.13.1.0.

我正在尝试使用 MahApps.Metro 0.13.1.0 在窗口标题栏中添加一个“刷新”按钮。

My App.xaml is this :

我的 App.xaml 是这样的：

<Application x:Class="VersionSwitcher.App"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             StartupUri="Views/MainWindow.xaml"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             d1p1:Ignorable="d"
             xmlns:d1p1="http://schemas.openxmlformats.org/markup-compatibility/2006">
    <Application.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Controls.xaml" />
                <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Fonts.xaml" />
                <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Colors.xaml" />
                <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Accents/Blue.xaml" />
                <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Accents/BaseLight.xaml" />
                <ResourceDictionary Source="/Resources/Icons.xaml" />
            </ResourceDictionary.MergedDictionaries>
            <vm:ViewModelLocator x:Key="Locator" d:IsDataSource="True" xmlns:vm="clr-namespace:VersionSwitcher.ViewModel" />
        </ResourceDictionary>
    </Application.Resources>
</Application>

And then in my MainWindow.xaml :

然后在我的 MainWindow.xaml 中：

<Controls:MetroWindow.WindowCommands>
    <Controls:WindowCommands>
        <Button ToolTip="{x:Static p:Resources.Button_Refresh}"
                Style="{DynamicResource MetroCircleButtonStyle}" Width="30" Height="30">
                <Rectangle Fill="Black">
                    <Rectangle.OpacityMask>
                        <VisualBrush Stretch="Fill"
                                     Visual="{DynamicResource appbar_refresh}" />
                    </Rectangle.OpacityMask>
                </Rectangle>
        </Button>
    </Controls:WindowCommands>
</Controls:MetroWindow.WindowCommands>

I get a grey circle inside the title bar, but no icon ! Any icon (from Resources/Icons.xaml) does the same thing.

我在标题栏中看到一个灰色圆圈，但没有图标！任何图标（来自 Resources/Icons.xaml）都做同样的事情。

If the icon is placed in the window contents instead of the title bar, it does the same thing.

如果图标被放置在窗口内容而不是标题栏中，它会做同样的事情。

What have I missed ?

我错过了什么？

Thanks !

谢谢 ！

Update

更新

I have found out that setting a width and a height to the Rectangle shows the icon. What do I have to do to always fill the button ?

我发现为 Rectangle 设置宽度和高度会显示图标。我必须怎么做才能始终填充按钮？

回答by Viv

You do not see it cos the Rectanglehas it's size as 0 for ActualWidthand ActualHeightwhich you can see via Snoop

您看不到它，因为Rectangle它的大小为 0ActualWidth并且ActualHeight您可以通过Snoop看到

If you don't know much about WPF as you mentioned in your comment, get started by getting familiar with Snoop. Great tool that'll save you from lots of head scratching moments :)

如果您对评论中提到的 WPF 不太了解，请先熟悉 Snoop。很棒的工具，可以让您免于许多头疼的时刻:)

So in simple english, we're adding a Rectangleas the Contentof a Button. Now the button has some size dimensions. However the Rectangle does not and thereby ends up with 0. If it was some text it would get an implicit size.

因此，在简单的英语，我们增加一个Rectangle作为Content的Button。现在按钮有一些尺寸尺寸。然而 Rectangle 没有，因此以 0 结束。如果它是一些文本，它将获得隐式大小。

So to sort it, give the Rectangle a suitable Width/Height.

所以要排序，给矩形一个合适的宽度/高度。

If you want the Rectangle to be the size of the Button, you can use a RelativeSource Binding for the Width and Height to get it from the button. However in your case it's a Styled button that already uses a ellipse so it would need some padding.

如果您希望 Rectangle 与 Button 的大小相同，则可以对 Width 和 Height 使用 RelativeSource Binding 以从按钮中获取它。但是，在您的情况下，它是一个已使用椭圆的样式按钮，因此需要一些填充。

MahApps.Metro from github:

来自 github 的 MahApps.Metro：

ButtonsExample.xaml

ButtonsExample.xaml

shows their suggested approach: (content with explicit size less than parent Button)

显示他们建议的方法：（显式大小小于父按钮的内容）

<Button Width="50"
        Height="50"
        Margin="0, 10, 0, 0"
        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_city}" />
        </Rectangle.OpacityMask>
    </Rectangle>
</Button>