Using XAML Path Icon as a Button Image in WinUI 3

Question

I have a XAML Path Icon as indicated below:

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

I'd prefer using this icon over the Segoe MDL2 Assets icon in my button below. Generally, I prefer the XAML path icons and want to use them where I can.

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

Unfortunately, I'm not seeing an ImageTemplate property or other property within the button control that takes a DataTemplate. Is there a way?

Answer 1

Button derives from ContentControl, which means it supports one child via its Content property, which is its default property. In your case, you can simply write:

<Button x:Name="CB_AddNode"
        Foreground="DarkGreen"
        ToolTipService.ToolTip="Add node under selected node.">

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

</Button>