RibbonApplicationMenuItem中的16x16像素图像被拉伸

Question

我有一个看起来像这样的功能区应用程序菜单：

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

生成的图像看起来像这样，拉伸。

那么如何让一个功能区应用程序菜单项的高度适应图像大小而不是拉伸？

Answer 1

更改控制模板，如：

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

如果要在字典中将控制模板用作样式：

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

并在你的彩带中回忆起来：

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