We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to bind the foreground color of the RibbonBar header in WPF Ribbon control?

Platform: WPF |
Control: Ribbon |
Published Date: November 27, 2015 |
Last Revised Date: April 13, 2021

You can bind the Brush value to the Header’s TextBlock by modifying the RibbonBar’s template to bind the Foreground color of the RibbonBar header in WPF Ribbon control.

In the below code example, we have set the Binding for the Foreground property Header by using the RibbonBarBrush property defined in the ViewModel.

XAML

<!--  RibbonBar style  -->
<Style x:Key="Office2013RibbonBarStyle1" TargetType="{x:Type syncfusion:RibbonBar}">
   <Setter Property="FocusVisualStyle" Value="{x:Null}" />
   <Setter Property="FontSize" Value="11.5" />
   <Setter Property="Template">
      <Setter.Value>
         <ControlTemplate TargetType="{x:Type syncfusion:RibbonBar}">
            <Grid Margin="1,0,-5,0">
               <Border>
                  <Grid x:Name="barGrid">
                     <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*" />
                        <ColumnDefinition Width="5" />
                     </Grid.ColumnDefinitions>
                     <Grid.RowDefinitions>
                        <RowDefinition>
                           <RowDefinition.Style>
                              <Style>
                                 <Setter Property="RowDefinition.Height" Value="74"/>
                                    <Style.Triggers>
                                       <Trigger Property="syncfusion:SkinStorage.EnableTouch" Value="True">
                                          <Setter Property="RowDefinition.Height" Value="104"/>
                                       </Trigger>
                                    </Style.Triggers>
                              </Style>
                           </RowDefinition.Style>
                        </RowDefinition>
                        <RowDefinition MinHeight="17" />
                     </Grid.RowDefinitions>
                     <Border Name="PART_RibbonBarBorder" Margin="3,0,3,0">
                        <Border Name="PART_presenterBorder" Grid.Row="0">
                           <ItemsPresenter />
                        </Border>
                     </Border>
 
                     <Border Name="PART_headerBorder" Grid.Row="1">
                        <DockPanel>
                           <syncfusion:RibbonButton Name="PART_DialogLauncherButton" Margin="0,2,0,0" Width="15" 
                                 ToolTipService.ShowOnDisabled="{Binding Path=(ToolTipService.ShowOnDisabled),RelativeSource={RelativeSource TemplatedParent}}" Height="13" 
                                 Command="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=LauncherCommand}" CommandParameter="{Binding RelativeSource={RelativeSource TemplatedParent},
                                 Path=LauncherCommandParameter}"
                                 CommandTarget="{Binding RelativeSource={RelativeSource TemplatedParent},
                                 Path=LauncherCommandTarget}"
                                 DockPanel.Dock="Right"
                                 SizeForm="ExtraSmall"
                                 SmallIcon="{TemplateBinding CollapseImage}"
                                 Style="{StaticResource RibbonBarLauncherButton}" ToolTip="{TemplateBinding LauncherToolTip}"
                                 Visibility="{TemplateBinding IsLauncherButtonVisible, Converter={StaticResource BooleanToVisibilityConverter}}" />
                                            
                           <!-- Binding "RibbonBarBrush" value to the Foreground -->
                           <TextBlock Name="header" Margin="0,0,0,2" 
                                      VerticalAlignment="Center"
                                      Foreground="{Binding RibbonBarBrush}"
                                      Text="{TemplateBinding Header}"
                                      TextAlignment="Center" />
                        </DockPanel>
                     </Border>
                     <Border Grid.RowSpan="2"
                                        Grid.Column="1"
                                        Width="1"
                                        Height="{TemplateBinding Height}"
                                        HorizontalAlignment="Left"
                                        Background="{StaticResource Office2013RibbonbarSeparatorBrush}"
                                        SnapsToDevicePixels="True" />
 
                  </Grid>
               </Border>
            </Grid>
            <ControlTemplate.Triggers>
               <Trigger Property="syncfusion:SkinStorage.EnableTouch" Value="True">
                  <Setter Property="Margin" TargetName="PART_headerBorder" Value="5,0,5,0"/>
               </Trigger>
            </ControlTemplate.Triggers>
         </ControlTemplate>
      </Setter.Value>
   </Setter>
   <Setter Property="ItemsPanel">
      <Setter.Value>
         <ItemsPanelTemplate>
            <syncfusion:GroupPanel PanelState="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type syncfusion:RibbonBar}}, Path=PanelState, Mode=OneWay}" />
         </ItemsPanelTemplate>
      </Setter.Value>
   </Setter>          
</Style>
<Grid>       
   <syncfusion:Ribbon x:Name="ribbon" EnableMoreCommands="True" VerticalAlignment="Top">           
      <syncfusion:RibbonTab Caption="Home" IsChecked="False">
         <syncfusion:RibbonBar Header="RibbonComboBox" Style="{StaticResource Office2013RibbonBarStyle1}">
            <syncfusion:RibbonComboBox Text="Font Size" Width="100" x:Name="syncCombo">
            </syncfusion:RibbonComboBox>
         </syncfusion:RibbonBar>             
      </syncfusion:RibbonTab>
   </syncfusion:Ribbon>     
</Grid>

ViewModel

public class ViewModel    
{
  private SolidColorBrush ribbonbarBrush = new SolidColorBrush(Colors.Green);
  public SolidColorBrush RibbonBarBrush
  {
    get { return ribbonbarBrush; }
    set
    {
      ribbonbarBrush = value;
      OnPropertyChanged("RibbonBarBrush");
    }
  }
  public event PropertyChangedEventHandler PropertyChanged;
  public void OnPropertyChanged(string propertyName)
  {
    if(PropertyChanged != null)
      PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
  }
}

The following screenshot displays the RibbonBar Header with provided brush value.

Bind the foreground color of the RibbonBar Header in WPF Ribbon control

View sample in GitHub.

2X faster development

The ultimate WPF UI toolkit to boost your development speed.
ADD COMMENT
You must log in to leave a comment

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon