RadRibbonButton canvas image

[Derek]

How to use the sample canvas from my dictionary instead of LargeImage for the button?

<Canvas x:Key="Users" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:Name="appbar_group" Width="76" Height="76" Clip="F1 M 0,0L 76,0L 76,76L 0,76L 0,0">
    <Path Width="50.6667" Height="41.1667" Canvas.Left="12.6667" Canvas.Top="17.4167" Stretch="Fill" Fill="#FF000000" Data="F1 M 38,26.9167C 42.618,26.9167 44.5972,29.5555 43.9312,35.0945C 44.5262,35.4358 44.9271,36.0773 44.9271,36.8125C 44.9271,37.7121 44.3269,38.4715 43.5051,38.7122C 43.1618,39.9358 42.6286,41.0191 41.9583,41.8856L 41.9583,46.0486C 44.1574,46.4884 45.9167,46.7083 48.5555,48.0278C 51.1944,49.3472 52.0741,50.5567 53.8333,52.316L 53.8333,58.5833L 22.1667,58.5833L 22.1666,52.316C 23.9259,50.5567 24.8055,49.3472 27.4444,48.0278C 30.0833,46.7083 31.8426,46.4884 34.0417,46.0486L 34.0417,41.8856C 33.3714,41.0191 32.8382,39.9358 32.4949,38.7121C 31.6731,38.4715 31.0729,37.7121 31.0729,36.8125C 31.0729,36.0773 31.4737,35.4358 32.0688,35.0945C 31.4028,29.5555 33.3819,26.9167 38,26.9167 Z M 25.8611,46.8403C 23.6735,47.9341 23.8824,47.7648 22.6094,49.0834L 12.6667,49.0833L 12.6667,42.816C 14.4259,41.0567 15.3056,39.8472 17.9444,38.5278C 20.5833,37.2083 22.3426,36.9884 24.5417,36.5486L 24.5417,32.3856C 23.8714,31.5191 23.3382,30.4359 22.9949,29.2122C 22.1731,28.9715 21.5729,28.2121 21.5729,27.3125C 21.5729,26.5773 21.9738,25.9358 22.5688,25.5945C 21.9028,20.0556 23.8819,17.4167 28.5,17.4167C 32.8315,17.4167 34.8414,20.9258 34.5246,25.7844C 31.6667,26.9167 30.0833,28.5 30.0896,33.1153C 29.4946,33.4566 29.0938,34.0982 29.0938,34.8333C 29.0938,35.7329 29.2981,36.8882 30.1199,37.1288C 30.4632,38.3525 30.9964,39.4358 31.6667,40.3023L 31.6667,44.8611C 29.4676,45.3009 28.5,45.5208 25.8611,46.8403 Z M 50.1389,46.8403C 47.5,45.5208 46.5324,45.3009 44.3333,44.8611L 44.3333,40.3023C 45.0036,39.4358 45.5368,38.3525 45.8801,37.1288C 46.7019,36.8882 46.9062,35.7329 46.9062,34.8333C 46.9062,34.0982 46.5054,33.4566 45.9104,33.1153C 45.9167,28.5 44.3333,26.9167 41.4754,25.7844C 41.1585,20.9257 43.1685,17.4167 47.5,17.4167C 52.118,17.4167 54.0972,20.0555 53.4312,25.5945C 54.0262,25.9358 54.4271,26.5773 54.4271,27.3125C 54.4271,28.2121 53.8269,28.9715 53.0051,29.2121C 52.6618,30.4358 52.1286,31.5191 51.4583,32.3856L 51.4583,36.5486C 53.6574,36.9884 55.4166,37.2083 58.0555,38.5278C 60.6944,39.8472 61.5741,41.0567 63.3333,42.816L 63.3333,49.0833L 53.3906,49.0833C 52.1176,47.7648 52.3265,47.9341 50.1389,46.8403 Z "/>
</Canvas>

 

 

                    <telerik:RadCollapsiblePanel>
                        <telerik:RadRibbonButton Text="Users"
                                             AllowDrop="True"
                                             LargeImage="..\Images\NewEmail.png"
                                             Size="Large"
                                             telerik:ScreenTip.Title="Users"
                                             telerik:ScreenTip.Description="Add or remove Users."
                                             telerik:KeyTipService.AccessText="U"
Command="{Binding UsersCommand}"/>

[Evgenia]

Hi Derek,

It is possible to have Geometry Data as content of RadRibbonButton. To achieve this you might still use LargeImage property but provide DrawingImage to it. For example:

