Microsoft WPF Ribbon October 2010 - Bad Image Quality - wpf

Question

WPF Ribbon has poor image quality. I added
<Window.Resources>
<Style TargetType="{x:Type Image}">
<Setter Property="RenderOptions.BitmapScalingMode" Value="HighQuality" />
</Style>
</Window.Resources>
in my ribbon windows - but it doesnt helped. Also tried with
<ribbon:RibbonWindow.Resources>
image quality is still bad :-(
Does anybody know a workaround for this problem? My images are 48x48 png and i used them for large image icons
Thanks
Michael

Answer 1

Have you checked out the following page from Microsoft with specific recommendations on image size / DPI?
http://msdn.microsoft.com/en-us/library/windows/desktop/dd316921(v=vs.85).aspx

Answer 2

The reason for you poor quality, is because of incorrect image size. Small icons must be 16 x 16. And large icons must 32 x 32. If the image size is of another size it will be stretched. And the stretching will result in a reduced image quality.

Answer 3

I had the same problem and I created my own usercontrol to solve this.
This is how I did it:
<ribbon:Ribbon>
<ribbon:RibbonTab Header="File">
<ribbon:RibbonGroup Header="File">
<views:ImageButton Command="{Binding LoadCommand}" Caption="Open" SourceImage="/Images/save.png"/>
</ribbon:RibbonGroup>
</ribbon:RibbonTab>
</ribbon:Ribbon>
The image button usercontrol ImageButton.xaml
<UserControl Name="control"
<Button Command="{Binding Command, ElementName=control}" Style="{x:Null}">
<StackPanel>
<infrastructure:AutoGreyableImage Width="32" Source="{Binding SourceImage, ElementName=control}"/>
<TextBlock Text="{Binding Caption, ElementName=control}"/>
</StackPanel>
</Button>
The image button usercontrol ImageButton.xaml.cs
public partial class ImageButton : UserControl
{
public static DependencyProperty CommandProperty = DependencyProperty.Register(
"Command", typeof(ICommand), typeof(ImageButton));
public static DependencyProperty SourceProperty = DependencyProperty.Register(
"SourceImage", typeof(string), typeof(ImageButton));
public static DependencyProperty CaptionProperty = DependencyProperty.Register(
"Caption", typeof(string), typeof(ImageButton));
public ICommand Command
{
get
{
return (ICommand)GetValue(CommandProperty);
}
set
{
SetValue(CommandProperty, value);
}
}
public string SourceImage
{
get
{
return (string)GetValue(SourceProperty);
}
set
{
SetValue(SourceProperty, value);
}
}
public string Caption
{
get
{
return (string)GetValue(CaptionProperty);
}
set
{
SetValue(CaptionProperty, value);
}
}
public ImageButton()
{
InitializeComponent();
}
}
For the AutogreyableImage, I used this post
This is a copy paste of the class
using System.Windows.Controls;
using System.Windows.Media;
using System.Windows.Media.Imaging;
/// <summary>
/// Class used to have an image that is able to be gray when the control is not enabled.
/// Author: Thomas LEBRUN (http://blogs.developpeur.org/tom)
/// </summary>
public class AutoGreyableImage : Image
{
/// <summary>
/// Initializes a new instance of the <see cref="AutoGreyableImage"/> class.
/// </summary>
static AutoGreyableImage()
{
// Override the metadata of the IsEnabled property.
IsEnabledProperty.OverrideMetadata(typeof(AutoGreyableImage), new FrameworkPropertyMetadata(true, new PropertyChangedCallback(OnAutoGreyScaleImageIsEnabledPropertyChanged)));
}
/// <summary>
/// Called when [auto grey scale image is enabled property changed].
/// </summary>
/// <param name="source">The source.</param>
/// <param name="args">The <see cref="System.Windows.DependencyPropertyChangedEventArgs"/> instance containing the event data.</param>
private static void OnAutoGreyScaleImageIsEnabledPropertyChanged(DependencyObject source, DependencyPropertyChangedEventArgs args)
{
var autoGreyScaleImg = source as AutoGreyableImage;
var isEnable = Convert.ToBoolean(args.NewValue);
if (autoGreyScaleImg != null)
{
if (!isEnable)
{
// Get the source bitmap
var bitmapImage = new BitmapImage(new Uri(autoGreyScaleImg.Source.ToString()));
// Convert it to Gray
autoGreyScaleImg.Source = new FormatConvertedBitmap(bitmapImage, PixelFormats.Gray32Float, null, 0);
// Create Opacity Mask for greyscale image as FormatConvertedBitmap does not keep transparency info
autoGreyScaleImg.OpacityMask = new ImageBrush(bitmapImage);
}
else
{
// Set the Source property to the original value.
autoGreyScaleImg.Source = ((FormatConvertedBitmap)autoGreyScaleImg.Source).Source;
// Reset the Opcity Mask
autoGreyScaleImg.OpacityMask = null;
}
}
}
}
I hope this will help you and the others coming