如何实现类JIRA的WPF Menu Control？求模板重写方案

Hey there! I’ve built a few WPF controls that mimic JIRA’s navigation pattern, so I can share some practical insights here. Let’s start with your core question: don’t waste time trying to rewrite the standard WPF Menu template—it’s designed from the ground up for popup-style menus, and hacking it to take over a host container will lead to messy, hard-to-maintain code. Instead, use a simpler, more flexible approach tailored to your goal.

Here are the most straightforward solutions:

1. Custom Navigation Bar + ContentControl (No Frameworks Needed) #

This is the simplest approach if you’re not using a MVVM framework. You’ll create a custom menu bar (using buttons or an ItemsControl) and bind its selection to a ContentControl that hosts your pages.

Step 1: ViewModel Setup #

First, create a ViewModel to manage the current active view:

using System;
using System.ComponentModel;
using System.Runtime.CompilerServices;
using System.Windows.Input;
using Microsoft.Xaml.Behaviors.Core;

public class MainNavViewModel : INotifyPropertyChanged
{
    private object _currentView;
    public object CurrentView
    {
        get => _currentView;
        set
        {
            _currentView = value;
            OnPropertyChanged();
        }
    }

    public ICommand SwitchViewCommand { get; }

    public MainNavViewModel()
    {
        SwitchViewCommand = new RelayCommand<Type>(SwitchView);
        // Set default view
        CurrentView = new DashboardView();
    }

    private void SwitchView(Type viewType)
    {
        // Create a new instance of the target view
        CurrentView = Activator.CreateInstance(viewType);
    }

    public event PropertyChangedEventHandler PropertyChanged;
    protected void OnPropertyChanged([CallerMemberName] string propertyName = null)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}

Step 2: XAML Layout #

In your main window, set up the navigation bar and content host:

<Window x:Class="JiraNavDemo.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:JiraNavDemo"
        Title="JIRA-Style Nav" Height="450" Width="800">
    <Window.DataContext>
        <local:MainNavViewModel />
    </Window.DataContext>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <!-- Navigation Bar (Mimics JIRA's top menu) -->
        <StackPanel Grid.Row="0" Orientation="Horizontal" Background="#2D3B45">
            <Button Content="Dashboard" 
                    Command="{Binding SwitchViewCommand}"
                    CommandParameter="{x:Type local:DashboardView}"
                    Style="{StaticResource NavButtonStyle}"/>
            <Button Content="Issues" 
                    Command="{Binding SwitchViewCommand}"
                    CommandParameter="{x:Type local:IssuesView}"
                    Style="{StaticResource NavButtonStyle}"/>
            <Button Content="Projects" 
                    Command="{Binding SwitchViewCommand}"
                    CommandParameter="{x:Type local:ProjectsView}"
                    Style="{StaticResource NavButtonStyle}"/>
        </StackPanel>

        <!-- Content Host (Takes over the rest of the window) -->
        <ContentControl Grid.Row="1" Content="{Binding CurrentView}"/>
    </Grid>
</Window>

Step 3: Style the Navigation Buttons #

Add a style to make the buttons look like JIRA’s menu items:

<Window.Resources>
    <Style x:Key="NavButtonStyle" TargetType="Button">
        <Setter Property="Foreground" Value="#FFFFFF"/>
        <Setter Property="Background" Value="Transparent"/>
        <Setter Property="Padding" Value="18 12"/>
        <Setter Property="BorderThickness" Value="0"/>
        <Setter Property="FontSize" Value="14"/>
        <Style.Triggers>
            <Trigger Property="IsMouseOver" Value="True">
                <Setter Property="Background" Value="#384752"/>
            </Trigger>
            <Trigger Property="IsPressed" Value="True">
                <Setter Property="Background" Value="#0052CC"/>
            </Trigger>
        </Style.Triggers>
    </Style>
</Window.Resources>

2. Use MVVM Frameworks for Scalability #

If you’re building a larger app, frameworks like Prism or Caliburn.Micro make this even easier with region management. For example, with Prism:

• Register your views with a region (e.g., ContentRegion)
• Bind menu commands to switch the active view in the region
• This handles view lifecycle and decouples your navigation logic from UI elements

3. Hierarchical Menus (If You Need Submenus) #

If you need nested menu items (like JIRA’s project dropdowns), replace the StackPanel with a TreeView styled to look like a horizontal menu. Bind the TreeView to a hierarchical data model, and handle selection events to switch the content view.

Key Takeaway #

The standard WPF Menu control is not designed for your use case. By using a ContentControl paired with a custom navigation bar (or TreeView for hierarchies), you’ll get a clean, maintainable solution that exactly matches JIRA’s navigation behavior.

内容的提问来源于stack exchange，提问作者cwodarczyk82