模板中的 WPF 绑定 mahapps 地铁图标 - 标记绑定不起作用答案

【问题标题】：WPF binding mahapps metro icons in template - Tag binding not working模板中的 WPF 绑定 mahapps 地铁图标 - 标记绑定不起作用
【发布时间】：2021-12-17 23:43:42
【问题描述】：

我有一个导航栏，里面有几个按钮。这些按钮都使用相同的样式，在 ResourceDictionary 中定义。

我正在尝试将 Mahapps 中的图标添加到每个按钮。每个按钮都需要不同类型的图标，我想在视图上设置它。

为了实现这一点，我需要能够通过按钮的某些属性将图标种类传递给模板。

我无法将图标种类传递给模板。

我正在一个新项目（WPF netcore3.1）上对此进行测试

我看到其他帖子（post1、post2）建议使用rectangle 而不是iconPacks，并使用按钮的Tag 属性绑定rectangle 的Visual 属性：

<Application x:Class="WpfApp1.App"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:local="clr-namespace:WpfApp1"
         StartupUri="MainWindow.xaml">
<Application.Resources>
    <ResourceDictionary Source="/IconStyle.xaml" />
</Application.Resources>

<Window x:Class="WpfApp1.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:iconPacks="http://metro.mahapps.com/winfx/xaml/iconpacks"   
    xmlns:local="clr-namespace:WpfApp1"
    mc:Ignorable="d"
    Title="MainWindow" Height="450" Width="800">
<StackPanel>
    <Button Style="{StaticResource IconStyle}" Foreground="Red">
        <Button.Tag>
            <iconPacks:Modern Kind="Home" Width="24" Height="24" />
        </Button.Tag>
    </Button>
</StackPanel>

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                xmlns:local="clr-namespace:WpfApp1">
<Style x:Key="IconStyle" TargetType="Button">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Button}">
                <StackPanel Orientation="Horizontal"
                        DataContext="{Binding RelativeSource={RelativeSource AncestorType=Button}}">
                    <Rectangle Width="24" Height="24" Fill="{Binding Foreground}">
                        <Rectangle.OpacityMask>
                            <VisualBrush Stretch="Fill" Visual="{Binding Tag}" />
                        </Rectangle.OpacityMask>
                    </Rectangle>
                    <TextBlock Margin="10 0 10 0" VerticalAlignment="Center" Text="John Doe" 
                           FontSize="24" FontWeight="Normal" FontFamily="Segoe UI Light" />
                </StackPanel>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

但对我来说根本不显示任何图标。

有什么建议吗？

【问题讨论】：

我会尝试 Fill 而不是 Rectangle.OpacityMask
Rectangle.OpacityMask 在我对其中的图标进行硬编码时工作正常。仅当我尝试将 Kind 传递给模板时，该图标才显示

标签： c# wpf data-binding mahapps.metro

【解决方案1】：

使用IconPacks，您不需要使用 OpacityMask。相反，您可以使用PackIconModern 控件或IconPacks 包中的任何其他控件。

这是一个示例，其中仅包含来自 MahApps.Metro.IconPacks.Modern NuGet 包 (v4.11.0) 的 PackIconModern 控件。

按钮样式：

<Style x:Key="IconStyle" TargetType="{x:Type Button}">
    <Setter Property="Padding" Value="10 5" />
    <Setter Property="HorizontalContentAlignment" Value="Left" />
    <Setter Property="FontSize" Value="24" />
    <Setter Property="FontWeight" Value="Normal" />
    <Setter Property="FontFamily" Value="Segoe UI Light" />
    <Setter Property="ContentTemplate">
        <Setter.Value>
            <DataTemplate>
                <StackPanel Orientation="Horizontal">
                    <iconPacks:PackIconModern
                        Kind="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Button}}, Path=Tag, Mode=OneWay}"
                        Width="24"
                        Height="24"
                        VerticalAlignment="Center" />

                    <TextBlock Margin="10 0 0 0"
                               VerticalAlignment="Center"
                               Text="{Binding}" />
                </StackPanel>
            </DataTemplate>
        </Setter.Value>
    </Setter>
</Style>

使用这种风格，你可以做这样的事情：

<Grid>

    <StackPanel Orientation="Vertical" VerticalAlignment="Center" Margin="5 10">
        <Button Style="{StaticResource IconStyle}"
                Foreground="Crimson"
                Content="John Doe"
                Tag="{x:Static iconPacks:PackIconModernKind.Home}" />
        <Button Style="{StaticResource IconStyle}"
                Foreground="ForestGreen"
                Content="Works..."
                Tag="{x:Static iconPacks:PackIconModernKind.Cloud}" />
    </StackPanel>

</Grid>

IconPacks 控件的命名空间是xmlns:iconPacks="http://metro.mahapps.com/winfx/xaml/iconpacks"。

如果您需要其他包中的更多图标，只需添加 NuGet 包并使用此控件即可。也可以使用包含所有图标控件和一个可以处理所有可能的图标类型枚举的控件的主 IconPacks 包。您可以在存储库 ion GitHub (MahApps.Metro.IconPacks) 的 wiki 中找到更多信息。

【讨论】：