Show/Change the images in Button/DropDownButton/ToggleButton

Nov 28, 2010 at 7:02 AM
Edited Nov 28, 2010 at 7:15 AM

Now,we open the IRibbonControl.cs.

In the namespace, we add some code.

    /// <summary>
    /// Advance Ribbon Settings
    /// </summary>
    public interface IRibbonControlAdv : IKeyTipedControl
    {
        /// <summary>
        /// Compent Size
        /// </summary>
        RibbonControlSize Size { get; set; }

        /// <summary>
        /// Compent Size
        /// </summary>
        string SizeDefinition { get; set; }

        /// <summary>
        /// Title Text
        /// </summary>
        string Header { get; set; }

        /// <summary>
        /// Image Icon
        /// </summary>
        ImageSource Icon { get; set; }

    }

Nov 28, 2010 at 7:10 AM
Edited Nov 28, 2010 at 7:16 AM

Then, we open the Button.cs and DropDownButton.cs with ToggleButton.cs. Fix the Header Propties and Icon Properties with LargeIcon Properties.

 

DropDownButton.cs:

public class DropDownButton: MenuBase, IQuickAccessItemProvider, IRibbonControlAdv, IDropDownControl 

 

ToggleButton.cs:

public class ToggleButton: System.Windows.Controls.Primitives.ToggleButton, IRibbonControlAdv, IQuickAccessItemProvider

 

Button.cs:

public class Button: System.Windows.Controls.Button, IRibbonControlAdv, IQuickAccessItemProvider 

Nov 28, 2010 at 7:15 AM

Now, these file has got a lot of error.

 

Fix Button.cs(In "Properties"):

        #region Header

        /// <summary>
        /// Gets or sets element Text
        /// </summary>
        public string Header
        {
            get { return (string)GetValue(HeaderProperty); }
            set { SetValue(HeaderProperty, value); }
        }

        /// <summary>
        /// Using a DependencyProperty as the backing store for Header. 
        /// This enables animation, styling, binding, etc...
        /// </summary>
        public static readonly DependencyProperty HeaderProperty = RibbonControl.HeaderProperty.AddOwner(typeof (Button));           

        #endregion

        #region Icon

        /// <summary>
        /// Gets or sets Icon for the element
        /// </summary>
        public ImageSource Icon
        {
            get { return (ImageSource)GetValue(IconProperty); }
            set { SetValue(IconProperty, value); }
        }

        /// <summary>
        /// Using a DependencyProperty as the backing store for Icon.  This enables animation, styling, binding, etc...
        /// </summary>
        public static readonly DependencyProperty IconProperty = RibbonControl.IconProperty.AddOwner(typeof(Button), new UIPropertyMetadata(null, OnIconChanged));

        private static void OnIconChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
        {
            Button element = d as Button;
            FrameworkElement oldElement = e.OldValue as FrameworkElement;
            if (oldElement != null) element.RemoveLogicalChild(oldElement);
            FrameworkElement newElement = e.NewValue as FrameworkElement;
            if (newElement != null) element.AddLogicalChild(newElement);
        }
        #endregion

        #region LargeIcon

        /// <summary>
        /// Gets or sets button large icon
        /// </summary>
        public ImageSource LargeIcon
        {
            get { return (ImageSource)GetValue(LargeIconProperty); }
            set { SetValue(LargeIconProperty, value); }
        }

        /// <summary>
        /// Using a DependencyProperty as the backing store for SmallIcon.
        /// This enables animation, styling, binding, etc...
        /// </summary>
        public static readonly DependencyProperty LargeIconProperty = DependencyProperty.Register("LargeIcon", typeof(ImageSource), typeof(Button), new FrameworkPropertyMetadata(null,null));

        #endregion

 

