CODEWITHSUNDEEP
.netwpfwpf-controls
Seth Moore
Seth Moore

Reputation: 3545

Ribbon-Like Control in WPF

I'm trying to create some drop-downs for a toolbar and want them to look like the Page Layout drop-downs in Word (such as the Orientation and Size menus).

I've attempted to do this using a ComboBox, but I can't figure out how to show the option name, rather than the selected item at the top of the ComboBox. Is it possible to make the ComboBox show whatever you want it to at the top?

Should I be trying to do this with a ComboBox or is there a better way to go about this?

alt text
(source: mstipsandtricks.com)

EDIT: It looks like I need a Ribbon control. Can I make a simple one out of a ComboBox? It seems like I'm close, I just need to be able to display a category in the ComboBox instead of the selected item.

Upvotes: 2

Views: 1209

Answers (4)

Tinaira
Tinaira

Reputation: 877

here is an example how to use ribbon by writing xaml code. it's very easy once you get used to it.

first add this reference: enter image description here

then add this namespace into the xaml file:

enter image description here

and now use this code template to work with:

<DockPanel>
    <ribbon:Ribbon DockPanel.Dock="Top" Margin="0,-22,0,0">

        <Ribbon.ApplicationMenu>
            <RibbonApplicationMenu SmallImageSource="Images/list.png">

                <RibbonApplicationMenu.AuxiliaryPaneContent>
                    <RibbonGallery ScrollViewer.VerticalScrollBarVisibility="Auto">
                        <RibbonGalleryCategory MaxColumnCount="1">
                            <RibbonGalleryItem x:Name="GalleryItem1" Content="C# developer" 
                                MouseOverBackground="Transparent"
                                MouseOverBorderBrush="Transparent"
                                CheckedBackground="Transparent"
                                CheckedBorderBrush="Transparent"
                                               />
                            <RibbonGalleryItem>
                                <Hyperlink x:Name="hl1" Click="hl1_Click">
                                    <Run Text="http://www.bing.com"/>
                                </Hyperlink>
                            </RibbonGalleryItem>
                        </RibbonGalleryCategory>
                    </RibbonGallery>
                </RibbonApplicationMenu.AuxiliaryPaneContent>
                <RibbonApplicationMenuItem x:Name="menuItem1" Header="Add" ImageSource="Images/add.png"/>
                <RibbonApplicationMenuItem x:Name="menuItem2" Header="Settings"
                                           ImageSource="Images/system_preferences.png"/>

            </RibbonApplicationMenu>
        </Ribbon.ApplicationMenu>
        <!--Rider-->
        <RibbonTab x:Name="rbnTab1" Header="Tab1">
            <RibbonGroup x:Name="rbnGr1" Header="General">
                <RibbonButton x:Name="btnRibbon1" Label="Save" LargeImageSource="Images/filesave.png"/>
                <RibbonButton x:Name="btnRibbon2" Label="Open" LargeImageSource="Images/load.png"/>
            </RibbonGroup>
            <RibbonGroup x:Name="rbnGr2" Header="New group">
                <RibbonButton x:Name="btnRibbon3" Label="Font" LargeImageSource="Images/fonts.png"/>
                <RibbonButton x:Name="btnRibbon4" Label="Delete" LargeImageSource="Images/recycle_bin.png"/>
            </RibbonGroup>
        </RibbonTab>
        <RibbonTab x:Name="rbnTab2" Header="Tab2">
            <RibbonGroup x:Name="rbnGr3" Header="Other Group">
                <RibbonButton x:Name="btnRibbon5" Label="Play" LargeImageSource="Images/play.png"/>
                <RibbonButton x:Name="btnRibbon6" Label="List" LargeImageSource="Images/kmenuedit.png"/>
            </RibbonGroup>
            <RibbonGroup x:Name="rbnGr4" Header="What a group">
                <RibbonButton x:Name="btnRibbon7" Label="Sleep" LargeImageSource="Images/icon_sleep.png"/>
                <RibbonButton x:Name="btnRibbon8" Label="Add" LargeImageSource="Images/add.png"/>
            </RibbonGroup>
        </RibbonTab>
    </ribbon:Ribbon>

    <Grid>
        <Button x:Name="button" Content="Button" HorizontalAlignment="Left" VerticalAlignment="Top" Width="75"/>

    </Grid>
</DockPanel>

if you want to hide the <Ribbon.ApplicationMenu> just add the following property: <Ribbon.ApplicationMenu> <RibbonApplicationMenu Visibility="Collapsed"> </RibbonApplicationMenu> </Ribbon.ApplicationMenu>

Upvotes: 0

Brian Schroer
Brian Schroer

Reputation: 443

I haven't tried it myself, but the WPF "Fluent Ribbon Control Suite" was added to the Visual Studio Gallery earlier this week.

Upvotes: 2

Nir
Nir

Reputation: 29614

You can build this using a combo box if you want, take a look at the ComboBox ControlTemplate example at: http://msdn.microsoft.com/en-us/library/ms752094.aspx

You can see in that page that the combobox is composed of a toggle button, a popup, a text box and a content presenter (only one of the last two is visible, depending on the combobox mode).

You can remove the text box and the content presenter from the combobox template and replace them with whatever you want - for example, a big icon and the option name.

You can also use the same technique of toggle button bound to a popup to create your own (non-combobox) drop down control.

Upvotes: 2

David Basarab
David Basarab

Reputation: 73351

Word uses the Ribbons.

Here is the WPF Ribbons project. This will have a way to do what you are looking for.

Upvotes: 4

Related Questions