New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

Application Menu

  • Menu
  • Home
Item ImagePaste 
  • Item ImagePaste
  • Item ImagePaste from
Item ImageCutItem ImageCopy
Clipboard
Item ImageSelect 
  • Item ImageRectangular selection
  • Item ImageFree-form selection
Item ImageCropItem ImageResizeItem ImageRotate 
Image
Item ImageItem ImageItem ImageItem ImageItem ImageItem Image
Tools
Item ImageBrushes 
  • Item ImagePencil
  • Item ImageCrayon
  • Item ImageMarker
  • Item ImageOil
  • Item ImageWatercolor
Brushes
  • imageLine
  • imageCurve
  • imageOval
  • imageRectangle
  • imageRounded rectangle
  • imagePolygon
  • imageTriangle
  • imageRight triangle
  • imageDiamond
  • imagePentagon
  • imageHexagon
  • imageRight arrow
  • imageLeft arrow
  • imageUp arrow
  • imageDown arrow
  • imageFour-point star
  • imageFive-point star
  • imageSix-point star
  • imageRounded rectangular callout
  • imageOval callout
  • imageCloud callout
  • imageHeart
  • imageLightning
Shapes
Item ImageOutline 
Item ImageFill 
Colors

With the RibbonBarApplicationMenu, you can enrich the RibbonBar experiences of your pages having RadRibbonBar by adding a list of 'application commands' to the tab row of the control. These commands are contained in a drop down, which opens when clicking on the first 'tab' of the RibbonBar. The commands have Text and ImageUrl properties.

As of Q2 2013 the RibbonBarApplicationMenu has been updated to meet the newest Microsoft specifications. Along with the new look the ApplicationMenu has some new features, including a new type of item - RibbonBarApplicationSplitMenuItem, a FooterPane and AuxiliaryPane, which will help you easily style the Application menu to fit your design specifications.

Note that as the purpose of the demo is to show how you can build your ribbon menu using the features of RadRibbonBar, the actual functionality of the buttons for image editing is not implemented.

  • DefaultCS.aspx
  • styles.css
<%@ Page AutoEventWireup="true"  %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>

<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <link href="styles.css" rel="stylesheet" />
</head>