Fix ToggleButton.cs(In "Properties"):

        #region Header

        /// <summary>
        /// Gets or sets element Text
        /// </summary>
        public string Header
        {
            get { return (string)GetValue(HeaderProperty); }
            set { SetValue(HeaderProperty, value); }
        }

        /// <summary>
        /// Using a DependencyProperty as the backing store for Header. 
        /// This enables animation, styling, binding, etc...
        /// </summary>
        public static readonly DependencyProperty HeaderProperty = RibbonControl.HeaderProperty.AddOwner(typeof(ToggleButton));

        #endregion

        #region Icon

        /// <summary>
        /// Gets or sets Icon for the element
        /// </summary>
        public ImageSource Icon
        {
            get { return (ImageSource)GetValue(IconProperty); }
            set { SetValue(IconProperty, value); }
        }

        /// <summary>
        /// Using a DependencyProperty as the backing store for Icon.  This enables animation, styling, binding, etc...
        /// </summary>
        public static readonly DependencyProperty IconProperty = RibbonControl.IconProperty.AddOwner(typeof(ToggleButton), new UIPropertyMetadata(null, OnIconChanged));

        private static void OnIconChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
        {
            ToggleButton element = d as ToggleButton;
            FrameworkElement oldElement = e.OldValue as FrameworkElement;
            if (oldElement != null) element.RemoveLogicalChild(oldElement);
            FrameworkElement newElement = e.NewValue as FrameworkElement;
            if (newElement != null) element.AddLogicalChild(newElement);
        }

        #endregion

        #region LargeIcon

        /// <summary>
        /// Gets or sets button large icon
        /// </summary>
        public ImageSource LargeIcon
        {
            get { return (ImageSource)GetValue(LargeIconProperty); }
            set { SetValue(LargeIconProperty, value); }
        }

        /// <summary>
        /// Using a DependencyProperty as the backing store for SmallIcon.
        /// This enables animation, styling, binding, etc...
        /// </summary>
        public static readonly DependencyProperty LargeIconProperty = DependencyProperty.Register("LargeIcon", typeof(ImageSource), typeof(ToggleButton), new UIPropertyMetadata(null));

        #endregion

 

Fix DropDownButton.cs(In "Properties"):

        #region Header

        /// <summary>
        /// Gets or sets element Text
        /// </summary>
        public string Header
        {
            get { return (string)GetValue(HeaderProperty); }
            set { SetValue(HeaderProperty, value); }
        }

        /// <summary>
        /// Using a DependencyProperty as the backing store for Header. 
        /// This enables animation, styling, binding, etc...
        /// </summary>
        public static readonly DependencyProperty HeaderProperty = RibbonControl.HeaderProperty.AddOwner(typeof(DropDownButton));

        #endregion

        #region Icon

        /// <summary>
        /// Gets or sets Icon for the element
        /// </summary>
        public ImageSource Icon
        {
            get { return (ImageSource)GetValue(IconProperty); }
            set { SetValue(IconProperty, value); }
        }

        /// <summary>
        /// Using a DependencyProperty as the backing store for Icon.  This enables animation, styling, binding, etc...
        /// </summary>
        public static readonly DependencyProperty IconProperty = RibbonControl.IconProperty.AddOwner(typeof(DropDownButton), new UIPropertyMetadata(null, OnIconChanged));

        private static void OnIconChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
        {
            DropDownButton element = d as DropDownButton;
            FrameworkElement oldElement = e.OldValue as FrameworkElement;
            if (oldElement != null) element.RemoveLogicalChild(oldElement);
            FrameworkElement newElement = e.NewValue as FrameworkElement;
            if (newElement != null) element.AddLogicalChild(newElement);
        }

        #endregion

        #region LargeIcon

        /// <summary>
        /// Gets or sets button large icon
        /// </summary>
        public ImageSource LargeIcon
        {
            get { return (ImageSource)GetValue(LargeIconProperty); }
            set { SetValue(LargeIconProperty, value); }
        }

        /// <summary>
        /// Using a DependencyProperty as the backing store for SmallIcon.
        /// This enables animation, styling, binding, etc...
        /// </summary>
        public static readonly DependencyProperty LargeIconProperty = DependencyProperty.Register("LargeIcon", typeof(ImageSource), typeof(DropDownButton), new UIPropertyMetadata(null));

        #endregion

Nov 28, 2010 at 7:17 AM

Then, we can see Images in the WPF Editor.