如何利用Telerik RadRibbonView实现点击按钮切换下方内容的导航功能？

我之前也碰到过一模一样的需求——RadRibbonView本身确实没有内置的导航组件，但我们可以结合WPF的基础控件轻松实现点击按钮切换下方内容的功能，下面分享两种常用的实现方案：

方法一：MVVM风格（推荐） #

这种方式耦合度低，更符合现代WPF开发的最佳实践：

1. 搭建基础ViewModel框架
   先实现一个ViewModelBase来处理属性变更通知，再创建主ViewModel管理导航逻辑：

public class ViewModelBase : INotifyPropertyChanged
{
    public event PropertyChangedEventHandler PropertyChanged;
    protected void OnPropertyChanged(string propName)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propName));
    }
}

public class MainViewModel : ViewModelBase
{
    private ViewModelBase _currentView;
    public ViewModelBase CurrentView
    {
        get => _currentView;
        set { _currentView = value; OnPropertyChanged(nameof(CurrentView)); }
    }

    public ICommand NavigateCommand { get; }

    public MainViewModel()
    {
        NavigateCommand = new RelayCommand<Type>(Navigate);
        // 默认加载第一个页面
        CurrentView = new AppDatabaseViewModel();
    }

    private void Navigate(Type viewModelType)
    {
        CurrentView = (ViewModelBase)Activator.CreateInstance(viewModelType);
    }
}

// 简易RelayCommand实现
public class RelayCommand<T> : ICommand
{
    private readonly Action<T> _execute;
    private readonly Func<T, bool> _canExecute;

    public event EventHandler CanExecuteChanged;

    public RelayCommand(Action<T> execute, Func<T, bool> canExecute = null)
    {
        _execute = execute ?? throw new ArgumentNullException(nameof(execute));
        _canExecute = canExecute;
    }

    public bool CanExecute(object parameter) => _canExecute?.Invoke((T)parameter) ?? true;
    public void Execute(object parameter) => _execute((T)parameter);
}

2. 创建对应视图与ViewModel
   为每个导航目标创建独立的View（比如AppDatabaseView.xaml、ServerSetupView.xaml）和对应的ViewModel（AppDatabaseViewModel、ServerSetupViewModel）。

3. 修改XAML布局
   将RadRibbonView放在上方，下方用ContentControl绑定当前ViewModel，通过DataTemplate自动匹配View：

<Window.DataContext>
    <local:MainViewModel />
</Window.DataContext>
<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>

    <!-- RadRibbonView区域 -->
    <te:RadRibbonView Grid.Row="0">
        <te:RadRibbonTab Header="Smart Objects" x:Name="SmartObjectsTab">
            <te:RadRibbonGroup Width="Auto">
                <te:RadRibbonButton Content="App Database" 
                                    Command="{Binding NavigateCommand}"
                                    CommandParameter="{x:Type local:AppDatabaseViewModel}" />
                <te:RadRibbonButton Content="Server Setup" 
                                    Command="{Binding NavigateCommand}"
                                    CommandParameter="{x:Type local:ServerSetupViewModel}" />
                <te:RadRibbonButton Content="About" 
                                    Command="{Binding NavigateCommand}"
                                    CommandParameter="{x:Type local:AboutViewModel}" />
                <te:RadRibbonButton Content="Help" 
                                    Command="{Binding NavigateCommand}"
                                    CommandParameter="{x:Type local:HelpViewModel}" />
            </te:RadRibbonGroup>
        </te:RadRibbonTab>
    </te:RadRibbonView>

    <!-- 内容切换区域 -->
    <ContentControl Grid.Row="1" Content="{Binding CurrentView}">
        <ContentControl.Resources>
            <DataTemplate DataType="{x:Type local:AppDatabaseViewModel}">
                <local:AppDatabaseView />
            </DataTemplate>
            <DataTemplate DataType="{x:Type local:ServerSetupViewModel}">
                <local:ServerSetupView />
            </DataTemplate>
            <DataTemplate DataType="{x:Type local:AboutViewModel}">
                <local:AboutView />
            </DataTemplate>
            <DataTemplate DataType="{x:Type local:HelpViewModel}">
                <local:HelpView />
            </DataTemplate>
        </ContentControl.Resources>
    </ContentControl>
</Grid>

方法二：传统代码后台方式 #

如果项目更偏向于快速实现，用Frame配合代码后台也很直接：

1. 调整XAML布局
   在RadRibbonView下方添加Frame控件：

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>

    <te:RadRibbonView Grid.Row="0">
        <te:RadRibbonTab Header="Smart Objects" x:Name="SmartObjectsTab">
            <te:RadRibbonGroup Width="Auto">
                <te:RadRibbonButton Content="App Database" Click="AppDatabaseBtn_Click" />
                <te:RadRibbonButton Content="Server Setup" Click="ServerSetupBtn_Click" />
                <te:RadRibbonButton Content="About" Click="AboutBtn_Click" />
                <te:RadRibbonButton Content="Help" Click="HelpBtn_Click" />
            </te:RadRibbonGroup>
        </te:RadRibbonTab>
    </te:RadRibbonView>

    <Frame x:Name="ContentFrame" Grid.Row="1" NavigationUIVisibility="Hidden" />
</Grid>

2. 实现点击事件逻辑
   在窗口的代码后台中处理每个按钮的点击，导航到对应页面：

private void AppDatabaseBtn_Click(object sender, RoutedEventArgs e)
{
    ContentFrame.Navigate(new AppDatabasePage());
}

private void ServerSetupBtn_Click(object sender, RoutedEventArgs e)
{
    ContentFrame.Navigate(new ServerSetupPage());
}

private void AboutBtn_Click(object sender, RoutedEventArgs e)
{
    ContentFrame.Navigate(new AboutPage());
}

private void HelpBtn_Click(object sender, RoutedEventArgs e)
{
    ContentFrame.Navigate(new HelpPage());
}

额外小贴士 #

• 使用Frame时自带导航栈，可以调用GoBack()/GoForward()实现后退/前进功能；
• 若项目复杂，也可以集成Prism等第三方框架来简化导航管理，但上面的基础实现足够覆盖大部分场景；
• 注意检查按钮的命令或点击事件绑定，避免出现空引用异常。

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