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>

在一个完美的世界中，视觉属性中指定的图标应该在模板的visual属性中动态设置。

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

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

知道怎么做吗？我对模板表达式不太满意：/

Answer 1

您可以定义一个Template，VisualBrush绑定Tag的{{1}}属性：

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>属性设置为图标：

Tag

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

1 个答案: