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