Custom AppBarButton from image - wpf

Question

Step by step, I'm optimizing my xaml to create a custom AppBarButton from an image. I've gone from a complete custom xaml layout to using a few lines using styles, but I know I can simplify this one more step.
Here's what I currently have:
<Style x:Key="PrintAppBarButtonStyle" TargetType="ButtonBase" BasedOn="{StaticResource AppBarButtonStyle}">
<Setter Property="AutomationProperties.AutomationId" Value="PrintAppBarButton"/>
<Setter Property="AutomationProperties.Name" Value="Print"/>
</Style>
<Button Style="{StaticResource PrintAppBarButtonStyle}">
<ContentControl>
<Image Source="/Assets/AppBar/appbar_printer_dark.png"/>
</ContentControl>
</Button>
I know I can move the image source into the style definition, but I haven't been able to get this to work. After reading about the AppBarButton class, I tried to set my TargetType to AppBarButton and then set an Icon property, but was unsuccessful. Something like the following:
<Style x:Key="PrintAppBarButtonStyle" TargetType="AppBarButton" BasedOn="{StaticResource AppBarButtonStyle}">
<Setter Property="AutomationProperties.AutomationId" Value="PrintAppBarButton"/>
<Setter Property="AutomationProperties.Name" Value="Print"/>
<Setter Property="Icon">
<Setter.Value>
// here it's expecting an IconElement
</Setter.Value>
</Setter>
</Style>
<Button Style="{StaticResource PrintAppBarButtonStyle}"/>
Any tips?

Answer 1

The Icon property does not accept an image -- if you need to use an image, stick with the Content property. That can also be styled:
<Style x:Key="PrintAppBarButtonStyle" TargetType="ButtonBase" BasedOn="{StaticResource AppBarButtonStyle}">
<Setter Property="AutomationProperties.AutomationId" Value="PrintAppBarButton"/>
<Setter Property="AutomationProperties.Name" Value="Print"/>
<Setter Property="Content">
<Setter.Value>
<ContentControl>
<Image Source="/Assets/AppBar/appbar_printer_dark.png"/>
</ContentControl>
</Setter.Value>
</Setter>
</Style>
By way of explanation, note that "ContentControl.Content" is the ContentProperty, which means that the child element gets set as "Content". Ie, this:
<Button Style="{StaticResource PrintAppBarButtonStyle}">
<ContentControl>
<Image Source="/Assets/AppBar/appbar_printer_dark.png"/>
</ContentControl>
</Button>
is just shorthand for this:
<Button Style="{StaticResource PrintAppBarButtonStyle}">
<Button.Content>
<ContentControl>
<Image Source="/Assets/AppBar/appbar_printer_dark.png"/>
</ContentControl>
</Button.Content>
</Button>