|
1 | 1 | # How to set the image to Ribbon Button in WPF Ribbon control? |
2 | 2 |
|
3 | | -This sample show cases how to set the image to Ribbon Button in [WPF Ribbon](https://www.syncfusion.com/wpf-ui-controls/ribbon) control. |
| 3 | +This sample showcases how to set the image to Ribbon Button in [WPF Ribbon](https://www.syncfusion.com/wpf-ui-controls/ribbon) control. |
4 | 4 |
|
5 | | -The [WPF Ribbon](https://www.syncfusion.com/wpf-ui-controls/ribbon) control accommodates all the tools required for an application in a single, easy-to-navigate user interface like Microsoft Office. The built-in ribbon buttons provide basic functionalities like normal button and facilitates different options to customize ribbon button image size and its content. |
| 5 | +The WPF Ribbon control accommodates all the tools required for an application in a single, easy-to-navigate user interface like Microsoft Office. Ribbon buttons provide basic functionalities and allow customization of image size and layout. |
6 | 6 |
|
7 | | -KB article - [How to set the image to Ribbon Button in WPF Ribbon control?](https://www.syncfusion.com/kb/10778/how-to-working-with-ribbon-button-image-size-in-wpf-ribbon-control) |
| 7 | +--- |
| 8 | + |
| 9 | +## Working with Ribbon Button Image Size |
| 10 | +Ribbon items such as **RibbonButton**, **SplitButton**, and **DropDownButton** support image customization using `SizeForm` and `IconStretch` properties. |
| 11 | + |
| 12 | +### SizeForm Options: |
| 13 | +- **Large**: Large button with large image and text. |
| 14 | +- **Small**: Small button with small image and text. |
| 15 | +- **ExtraSmall**: Extra small button with image only. |
| 16 | + |
| 17 | +### IconStretch Options: |
| 18 | +- **Fill**: Image fills the destination without preserving aspect ratio. |
| 19 | +- **Uniform**: Image resizes uniformly to fit. |
| 20 | +- **UniformToFill**: Image resizes uniformly to fill. |
| 21 | +- **None**: Original image size is preserved. |
| 22 | + |
| 23 | +Example: |
| 24 | +```xml |
| 25 | +<syncfusion:RibbonButton Label="Save" SizeForm="Large" IconStretch="Uniform" LargeIcon="Images/save32.png" /> |
| 26 | +``` |
| 27 | + |
| 28 | +--- |
| 29 | + |
| 30 | +## Adaptive Ribbon Layout |
| 31 | +The ribbon control dynamically resizes as the window width changes. Items switch from **Large** → **Small** → **ExtraSmall**, and finally collapse into a dropdown. |
| 32 | + |
| 33 | +Enable responsive resizing: |
| 34 | +```xml |
| 35 | +IsAutoSizeFormEnabled="True" CollapseImage="Images/collapse.png" |
| 36 | +``` |
| 37 | + |
| 38 | +--- |
| 39 | + |
| 40 | +For more details, refer to [KB Article](https://support.syncfusion.com/kb/article/9426/how-to-working-with-ribbon-button-image-size-in-wpf-ribbon-control). |
| 41 | + |
| 42 | + |
| 43 | +## Documentation |
| 44 | +- [KB Article](https://support.syncfusion.com/kb/article/9426/how-to-working-with-ribbon-button-image-size-in-wpf-ribbon-control) |
| 45 | +- [Syncfusion WPF Ribbon Documentation](https://help.syncfusion.com/wpf/ribbon/gettingstarted#add-ribbonbutton) |
0 commit comments