none
WPF Ribbon pixelates application button icon RRS feed

  • Question

  • Hey guys, I'm using the WPF Ribbon in my application, and I have my .png 16x16 icon that I want to use for the application button - however, when I apply it, it pixelates completely! Here's the icon: http://goos.se/Logo/index.htm

    Here's a picture of what I mean: http://i48.tinypic.com/1051eoo.jpg
    I highlighted the area with a thick red line.

    Thanks for any help you can give,
    Theo
    Sunday, November 29, 2009 10:22 AM

Answers

  • Hi Theo,

    I created a new icon from the pic shown on the site that you originally linked and converted that into separate PNG-files for each icon-resource. You can download the zip here . The orb looks OK with or without one of the predefined themes applied.

    FWIW - I'm using Icon2Any to transpose all formats in an icon to PNGs, a tool which was part of an icon-editor I used to use (I'm using Axialis at present).

    Cheers,
    Olaf
    • Marked as answer by Theo Storm Friday, December 4, 2009 8:55 AM
    Sunday, November 29, 2009 3:55 PM

All replies

  • Hi Theo,

    I'd suggest to either convert your icon to a PNG (using the 32x32 resource) or remove the smaller icon-resources from the icon-file.
    Cheers,
    Olaf
    Sunday, November 29, 2009 1:04 PM
  • Well I have the images separate, not in one image, so that's not the problem. When I use the 32x32, it just goes way out of the application button's bounds. And my icons are already png :)
    Sunday, November 29, 2009 1:05 PM
  • Hi Theo,

    just had a quick look at an app of mine that also uses the WPF-ribbon. The command that I'm using for the "pearl" there looks like this:

    <r:RibbonWindow.Resources>
    	<r:RibbonCommand x:Key="amApplicationMenuButton"
             LabelTitle="..."
             LabelDescription="..."
             ToolTipTitle="..."
             ToolTipDescription="..."
             ToolTipImageSource="/Resources/Images/SomeIcon_32x32x32b.png"
             SmallImageSource="/Resources/Images/SomeIcon_16x16x32b.png"
             LargeImageSource="/Resources/Images/SomeIcon_32x32x32b.png"
             />
    ...
    
    
    
       <r:Ribbon.ApplicationMenu>
          <r:RibbonApplicationMenu Command="{StaticResource amApplicationMenuButton}">
          ...
             

    So, it seems that I was lying in my first post. :-)
    If the above doesn't help, post the relevant portion of your XAML.
    Cheers,
    Olaf
    Sunday, November 29, 2009 1:12 PM
  • Hmm, this is very weird - even when I put the same icon into the tooltip it gets pixelated. I guess I should upload the full source so you can take a look at it - http://www.sendspace.com/file/s9j6bi
    Sunday, November 29, 2009 1:16 PM
  • Hi Theo,

    sorry, don't have much time left to see into this right now, but in the meantime, you might want to start with applying one of the themes to your Ribbon-control. To do so, change your App.xaml to:

    <Application
    	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    	x:Class="Moonlite.App"
    	StartupUri="MainWindow.xaml">
    	<Application.Resources>
    		<!-- Resources scoped at the Application level should be defined here. -->
    
          <!-- Style of the Ribbon Control -->
          <!--<ResourceDictionary Source="/RibbonControlsLibrary;component/Themes/Office2007Black.xaml"/>-->
          <!--<ResourceDictionary Source="/RibbonControlsLibrary;component/Themes/Office2007Silver.xaml"/>-->
          <ResourceDictionary Source="/RibbonControlsLibrary;component/Themes/Office2007Blue.xaml"/>
       </Application.Resources>
    </Application>

    Still looks weird, but this way it's actually pretty much the same as I implemented it. That said, the RibbonControl isn't really what I would consider a RTM-control. One thing you'll notice when using one of the themes is that there'll be the window-icon right behind the globe, which I guess shouldn't be there after all ...

    Cheers,
    Olaf
    Sunday, November 29, 2009 2:09 PM
  • Hi Theo,

    FWIW - if I replace the LargeImageSource to use i.e. open32.png, it looks just fine ...
    Cheers,
    Olaf
    Sunday, November 29, 2009 2:12 PM
  • Yeah, I thought so. Hmm - I don't have any image editing tools - could you look into it?
    Also, I really like the current theme of the Ribbon. Is it required to change it? :(
    Sunday, November 29, 2009 2:13 PM
  • Hi Theo,

    I created a new icon from the pic shown on the site that you originally linked and converted that into separate PNG-files for each icon-resource. You can download the zip here . The orb looks OK with or without one of the predefined themes applied.

    FWIW - I'm using Icon2Any to transpose all formats in an icon to PNGs, a tool which was part of an icon-editor I used to use (I'm using Axialis at present).

    Cheers,
    Olaf
    • Marked as answer by Theo Storm Friday, December 4, 2009 8:55 AM
    Sunday, November 29, 2009 3:55 PM
  • It works! Thank you so much dude :)
    Sunday, November 29, 2009 3:58 PM
  • Hi Theo,

    glad you got it working. If it only was always something as simple as an icon ... :-)
    Cheers,
    Olaf
    Sunday, November 29, 2009 4:11 PM
  • Hi Olaf, could you elaborate on this a bit for me?  Are you simply saying to use a 32x32 png image for the large image source or replacing largeimagesource with some other code?  I have the same problem with pixellation and am using a 48x48 png.

    Here's the code:

    <

     

    r:RibbonCommand

     

    x:Key="DeleteCommand"

     

    CanExecute="RibbonCommand_CanExecute"

     

    Executed="QDelete_Click"

     

    LabelTitle="Delete"

     

    ToolTipTitle="Delete record."

     

    ToolTipDescription="Click here to delete the Address Book record.

    Shortcut Key: Alt+D"

     

    ToolTipImageSource="/AB;component/images/delete_48x48.png"

     

    ToolTipFooterTitle="Press F1 for more help."

     

    ToolTipFooterImageSource="/AB;component/images/ABHelp.png"

     

    LargeImageSource="/AB;component/images/delete_48x48.png" SmallImageSource="/AB;component/images/delete_48x48.png" />

    Friday, April 9, 2010 11:03 PM
  • Hi Clix,

    yes. I never experienced any problems as long as I used 16x16 images for <SmallImageSource> and 32x32 for <LargeImageSource>. That said, I'd create a 32x32 copy of your image and try with that.


    Cheers,
    Olaf
    http://blogs.intuidev.com
    Saturday, April 10, 2010 9:12 AM
  • Has anyone experimented with using xaml artwork instead of static PNGs for the image sizes? Is it possible they'd dynamically resize?  It seems to be taking a step backwards to generate an image for each size.... or at least give the choice, to specify a static bitmap, or to point the image towards a DrawingBrush located in a resource dictionary..?
    Purkiss
    Wednesday, March 30, 2011 3:47 PM
  • Hi guys,

    there is one common problem with png (or bmp, etc.) files using in WPF. Most of the creators are saving those files with an 72dpi info. As WPF uses 96 dpi those pics are scaled. I forwared this to e.g. Axialis (I'm using this excellent icon editor, too).

    Now, all picture file generated from icons are saved with 96 dpi info. Looks much better now ! So watch for the resolution which is stored in your artwork.

    Using Expression Design you can do much graphics in XAML directly. But be careful ! Even Design 4 does not export drop-down shadows as effects. I did not get it to work with the Effect class. Each time using such an effect, Design 4 generates pixel files for shadows. (Yes, I checked the box to convert into XAML effects !)

    Knowing this, you can do very fine graphics directly in XAML. But you can't use them in ribbon. It still needs pictures to display.

    Hope this helps.

    Cheers,
    Christoph

    Friday, April 1, 2011 3:39 AM