<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <div class="demo-container">
        <telerik:RadRibbonBar RenderMode="Lightweight" runat="server" ID="RadRibbonBar1" Skin="Windows7" Width="860px">
            <ApplicationMenu Text="Menu">
                <Items>
                    <telerik:RibbonBarApplicationMenuItem Text="New" ImageUrl="images/AppMenu/New.png" />
                    <telerik:RibbonBarApplicationMenuItem Text="Open" ImageUrl="images/AppMenu/Open.png" />
                    <telerik:RibbonBarApplicationMenuItem Text="Save" ImageUrl="images/AppMenu/Save.png" />
                    <telerik:RibbonBarApplicationSplitMenuItem Text="Save as" ImageUrl="images/AppMenu/Save_as.png" Header="Save as">
                        <Items>
                            <telerik:RibbonBarApplicationMenuItem Text="PNG picture" ImageUrl="images/AppMenu/SaveAs/PNG_Picture.png" 
                                Description="Save a photo or drawing with high quality and use it on your computer or on the web."/>
                            <telerik:RibbonBarApplicationMenuItem Text="JPEG picture" ImageUrl="images/AppMenu/SaveAs/JPEG_Picture.png" 
                                Description="Save a photo with good quality and use it on your computer, in e-mail, or on the web."/>
                            <telerik:RibbonBarApplicationMenuItem Text="BMP picture" ImageUrl="images/AppMenu/SaveAs/BMP_Picture.png" 
                                Description="Save any kind of picture with high quality and use it on your computer."/>
                            <telerik:RibbonBarApplicationMenuItem Text="GIF picture" ImageUrl="images/AppMenu/SaveAs/GIF_Picture.png" 
                                Description="Save a simple drawing with lower quality and use it in e-mail or on the web."/>
                            <telerik:RibbonBarApplicationMenuItem Text="Other formats" ImageUrl="images/AppMenu/Save.png" 
                                Description="Open the Save As dialog box to select from all possible file types."/>
                        </Items>
                    </telerik:RibbonBarApplicationSplitMenuItem>
                    <telerik:RibbonBarApplicationSplitMenuItem Text="Print" ImageUrl="images/AppMenu/Print.png" Header="Print">
                        <Items>
                            <telerik:RibbonBarApplicationMenuItem Text="Print" ImageUrl="images/AppMenu/Print.png" 
                                Description="Select a printer, number of copies, and other printing options before printing."/>
                            <telerik:RibbonBarApplicationMenuItem Text="Page setup" ImageUrl="images/AppMenu/Print/Page_setup.png" 
                                Description="Change the layout of the picture."/>
                            <telerik:RibbonBarApplicationMenuItem Text="Print preview" ImageUrl="images/AppMenu/Print/Print_preview.png" 
                                Description="Preview and make changes before printing."/>
                        </Items>
                    </telerik:RibbonBarApplicationSplitMenuItem>
                    <telerik:RibbonBarApplicationMenuItem Text="From camera" ImageUrl="images/AppMenu/From_camera.png" />
                        <telerik:RibbonBarApplicationMenuItem Text="Send in e-mail" ImageUrl="images/AppMenu/Send_email.png" />
                    <telerik:RibbonBarApplicationSplitMenuItem Text="Set as background" ImageUrl="images/AppMenu/Set_as_background.png" Header="Set as desctop background">
                        <Items>
                            <telerik:RibbonBarApplicationMenuItem Text="Fill" ImageUrl="images/AppMenu/SetAsBackground/Fill.png" 
                                Description="Fill the entire screen with the picture."/>
                            <telerik:RibbonBarApplicationMenuItem Text="Tile" ImageUrl="images/AppMenu/SetAsBackground/Tile.png" 
                                Description="Tile the picture so it repeats and fills the entire screen."/>
                            <telerik:RibbonBarApplicationMenuItem Text="Center" ImageUrl="images/AppMenu/SetAsBackground/Center.png" 
                                Description="Center the picture in the middle of the screen."/>
                        </Items>
                    </telerik:RibbonBarApplicationSplitMenuItem>
                    <telerik:RibbonBarApplicationMenuItem Text="Exit" ImageUrl="images/AppMenu/Exit.png" />
                </Items>
                <AuxiliaryPane Header="Recent pictures">
                    <ContentTemplate>
                        <ol>
                            <li>Powder.jpg</li>
                            <li>Free jump.jpg</li>
                            <li>Downhill.jpg</li>
                            <li>Snowboarding.jpg</li>
                            <li>Moutain top.jpg</li>
                        </ol>
                    </ContentTemplate>
                </AuxiliaryPane>
                <FooterPane>
                    <ContentTemplate>Skiing.png</ContentTemplate>
                </FooterPane>
            </ApplicationMenu>
            <Tabs>
                <telerik:RibbonBarTab Text="Home">
                    <telerik:RibbonBarGroup Text="Clipboard">
                        <Items>
                            <telerik:RibbonBarSplitButton Text="Paste" Size="Large" ImageUrlLarge="images/Clipboard/Paste.png" ImageRenderingMode="Auto">
                                <Buttons>
                                    <telerik:RibbonBarButton Text="Paste" ImageUrl="images/Clipboard/Paste.png"/>
                                    <telerik:RibbonBarButton Text="Paste from" ImageUrl="images/Clipboard/Paste.png"/>
                                </Buttons>
                            </telerik:RibbonBarSplitButton>
                            <telerik:RibbonBarButton Text="Cut" Size="Medium" ImageUrl="images/Clipboard/Cut.png"/>
                            <telerik:RibbonBarButton Text="Copy" Size="Medium" ImageUrl="images/Clipboard/Copy.png"/>
                        </Items>
                    </telerik:RibbonBarGroup>
                    <telerik:RibbonBarGroup Text="Image">
                        <Items>
                            <telerik:RibbonBarSplitButton Text="Select" Size="Large" EnableButtonSelection="true">
                                <Buttons>
                                    <telerik:RibbonBarButton Text="Rectangular selection" ImageUrl="images/Image/Rectangular_selection.png" />
                                    <telerik:RibbonBarButton Text="Free-form selection" ImageUrl="images/Image/Free_form_selection.png" />
                                </Buttons>
                            </telerik:RibbonBarSplitButton>
                            <telerik:RibbonBarButton Text="Crop" Size="Medium" ImageUrl="images/Image/Crop.png" />
                            <telerik:RibbonBarButton Text="Resize" Size="Medium" ImageUrl="images/Image/Resize.png" />
                            <telerik:RibbonBarMenu Text="Rotate" Size="Medium" ImageUrl="images/Image/Rotate_right.png">
                                <Items>
                                    <telerik:RibbonBarMenuItem ImageUrl="images/Image/Rotate_right.png" Text="Rotate right 90°"></telerik:RibbonBarMenuItem>
                                    <telerik:RibbonBarMenuItem ImageUrl="images/Image/Rotate_left.png" Text="Rotate left 90°"></telerik:RibbonBarMenuItem>
                                    <telerik:RibbonBarMenuItem ImageUrl="images/Image/Flip.png" Text="Rotate 180°"></telerik:RibbonBarMenuItem>
                                    <telerik:RibbonBarMenuItem ImageUrl="images/Image/Flip_vertical.png" Text="Flip vertical"></telerik:RibbonBarMenuItem>
                                    <telerik:RibbonBarMenuItem ImageUrl="images/Image/Flip_horizontal.png" Text="Flip horizontal"></telerik:RibbonBarMenuItem>
                                </Items>
                            </telerik:RibbonBarMenu>
                        </Items>
                    </telerik:RibbonBarGroup>
                    <telerik:RibbonBarGroup Text="Tools">
                        <Items>
                            <telerik:RibbonBarToggleList>
                                <ToggleButtons>
                                    <telerik:RibbonBarToggleButton ImageUrl="images/Tools/Pencil.png" Text="Pencil" />
                                    <telerik:RibbonBarToggleButton ImageUrl="images/Tools/Fill_with_color.png" Text="Fill with color" />
                                    <telerik:RibbonBarToggleButton ImageUrl="images/Tools/Text.png" Text="Text" />
                                    <telerik:RibbonBarToggleButton ImageUrl="images/Tools/Eraser.png" Text="Eraser" />
                                    <telerik:RibbonBarToggleButton ImageUrl="images/Tools/Color_picker.png" Text="Color picker" />
                                    <telerik:RibbonBarToggleButton ImageUrl="images/Tools/Magnifier.png" Text="Magnifier" />
                                </ToggleButtons>
                            </telerik:RibbonBarToggleList>
                        </Items>
                    </telerik:RibbonBarGroup>
                    <telerik:RibbonBarGroup Text="Brushes">
                        <Items>
                            <telerik:RibbonBarSplitButton Size="Large" EnableButtonSelection="true" Text="Brushes">
                                <Buttons>
                                    <telerik:RibbonBarButton ImageUrl="images/Brushes/Pencil.png" Text="Pencil"></telerik:RibbonBarButton>
                                    <telerik:RibbonBarButton ImageUrl="images/Brushes/Crayon.png" Text="Crayon"></telerik:RibbonBarButton>
                                    <telerik:RibbonBarButton ImageUrl="images/Brushes/Marker.png" Text="Marker"></telerik:RibbonBarButton>
                                    <telerik:RibbonBarButton ImageUrl="images/Brushes/Oil.png" Text="Oil"></telerik:RibbonBarButton>
                                    <telerik:RibbonBarButton ImageUrl="images/Brushes/Watercolor.png" Text="Watercolor"></telerik:RibbonBarButton>
                                </Buttons>
                            </telerik:RibbonBarSplitButton>
                        </Items>
                    </telerik:RibbonBarGroup>
                    <telerik:RibbonBarGroup Text="Shapes">
                        <Items>
                            <telerik:RibbonBarGallery ItemHeight="16" ItemWidth="16" Columns="7" ExpandedColumns="7">
                                <telerik:RibbonBarGalleryCategory>
                                    <telerik:RibbonBarGalleryItem ImageUrl="images/Shapes/Line.png" Text="Line" />
                                    <telerik:RibbonBarGalleryItem ImageUrl="images/Shapes/Curve.png" Text="Curve" />
                                    <telerik:RibbonBarGalleryItem ImageUrl="images/Shapes/Oval.png" Text="Oval" />
                                    <telerik:RibbonBarGalleryItem ImageUrl="images/Shapes/Rectangle.png" Text="Rectangle" />
                                    <telerik:RibbonBarGalleryItem ImageUrl="images/Shapes/Rounded_rectangle.png" Text="Rounded rectangle" />
                                    <telerik:RibbonBarGalleryItem ImageUrl="images/Shapes/Polygon.png" Text="Polygon" />
                                    <telerik:RibbonBarGalleryItem ImageUrl="images/Shapes/Triangle.png" Text="Triangle" />
                                    <telerik:RibbonBarGalleryItem ImageUrl="images/Shapes/Right_triangle.png" Text="Right triangle" />
                                    <telerik:RibbonBarGalleryItem ImageUrl="images/Shapes/Diamond.png" Text="Diamond" />
                                    <telerik:RibbonBarGalleryItem ImageUrl="images/Shapes/Pentagon.png" Text="Pentagon" />
                                    <telerik:RibbonBarGalleryItem ImageUrl="images/Shapes/Hexagon.png" Text="Hexagon" />
                                    <telerik:RibbonBarGalleryItem ImageUrl="images/Shapes/Right_arrow.png" Text="Right arrow" />
                                    <telerik:RibbonBarGalleryItem ImageUrl="images/Shapes/Left_arrow.png" Text="Left arrow" />
                                    <telerik:RibbonBarGalleryItem ImageUrl="images/Shapes/Up_arrow.png" Text="Up arrow" />
                                    <telerik:RibbonBarGalleryItem ImageUrl="images/Shapes/Down_arrow.png" Text="Down arrow" />
                                    <telerik:RibbonBarGalleryItem ImageUrl="images/Shapes/Four_point_star.png" Text="Four-point star" />
                                    <telerik:RibbonBarGalleryItem ImageUrl="images/Shapes/Five_point_star.png" Text="Five-point star" />
                                    <telerik:RibbonBarGalleryItem ImageUrl="images/Shapes/Six_point_star.png" Text="Six-point star" />
                                    <telerik:RibbonBarGalleryItem ImageUrl="images/Shapes/Rounded_rectangular_callout.png" Text="Rounded rectangular callout" />
                                    <telerik:RibbonBarGalleryItem ImageUrl="images/Shapes/Oval_callout.png" Text="Oval callout" />
                                    <telerik:RibbonBarGalleryItem ImageUrl="images/Shapes/Cloud_callout.png" Text="Cloud callout" />
                                    <telerik:RibbonBarGalleryItem ImageUrl="images/Shapes/Heart.png" Text="Heart" />
                                    <telerik:RibbonBarGalleryItem ImageUrl="images/Shapes/Lightning.png" Text="Lightning" />
                                </telerik:RibbonBarGalleryCategory>
                            </telerik:RibbonBarGallery>
                        </Items>
                    </telerik:RibbonBarGroup>
                    <telerik:RibbonBarGroup Text="Colors">
                        <Items>
                            <telerik:RibbonBarControlGroup Orientation="Vertical">
                                <telerik:RibbonBarMenu Text="Outline" Size="Medium" ImageUrl="images/Colors/Outline.png">
                                    <Items>
                                        <telerik:RibbonBarMenuItem ImageUrl="images/Colors/No_outline.png" Text="No outline"></telerik:RibbonBarMenuItem>
                                        <telerik:RibbonBarMenuItem ImageUrl="images/Colors/Solid_color.png" Text="Solid color"></telerik:RibbonBarMenuItem>
                                        <telerik:RibbonBarMenuItem ImageUrl="images/Colors/Crayon.png" Text="Crayon"></telerik:RibbonBarMenuItem>
                                        <telerik:RibbonBarMenuItem ImageUrl="images/Colors/Marker.png" Text="Marker"></telerik:RibbonBarMenuItem>
                                        <telerik:RibbonBarMenuItem ImageUrl="images/Colors/Oil.png" Text="Oil"></telerik:RibbonBarMenuItem>
                                        <telerik:RibbonBarMenuItem ImageUrl="images/Colors/Natural_pencil.png" Text="Natural pencil"></telerik:RibbonBarMenuItem>
                                        <telerik:RibbonBarMenuItem ImageUrl="images/Colors/Watercolor.png" Text="Watercolor"></telerik:RibbonBarMenuItem>
                                    </Items>
                                </telerik:RibbonBarMenu>
                                <telerik:RibbonBarMenu Text="Fill" Size="Medium" ImageUrl="images/Colors/Fill.png">
                                    <Items>
                                        <telerik:RibbonBarMenuItem ImageUrl="images/Colors/No_outline.png" Text="No fill"></telerik:RibbonBarMenuItem>
                                        <telerik:RibbonBarMenuItem ImageUrl="images/Colors/Solid_color.png" Text="Solid color"></telerik:RibbonBarMenuItem>
                                        <telerik:RibbonBarMenuItem ImageUrl="images/Colors/Crayon.png" Text="Crayon"></telerik:RibbonBarMenuItem>
                                        <telerik:RibbonBarMenuItem ImageUrl="images/Colors/Marker.png" Text="Marker"></telerik:RibbonBarMenuItem>
                                        <telerik:RibbonBarMenuItem ImageUrl="images/Colors/Oil.png" Text="Oil"></telerik:RibbonBarMenuItem>
                                        <telerik:RibbonBarMenuItem ImageUrl="images/Colors/Natural_pencil.png" Text="Natural pencil"></telerik:RibbonBarMenuItem>
                                        <telerik:RibbonBarMenuItem ImageUrl="images/Colors/Watercolor.png" Text="Watercolor"></telerik:RibbonBarMenuItem>
                                    </Items>
                                </telerik:RibbonBarMenu>
                                <telerik:RibbonBarColorPicker></telerik:RibbonBarColorPicker>
                            </telerik:RibbonBarControlGroup>
                        </Items>
                    </telerik:RibbonBarGroup>
                </telerik:RibbonBarTab>
            </Tabs>
        </telerik:RadRibbonBar>
    </div>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance