Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>I had the same problem and I created my own usercontrol to solve this.</p> <p>This is how I did it:</p> <pre><code>&lt;ribbon:Ribbon&gt; &lt;ribbon:RibbonTab Header="File"&gt; &lt;ribbon:RibbonGroup Header="File"&gt; &lt;views:ImageButton Command="{Binding LoadCommand}" Caption="Open" SourceImage="/Images/save.png"/&gt; &lt;/ribbon:RibbonGroup&gt; &lt;/ribbon:RibbonTab&gt; &lt;/ribbon:Ribbon&gt; </code></pre> <p>The image button usercontrol ImageButton.xaml</p> <pre><code>&lt;UserControl Name="control" &lt;Button Command="{Binding Command, ElementName=control}" Style="{x:Null}"&gt; &lt;StackPanel&gt; &lt;infrastructure:AutoGreyableImage Width="32" Source="{Binding SourceImage, ElementName=control}"/&gt; &lt;TextBlock Text="{Binding Caption, ElementName=control}"/&gt; &lt;/StackPanel&gt; &lt;/Button&gt; </code></pre> <p>The image button usercontrol ImageButton.xaml.cs</p> <pre><code>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(); } } </code></pre> <p>For the AutogreyableImage, I used <a href="https://stackoverflow.com/questions/959558/how-can-i-make-a-wpf-image-disableable">this post</a></p> <p>This is a copy paste of the class</p> <pre><code> using System.Windows.Controls; using System.Windows.Media; using System.Windows.Media.Imaging; /// &lt;summary&gt; /// 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) /// &lt;/summary&gt; public class AutoGreyableImage : Image { /// &lt;summary&gt; /// Initializes a new instance of the &lt;see cref="AutoGreyableImage"/&gt; class. /// &lt;/summary&gt; static AutoGreyableImage() { // Override the metadata of the IsEnabled property. IsEnabledProperty.OverrideMetadata(typeof(AutoGreyableImage), new FrameworkPropertyMetadata(true, new PropertyChangedCallback(OnAutoGreyScaleImageIsEnabledPropertyChanged))); } /// &lt;summary&gt; /// Called when [auto grey scale image is enabled property changed]. /// &lt;/summary&gt; /// &lt;param name="source"&gt;The source.&lt;/param&gt; /// &lt;param name="args"&gt;The &lt;see cref="System.Windows.DependencyPropertyChangedEventArgs"/&gt; instance containing the event data.&lt;/param&gt; 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; } } } } </code></pre> <p>I hope this will help you and the others coming</p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload