Icon support for RibbonBar

Apr 14, 2009 at 2:23 AM
Been looking through the RibbonBar and wondered how hard it would be to implement an option for many of the controls to utilize a ICO file instead of Small/Large ImageSources?
Coordinator
Apr 26, 2009 at 4:30 PM

You can create a class to attach the icon as a dependency property to all IRibbonButton controls.
I made a similar implementation that looks like that:

 

 

public class RibbonSrc : FrameworkElement
{
    private static string formatString = "pack://application:,,,/img/{0}_{1}.png";
    /// <summary>
    ///
Gets or sets the Format String to convert a Name value to a path the contains the image.
    /// Warning: this value has a global scope!
    /// </summary>

   
 public string FormatString
    {
        
get { return formatString; }
        
set { formatString = value; }
    }

   
   public static string GetName(DependencyObject obj)
    {
        
return (string)obj.GetValue(NameProperty);
    }

    ///
<summary>
    ///
Set the name of an image to attach to an IRibbonButton control.
    
/// </summary>
    public static void SetName(DependencyObject obj, string value)
    {
        obj.SetValue(NameProperty, value);
    }


   
public static readonly DependencyProperty NameProperty =DependencyProperty.RegisterAttached("Name", typeof(string), typeof(RibbonSrc), new UIPropertyMetadata(null, NamePropertyChanged));

   
private static void NamePropertyChanged(DependencyObject o, DependencyPropertyChangedEventArgs e)
    {
        
string value = e.NewValue as string;
        
IRibbonButton btn = o as IRibbonButton;
        
if (btn != null)
        
{
            btn.SmallImage = CreateImageSource(value, 16);
            btn.LargeImage = CreateImageSource(value, 24);
        }
        
else throw new ArgumentNullException("RibbonSrc.Name can only by attached to controls that implement IRibbonButton.");
    }

   
private static ImageSource CreateImageSource(string value, int size)
    {
        
string s = string.Format(formatString, value, size);
        
ImageSourceConverter conv = new ImageSourceConverter();  
        
return conv.ConvertFromString(s) as ImageSource;
    }
}

 


Then you can use this attached property in the following way:


<odc:RibbonButton Content="Delete" odc:RibbonSrc.Name="delete" />

instead of the more verbose

<

odc:RibbonButton Content="Delete" SmallImage= "/img/delete_16.png" LargeImage="/img/delete_24.png" />

 

Instead of creating the ImageSource from a png file, you can modify the RibbonSrc class to access an Icon file and convert it into an ImageSource.

May 7, 2009 at 3:48 AM
Thanks for providing a solution to this.