模板中的 WPF 绑定 mahapps 地铁图标

Question

我想将此按钮代码转换为模板版本，并将其放入样式 xaml 文件中：

<Button Background="Transparent" BorderBrush="Transparent" HorizontalAlignment="Right" VerticalAlignment="Bottom" Margin="20" Foreground="White" Opacity="1">
        <StackPanel Orientation="Horizontal">
            <Rectangle Width="24" Height="24" Fill="{Binding RelativeSource={RelativeSource AncestorType=Button}, Path=Foreground}">
                <Rectangle.OpacityMask>
                    <VisualBrush Stretch="Fill" Visual="{iconPacks:PackIconMaterial Kind=Face, Width=24, Height=24}" />
                </Rectangle.OpacityMask>
            </Rectangle>
            <TextBlock Margin="10 0 10 0" VerticalAlignment="Center" Text="John Doe" FontSize="24" FontWeight="Normal" FontFamily="Segoe UI Light" />
        </StackPanel>
    </Button>

我到现在都有这个：

<Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Button}">

                <StackPanel Name="ButtonGrid" RenderTransformOrigin="0.5,0.5">
                    <Rectangle Width="48" Height="48" Fill="{Binding RelativeSource={RelativeSource AncestorType=Button}, Path=Foreground}">
                        <Rectangle.OpacityMask>
                            <VisualBrush Stretch="Fill" Visual="{Binding Path=(extensions:Icons.IconKind), RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Button}}}"/>
                        </Rectangle.OpacityMask>
                    </Rectangle>
                    <iconPacks:PackIconSimpleIcons x:Name="btnIcon" Kind="{Binding Path=(**extensions:Icons.IconKind**), RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Button}}}"  Width="48" Height="48" VerticalAlignment="Top" HorizontalAlignment="Center" Foreground="{TemplateBinding Foreground}" />
                    <TextBlock x:Name="tButton" HorizontalAlignment="Center" VerticalAlignment="Bottom" Foreground="{TemplateBinding Foreground}" FontWeight="Bold" Text="{Binding Path=Content, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Button}}}" />

                    <StackPanel.RenderTransform>
                        <ScaleTransform ScaleX="1.0" ScaleY="1.0" CenterX="0.5" CenterY="0.5"/>
                    </StackPanel.RenderTransform>
                </StackPanel>

                <ControlTemplate.Triggers>
                    ...
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>

理想情况下，视觉属性中指定的图标应该在模板的视觉属性中动态设置。

我想出了这个解决方案，但它不起作用。绑定只能在 DependencyProperty 上完成。

<VisualBrush Stretch="Fill" Visual="{iconPacks:PackIconMaterial Kind={Binding Path=(extensions:Icons.IconKind)}, Width=48, Height=48}"/>

知道怎么做吗？我不太擅长模板表达式：/

Answer 1

您可以使用绑定到Button 的Tag 属性的VisualBrush 来定义Template：

<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>

...然后将Tag 属性设置为一个图标：

<Button Style="{StaticResource IconStyle}" Foreground="Green">
    <Button.Tag>
        <iconPacks:PackIconMaterial Kind="Face" Width="24" Height="24" />
    </Button.Tag>
</Button>