wpfribboncontrolslibrary

16x16 pixel images in RibbonApplicationMenuItem gets stretched


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.

enter image description here

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


Solution

  • 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}"/>