C# WPF中的图标菜单

我想做一份如图所示的菜单

我很不知道从哪里开始

---

请指导我如何制作这样的菜单。首先，您需要为按钮创建一个

样式
，该按钮将存储图像，可能是理想的图像和文本。例如，您可以看到我的答案：


第二，您可以将所有按钮放置在
WrapPanel
或中

带有
WrapPanel
的示例：

<WrapPanel>
    <Button Margin="5">1</Button>
    <Button Margin="5">2</Button>
    <Button Margin="5">3</Button>
    <Button Margin="5">4</Button>
    <Button Margin="5">5</Button>
</WrapPanel>


1.
2.
3.
4.
5.

输出

您可以按如下方式使用StackLPanel：

<StackPanel Orientation=Horizontal>
    <Button Margin="5">
       <StackPanel Orientation=Vertical>
           <Image source="HomeImageSourcePath"/>
           <TextBlock Text="Home"/>
       </StackPanel>
    </Button>

    <Button Margin="5">
       <StackPanel Orientation=Vertical>
           <Image source="EmployeesImageSourcePath"/>
           <TextBlock Text="Employees"/>
       </StackPanel>
    </Button>  

    ....
    ....

</StackPanel>


....
....
如果您希望菜单具有如图所示的下拉菜单


下面是该项对应的Xaml

                    <Menu>
                        <MenuItem ItemsSource="{Binding AgeSelectors}" ItemsPanel="{StaticResource MenuItemPanelTemplate}"  ToolTip="Select which items are included/excluded in the view" Foreground="Wheat">
                            <MenuItem.Header>
                                <StackPanel>
                                    <Image Source="Resources/Images/Tango/appointment-new.png" />
                                    <TextBlock Text="Age" Foreground="Navy"/>
                                </StackPanel>
                            </MenuItem.Header>
                            <MenuItem.ItemTemplate>
                                <DataTemplate>
                                    <MenuItem IsCheckable="True" 
                                          IsChecked="{Binding IsChecked, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
                                          >
                                        <MenuItem.Header>
                                            <StackPanel Orientation="Horizontal">
                                                <TextBlock Text="{Binding Description}"/>
                                            </StackPanel>
                                        </MenuItem.Header>
                                    </MenuItem>
                                </DataTemplate>
                            </MenuItem.ItemTemplate>
                        </MenuItem>
                    </Menu>



它显示了带有下拉菜单的“年龄”按钮，可通过复选框打开或关闭选项。诸如“Last hour”、“Last 3 hours”等各种选项都绑定到视图模型中的可观察集合。Xaml包含一个包含菜单项的WPF菜单，用户体验到一种正确的“菜单行为”

对于一个没有下拉列表的Xaml片段，“刷新”项的样式如下

                    <Menu>
                        <MenuItem Command="{Binding RefreshCommand}" ToolTip="Connect to the net and get news" Foreground="Wheat">
                            <MenuItem.Header>
                                <StackPanel >
                                    <Image Source="Resources/Images/Tango/view-refresh.png" />
                                    <TextBlock VerticalAlignment="Center" Text="Refresh" Foreground="Navy"/>
                                </StackPanel>
                            </MenuItem.Header>
                        </MenuItem>
                    </Menu>



其他人指出，这些项目可以安排在一个水平面板中。在我的例子中，我使用WPF工具栏来包含菜单项。它提供了添加到菜单效果的夹点和撕裂提示

工具栏声明是这样开始的

        <Border DockPanel.Dock="Top" BorderBrush="Navy" BorderThickness="2,0,2,0">
            <ToolBarTray DockPanel.Dock="Top" Background="Transparent" HorizontalAlignment="Stretch">



工具栏可以设置为渐变背景（如图像）或位图背景。最后，“MenuItemPanelTemplate”的Xaml是



（我从这里得到的）

因此，最终的选择取决于项目是否应该有下拉列表以及您想要达到的总体效果
 首先查看ItemsControl和DataTemplates。这就是你完成菜单所需要的。你需要像这样（用图像）创建，还是只需要网格布局？@harshanaNarangoda我想用图像创建它
                    <ItemsPanelTemplate x:Key="MenuItemPanelTemplate">
                        <StackPanel Margin="-20,0,0,0" Background="White"/>
                    </ItemsPanelTemplate>