Articles in this section
Category / Section

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

2 mins read

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.

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments (0)
Please sign in to leave a comment
Access denied
Access denied