WPF binding mahapps metro icons in template

问题:

I would like to transform this button code into a template version and put it in a style xaml file:

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

I have this until now:

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

In a perfect world, the icon specified in the visual property should be set dynamically in the visual attribute of the template.

I came up with this solution but it doesn't work. Binding can only be done on DependencyProperty.

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

Any idea how to do it? i'm not this good with template expressions :/

回答1:

You could define a Template with a VisualBrush that binds to the Tag property of the Button:

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

...and then set the Tag property to an icon:

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