WPF中的标志性菜单

Question

我想制作图片中给出的菜单。

我很困惑我应该从哪里开始。

请指导我一些教程如何制作这样的菜单

Answer 1

如果你希望你的菜单有像这张图片中的下拉菜单......

以下是该项目的相应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>

它显示带有下拉列表的“年龄”按钮，其中可以使用复选框打开或关闭选项。 “最后一小时”，“最近3小时”等各种选项绑定到视图模型中的可观察集合。 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是......

                    <ItemsPanelTemplate x:Key="MenuItemPanelTemplate">
                        <StackPanel Margin="-20,0,0,0" Background="White"/>
                    </ItemsPanelTemplate>

（我从这里得到）

因此，最终的选择取决于项目是否应该具有下拉和您想要实现的整体效果。

Answer 2

首先，您需要为将存储图像的按钮创建Style，可能是理想的Path和文本。举个例子，你可以看到我的答案：

WPF C# button style

其次，您可以将所有按钮放在WrapPanel或ItemsControl中。

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>

Output

Answer 3

您可以使用如下的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>