Microsoft Ribbon for WPF, RibbonButton LargeImage only

Question

if the RibbonButton contains no Label there is a lot of free space under the LargeImage icon. Instead of using a text, i would like to enlarge the image (width and height). However, i didn't found a solution to do that.

The only thing i found out is to configure a margin in order to place the Image in the center, but I want the image to be streched to fit the whole region.

Any comments on that?

Answer 1

Edit the Template (use Blend or if if you don't have blend do it this way: .NET 4 control default templates without Blend)

This is the default control template part of the ribbon button style:

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

Change this to your needs, you could for example adjust the width and height of the image to the surrounding 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>