适用于 WPF 的 Microsoft 功能区，仅限 RibbonButton LargeImage答案

【问题标题】：Microsoft Ribbon for WPF, RibbonButton LargeImage only适用于 WPF 的 Microsoft 功能区，仅限 RibbonButton LargeImage
【发布时间】：2011-11-15 07:10:14
【问题描述】：

如果 RibbonButton 不包含 Label，则 LargeImage 图标下有很多可用空间。我不想使用文本，而是想放大图像（宽度和高度）。但是，我没有找到解决方案。

我发现的唯一一件事是配置一个边距以便将图像放置在中心，但我希望图像被拉伸以适合整个区域。

有什么相关的吗？

【问题讨论】：

标签： c# wpf xaml ribbon

【解决方案1】：

编辑模板（使用 Blend 或者如果您没有 Blend，则这样做：.NET 4 control default templates without Blend）

这是功能区按钮样式的默认控件模板部分：

  <ControlTemplate TargetType="{x:Type ribbon:RibbonButton}">
    <Border x:Name="OuterBorder" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" CornerRadius="{TemplateBinding CornerRadius}" SnapsToDevicePixels="True">
      <Border x:Name="InnerBorder" BorderBrush="Transparent" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="{TemplateBinding CornerRadius}" Padding="{TemplateBinding Padding}">
        <StackPanel x:Name="StackPanel">
          <Image x:Name="PART_Image" 
                 RenderOptions.BitmapScalingMode="NearestNeighbor" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
                 Height="32" Margin="{DynamicResource {ComponentResourceKey ResourceId=LargeImageMargin, TypeInTargetAssembly={x:Type ribbon:Ribbon}}}" Source="{TemplateBinding LargeImageSource}" VerticalAlignment="Center" 
                 Width="32"/>
          <Grid x:Name="Grid" HorizontalAlignment="Center" VerticalAlignment="Center">
            <ribbon:RibbonTwoLineText x:Name="TwoLineText" HorizontalAlignment="Center" LineStackingStrategy="BlockLineHeight" LineHeight="13" Margin="1,1,1,0" TextAlignment="Center" Text="{TemplateBinding Label}" VerticalAlignment="Top"/>
          </Grid>
        </StackPanel>
      </Border>
    </Border>

根据您的需要更改此设置，例如，您可以将图像的宽度和高度调整为周围的边框：

 <ControlTemplate TargetType="{x:Type ribbon:RibbonButton}">
    <Border x:Name="OuterBorder" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" CornerRadius="{TemplateBinding CornerRadius}" SnapsToDevicePixels="True">
      <Border x:Name="InnerBorder" BorderBrush="Transparent" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="{TemplateBinding CornerRadius}" Padding="{TemplateBinding Padding}">
        <StackPanel x:Name="StackPanel">
          <Image x:Name="PART_Image" 
                 RenderOptions.BitmapScalingMode="NearestNeighbor" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
                 Stretch="Fill" Height="{Binding ElementName=InnerBorder, Path=ActualHeight}"
                 Margin="{DynamicResource {ComponentResourceKey ResourceId=LargeImageMargin, TypeInTargetAssembly={x:Type ribbon:Ribbon}}}" Source="{TemplateBinding LargeImageSource}" VerticalAlignment="Center" 
                 />
          <Grid x:Name="Grid" HorizontalAlignment="Center" VerticalAlignment="Center">
            <ribbon:RibbonTwoLineText x:Name="TwoLineText" HorizontalAlignment="Center" LineStackingStrategy="BlockLineHeight" LineHeight="13" Margin="1,1,1,0" TextAlignment="Center" Text="{TemplateBinding Label}" VerticalAlignment="Top"/>
          </Grid>
        </StackPanel>

【讨论】：

所以，我尝试将放在中，并将模板添加到 RibbonButton。图像现在很大，但是没有更多可用的悬停效果。我需要做额外的事情吗？
ControlTemplate 中的代码比上面的代码多得多。我的 sn-p 只是一个摘录。如果您使用完整的控制模板，IsmouseOver/Hoover 应该可以正常工作。所以用上面的方式搭配blend或者链接就可以得到完整的默认控件模板。很抱歉我不能在这里发布它，因为它太大了，我不想弄乱这个帖子......
我明白了，谢谢。现在我确实提取了整个模板，现在一切正常。感谢sven的支持！