<DrawingImage x:Key="MyCustomImage">
          <DrawingImage.Drawing>
              <GeometryDrawing Brush="#FF000000"
                  Geometry="F1 M 38,26.9167C 42.618,26.9167 44.5972,29.5555 43.9312,35.0945C 44.5262,35.4358 44.9271,36.0773 44.9271,36.8125C 44.9271,37.7121 44.3269,38.4715 43.5051,38.7122C 43.1618,39.9358 42.6286,41.0191 41.9583,41.8856L 41.9583,46.0486C 44.1574,46.4884 45.9167,46.7083 48.5555,48.0278C 51.1944,49.3472 52.0741,50.5567 53.8333,52.316L 53.8333,58.5833L 22.1667,58.5833L 22.1666,52.316C 23.9259,50.5567 24.8055,49.3472 27.4444,48.0278C 30.0833,46.7083 31.8426,46.4884 34.0417,46.0486L 34.0417,41.8856C 33.3714,41.0191 32.8382,39.9358 32.4949,38.7121C 31.6731,38.4715 31.0729,37.7121 31.0729,36.8125C 31.0729,36.0773 31.4737,35.4358 32.0688,35.0945C 31.4028,29.5555 33.3819,26.9167 38,26.9167 Z M 25.8611,46.8403C 23.6735,47.9341 23.8824,47.7648 22.6094,49.0834L 12.6667,49.0833L 12.6667,42.816C 14.4259,41.0567 15.3056,39.8472 17.9444,38.5278C 20.5833,37.2083 22.3426,36.9884 24.5417,36.5486L 24.5417,32.3856C 23.8714,31.5191 23.3382,30.4359 22.9949,29.2122C 22.1731,28.9715 21.5729,28.2121 21.5729,27.3125C 21.5729,26.5773 21.9738,25.9358 22.5688,25.5945C 21.9028,20.0556 23.8819,17.4167 28.5,17.4167C 32.8315,17.4167 34.8414,20.9258 34.5246,25.7844C 31.6667,26.9167 30.0833,28.5 30.0896,33.1153C 29.4946,33.4566 29.0938,34.0982 29.0938,34.8333C 29.0938,35.7329 29.2981,36.8882 30.1199,37.1288C 30.4632,38.3525 30.9964,39.4358 31.6667,40.3023L 31.6667,44.8611C 29.4676,45.3009 28.5,45.5208 25.8611,46.8403 Z M 50.1389,46.8403C 47.5,45.5208 46.5324,45.3009 44.3333,44.8611L 44.3333,40.3023C 45.0036,39.4358 45.5368,38.3525 45.8801,37.1288C 46.7019,36.8882 46.9062,35.7329 46.9062,34.8333C 46.9062,34.0982 46.5054,33.4566 45.9104,33.1153C 45.9167,28.5 44.3333,26.9167 41.4754,25.7844C 41.1585,20.9257 43.1685,17.4167 47.5,17.4167C 52.118,17.4167 54.0972,20.0555 53.4312,25.5945C 54.0262,25.9358 54.4271,26.5773 54.4271,27.3125C 54.4271,28.2121 53.8269,28.9715 53.0051,29.2121C 52.6618,30.4358 52.1286,31.5191 51.4583,32.3856L 51.4583,36.5486C 53.6574,36.9884 55.4166,37.2083 58.0555,38.5278C 60.6944,39.8472 61.5741,41.0567 63.3333,42.816L 63.3333,49.0833L 53.3906,49.0833C 52.1176,47.7648 52.3265,47.9341 50.1389,46.8403 Z " />
          </DrawingImage.Drawing>
      </DrawingImage>

This will be applied to RadRibbonButton as follows:

<telerik:RadRibbonButton CollapseToSmall="WhenGroupIsMedium"
                                     telerik:KeyTipService.AccessText="X"
                                     telerik:ScreenTip.Description="Cut the selection from the document and put it on the Clipboard."
                                     telerik:ScreenTip.Title="Cut" Size="Large"
                                     LargeImage="{StaticResource MyCustomImage}"
                                     Text="Cut">
            </telerik:RadRibbonButton>

Please mind that we have predefined size for LargeImage -- 32x32px and SmallImage -- 16x16px. Whether you need bigger size (I saw that your Canvas is 76x76px) you can set the IsAutoSize property of the RadRibbonButton to False. This will automatically make the button's predefined image size NaN -- it will render as big as its dimensions are. Please note that RibbonView has strict Height and this might cause your image to be clipped (if the size of the image is bigger than the Height of the control). In this case you might change the default size with your custom one by setting the ContentHeight property as stated in our documentation. 

I hope this information helps.

Regards,
Evgenia
Telerik