Управление в виде ленты в WPF

Question

Я пытаюсь создать несколько раскрывающихся списков для панели инструментов и хочу, чтобы они выглядели как раскрывающиеся списки «Макет страницы» в Word (например, меню «Ориентация» и «Размер»).

Я пытался сделать это с помощью ComboBox, но я не могу понять, как отобразить имя опции, а не выбранный элемент в верхней части ComboBox. Можно ли заставить ComboBox показывать то, что вы хотите, чтобы оно было вверху?

Должен ли я попытаться сделать это с помощью ComboBox или есть лучший способ сделать это?

_{(источник: mstipsandtricks.com )}

РЕДАКТИРОВАТЬ: Похоже, мне нужен элемент управления ленты. Могу ли я сделать простой из ComboBox? Кажется, я близок, мне просто нужно иметь возможность отображать категорию в ComboBox вместо выбранного элемента.

Answer 1

Word использует ленты.

Вот проект WPF Ribbons . Это позволит вам делать то, что вы ищете.

Answer 2

Я сам не пробовал, но WPF " Fluent Ribbon Control Suite " был добавлен в галерею Visual Studio ранее на этой неделе.

Answer 3

Вы можете построить это, используя поле со списком, если хотите, взгляните на пример ComboBox ControlTemplate по адресу: http://msdn.microsoft.com/en-us/library/ms752094.aspx

На этой странице видно, что поле со списком состоит из переключателя, всплывающего окна, текстового поля и средства представления содержимого (в зависимости от режима со списком отображается только один из двух последних).

Вы можете удалить текстовое поле и средство представления содержимого из шаблона комбинированного списка и заменить их на все, что захотите, например большой значок и имя параметра.

Вы также можете использовать ту же технику для кнопки-переключателя, привязанной к всплывающему окну, чтобы создать свой собственный (не комбинированный) выпадающий элемент управления.

Answer 4

Вот пример того, как использовать ленту, написав код xaml. это очень легко, когда ты привыкнешь.

сначала добавьте эту ссылку:

затем добавьте это пространство имен в файл xaml:

и теперь используйте этот шаблон кода для работы с:

<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>

если вы хотите скрыть <Ribbon.ApplicationMenu>, просто добавьте следующее свойство: <Ribbon.ApplicationMenu> <RibbonApplicationMenu Visibility="Collapsed"> </RibbonApplicationMenu> </Ribbon.ApplicationMenu>