WPF中的Ribbon-Like控件

Question

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?

_{(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.

Answer 1

Word uses the Ribbons.

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

Answer 2

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.

Answer 3

我自己没有尝试过，但WPF“ Fluent Ribbon Control Suite ”本周早些时候被添加到Visual Studio Gallery中。

Answer 4

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:

then add this namespace into the xaml file:

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>