How to Change the Visibility of WPF RibbonBarItem using ViewModel?

This article explains how to customize the visibility of a RibbonBarItem in WPF Ribbon control. When working with a RibbonBarItem in a WPF application using the MVVM (Model-View-ViewModel) pattern, you can control its visibility by binding the Visibility property to a property in your ViewModel.

XAML

 <Window.Resources>
     <ResourceDictionary>
         <ResourceDictionary.MergedDictionaries>
             <ResourceDictionary Source="/Syncfusion.Themes.Windows11Light.WPF;component/Ribbon/Ribbon.xaml" />
         </ResourceDictionary.MergedDictionaries>
         <local:ItemDataTemplateSelector x:Key="selector"/>
         <DataTemplate x:Key="Ribbonbutton">
             <syncfusion:RibbonButton Label="{Binding ItemHeader}" SizeForm="Large" Visibility="{Binding RibbonTabItemVisibility}" />
         </DataTemplate>
         <DataTemplate x:Key="Splitbutton">
             <syncfusion:SplitButton Label="{Binding ItemHeader}"/>
         </DataTemplate>
     </ResourceDictionary>
 </Window.Resources>
 <Window.DataContext>
     <local:ViewModel/>
 </Window.DataContext>
 <Grid>
     <syncfusion:Ribbon 
x:Name="_ribbon"  VerticalAlignment="Top"   
ItemsSource="{Binding CustomRibbonTabs}">
         <syncfusion:Ribbon.ItemContainerStyle>
             <Style TargetType="{x:Type syncfusion:RibbonTab}">
                 <Setter Property="Caption" Value="{Binding TabHeader}"></Setter>
                 <Setter Property="ItemsSource" Value="{Binding CustomRibbonBars}"/>
                 <Setter Property="ItemContainerStyle">
                     <Setter.Value>
                         <Style BasedOn="{StaticResource SyncfusionRibbonBarStyle}" TargetType="{x:Type syncfusion:RibbonBar}">
                             <Setter Property="Header" Value="{Binding BarHeader}"/>
                             <Setter Property="ItemsSource" Value="{Binding CustomRibbonItems}"/>
                             <Setter Property="ItemTemplateSelector" Value="{StaticResource selector}"/>
                         </Style>
                     </Setter.Value>
                 </Setter>
             </Style>
         </syncfusion:Ribbon.ItemContainerStyle>
     </syncfusion:Ribbon>
 </Grid>

CustomRibbonTab

public class CustomRibbonTab
{
    public string TabHeader { get; set; }
    public ObservableCollection<CustomRibbonBar> CustomRibbonBars { get; set; }
    public CustomRibbonTab()
    {
        CustomRibbonBars = new ObservableCollection<CustomRibbonBar>();
    }
}

CustomRibbonBar

public class CustomRibbonBar
    {
        public string BarHeader { get; set; }
        public ObservableCollection<CustomRibbonItem> CustomRibbonItems { get; set; }
        public CustomRibbonBar()
        {
            CustomRibbonItems = new ObservableCollection<CustomRibbonItem>();
        }
    }

CustomRibbonBarItem

public class CustomRibbonItem
{
    public CustomRibbonItem()
    {
        IsSplitButton = false;
        IsBoolean = true;
    }
    public string ItemHeader
    {
        get;
        set;
    }
    public bool RibbonTabItemVisibility { get; set; }
    public string Image { get; set; }
    public bool IsBoolean { get; set; }
    public bool IsLarge { get; set; }
    public bool IsSplitButton { get; set; }
}

ViewModel.cs

public class ViewModel
{
    public ObservableCollection<CustomRibbonTab> CustomRibbonTabs { get; set; }
    public ViewModel()
    {
        CustomRibbonTabs = new ObservableCollection<CustomRibbonTab>();
        PopulateRibbonTabs();
    }
    void PopulateRibbonTabs()
    {
        CustomRibbonTab Tab1 = new CustomRibbonTab() { TabHeader = "Home"};
        PopulateRibbonHomeBars(Tab1);
        CustomRibbonTabs.Add(Tab1);
    }

    void PopulateRibbonHomeBars(CustomRibbonTab Tab)
    {
        CustomRibbonBar Bar1 = new CustomRibbonBar() { BarHeader = "Clipboard" };
        PopulateRibbonNewItems(Bar1);
        Tab.CustomRibbonBars.Add(Bar1);
    }

    void PopulateRibbonNewItems(CustomRibbonBar Bar)
    {
        CustomRibbonItem Item1 = new CustomRibbonItem() { ItemHeader = "Paste", IsLarge = true, RibbonTabItemVisibility = true };
        Bar.CustomRibbonItems.Add(Item1);
    }
}

Output (RibbonBarItemVisibility is set to false)

Output (RibbonBarItemVisibility is set to true)

I hope you enjoyed learning how to change the visibility of WPF RibbonBarItem using ViewModel.

You can refer to our WPF Ribbon feature tour page to know about its other groundbreaking feature representations and documentation , and how to quickly get started for configuration specifications.

You can also explore our WPF Ribbon Example to understand how to create and manipulate data.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal . We are always happy to assist you!