WinUI 3中如何将XAML Path图标用作Button的图像

用户已定义如下XAML Path图标对应的DataTemplate：

<DataTemplate x:Key="Folder">
    <Grid>
        <Path Data="M10,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V8C22,6.89 21.1,6 20,6H12L10,4Z" 
              Stretch="Uniform" Fill="Goldenrod" Width="20" Height="20" Margin="0,0,0,0" RenderTransformOrigin="0.5,0.5">
            <Path.RenderTransform>
                <TransformGroup>
                    <TransformGroup.Children>
                        <RotateTransform Angle="0" />
                        <ScaleTransform ScaleX=".8" ScaleY=".8" />
                    </TransformGroup.Children>
                </TransformGroup>
            </Path.RenderTransform>
        </Path>
    </Grid>
</DataTemplate>

希望用该图标替换下方Button中使用的Segoe MDL2 Assets图标，但发现Button没有直接接收DataTemplate的专属属性，询问实现方法：

<Button
    x:Name="CB_AddNode"
    Content="&#xF12B;"
    FontFamily="Segoe MDL2 Assets"
    Foreground="DarkGreen"
    Style="{StaticResource IconButtonStyle}"
    ToolTipService.ToolTip="Add node under selected node." />

方法1：使用Button的ContentTemplate属性 #

Button的ContentTemplate属性专门用于定义Content的呈现模板，即使Content没有实际数据，模板也会被渲染。直接将其绑定到你的Folder模板即可：

<Button
    x:Name="CB_AddNode"
    ContentTemplate="{StaticResource Folder}"
    Foreground="DarkGreen"
    Style="{StaticResource IconButtonStyle}"
    ToolTipService.ToolTip="Add node under selected node." />

注：如果不需要绑定数据，Content可以留空或设为任意值，不影响模板渲染。

方法2：直接将Path作为Button的Content #

如果该图标仅在当前Button使用，不需要复用，可以直接把图标对应的UI元素放到Button的Content中：

<Button
    x:Name="CB_AddNode"
    Foreground="DarkGreen"
    Style="{StaticResource IconButtonStyle}"
    ToolTipService.ToolTip="Add node under selected node." >
    <Grid>
        <Path Data="M10,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V8C22,6.89 21.1,6 20,6H12L10,4Z" 
              Stretch="Uniform" Fill="Goldenrod" Width="20" Height="20" Margin="0,0,0,0" RenderTransformOrigin="0.5,0.5">
            <Path.RenderTransform>
                <TransformGroup>
                    <TransformGroup.Children>
                        <RotateTransform Angle="0" />
                        <ScaleTransform ScaleX=".8" ScaleY=".8" />
                    </TransformGroup.Children>
                </TransformGroup>
            </Path.RenderTransform>
        </Path>
    </Grid>
</Button>

方法3：修改自定义Button样式（全局复用） #

如果多个Button需要统一使用该图标，可以修改你已有的IconButtonStyle，在ControlTemplate中替换内容呈现逻辑为你的图标模板：

<Style x:Key="IconButtonStyle" TargetType="Button">
    <!-- 保留原有样式属性设置 -->
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Button">
                <Border Background="{TemplateBinding Background}"
                        BorderBrush="{TemplateBinding BorderBrush}"
                        BorderThickness="{TemplateBinding BorderThickness}">
                    <!-- 用自定义图标模板替换默认ContentPresenter -->
                    <ContentPresenter ContentTemplate="{StaticResource Folder}"
                                      HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                      VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

之后Button即可直接使用该样式，无需额外设置：

<Button
    x:Name="CB_AddNode"
    Foreground="DarkGreen"
    Style="{StaticResource IconButtonStyle}"
    ToolTipService.ToolTip="Add node under selected node." />

内容的提问来源于stack exchange，提问作者E. A. Bagby