16x16 pixel images in RibbonApplicationMenuItem gets stretched

Question

I am having a ribbon application menu that looks like this:

<ribbon:RibbonWindow>
  <DockPanel>
    <ribbon:Ribbon DockPanel.Dock="Top">
      <ribbon:Ribbon.ApplicationMenu>
        <ribbon:RibbonApplicationMenu>
          <ribbon:RibbonApplicationMenuItem Header="Users"                      
              ImageSource="Users16x16.png"
              Command="{Binding FooBinding}"/>
        </ribbon:RibbonApplicationMenu>
      </ribbon:Ribbon.ApplicationMenu>
    </ribbon:Ribbon>
  </DockPanel>
</ribbon:RibbonWindow>

The resulting image looks like this, stretched.

So how do I have a ribbon application menu item with a height that adapts to the image size instead of stretching?

Answer 1

Change the control template like:

<ribbon:RibbonApplicationMenuItem Command="{Binding FooBinding}">
  <ribbon:RibbonApplicationMenuItem.Template>
    <ControlTemplate>
      <Grid >
        <Grid.ColumnDefinitions>
          <ColumnDefinition />
          <ColumnDefinition />
        </Grid.ColumnDefinitions>
        <Image Grid.Column="0" Source="Users16x16.png"/>
        <TextBlock Grid.Column="1">Users</TextBlock>
      </Grid>
    </ControlTemplate>
  </ribbon:RibbonApplicationMenuItem.Template>
</ribbon:RibbonApplicationMenuItem>

If you want to use control template as Style in your dictionary:

<Style x:Key="16x16ImageStyle" TargetType="{x:Type ribbon:RibbonApplicationMenuItem}">
 <Setter Property="Template">
  <Setter.Value>
   <ControlTemplate TargetType="{x:Type ribbon:RibbonApplicationMenuItem}">
    <Grid >
     <Grid.ColumnDefinitions>
      <ColumnDefinition />
      <ColumnDefinition />
     </Grid.ColumnDefinitions>
     <Image  VerticalAlignment="Center"  HorizontalAlignment="Center" Stretch="None"
             Grid.Column="0" Source="{TemplateBinding ImageSource}"/>
     <TextBlock Grid.Column="1" Text="{TemplateBinding Header}"></TextBlock>
    </Grid>
   </ControlTemplate>
  </Setter.Value>
 </Setter>
</Style>

and recall it in your ribbon:

<ribbon:RibbonApplicationMenuItem Header="Users"                      
          ImageSource="Users16x16.png"
          Command="{Binding FooBinding}" 
          Style="{StaticResource 16x16ImageStyle}"/>