How to show icon and text in BackStageTabItem?

Nov 22, 2011 at 7:34 AM

I tried using 2 methods but both the method gave me blank result.

1st Method: Using Header directly






<StackPanel Orientation



<Image Source="abc.png"



<TextBox Text

="Dashboard" />









2nd  Method: Using Content Template










<StackPanel Orientation



<Image Source=abc.png



<TextBox Text

="Dashboard" />










Dec 1, 2011 at 7:47 PM
Edited Dec 1, 2011 at 9:17 PM

I figured it out myself how to do this :-). Modify BackstageTabItemControlTemplate Control template. And also add Icon property in BackstageTabItem class.




        /// <summary>

        /// Using a DependencyProperty as the backing store for Text. 

        /// This enables animation, styling, binding, etc...

        /// </summary>

        public static readonly DependencyProperty IconProperty =

            DependencyProperty.Register("Icon", typeof(ImageSource),

            typeof(BackstageTabItem), new  UIPropertyMetadata(null));



        /// <summary>

        /// Set Icon Of BackStageItem

        /// </summary>

        public ImageSource Icon


            get { return GetValue(IconProperty) as ImageSource; }

            set { SetValue(IconProperty, value); }





  <ControlTemplate x:Key="BackstageTabItemControlTemplate" TargetType="{x:Type Fluent:BackstageTabItem}">

    <Grid x:Name="layoutRoot" Background="#00000000">

      <Border x:Name="hoverBorder" Margin="0,0,1,0" BorderBrush="{x:Null}" BorderThickness="0" Visibility="Collapsed"

              Background="{Binding Background, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Fluent:BackstageTabControl}}}">

        <Border BorderBrush="#4C000000" BorderThickness="0,1" Background="#BFFFFFFF" />


      <Border x:Name="selectedBorder" Margin="0" Visibility="Collapsed" BorderBrush="#FF000463" BorderThickness="0"

              Background="{Binding Background, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Fluent:BackstageTabControl}}}">

        <Grid HorizontalAlignment="Stretch" Margin="0" Width="Auto">

          <Border BorderBrush="#7F000000" BorderThickness="0,1">


              <RadialGradientBrush RadiusY="1.193" Center="0.5,0.972" GradientOrigin="0.5,0.972" RadiusX="0.662">



                    <ScaleTransform CenterX="0.5" CenterY="0.972" ScaleX="1" ScaleY="1" />

                    <SkewTransform AngleX="0" AngleY="0" CenterX="0.5" CenterY="0.972" />

                    <RotateTransform Angle="-0.659" CenterX="0.5" CenterY="0.972" />

                    <TranslateTransform />



                <GradientStop Color="#A5FFFFFF" Offset="0" />

                <GradientStop Offset="1" />




          <Path Fill="{DynamicResource BackstageBackgroundBrush}" Stretch="Fill" Stroke="{x:Null}" StrokeThickness="0"

                HorizontalAlignment="Right" VerticalAlignment="Center" Width="8" Height="15" Data="M1,0L0,1 1,2z" Margin="0,0,-1,0" />



            <StackPanel Orientation="Horizontal">

                <Image Height="24" Width="24" Source="{TemplateBinding Icon}" Margin="1,0,0,0" />

                <TextBlock x:Name="controlLabel" HorizontalAlignment="Left" Margin="2,0" VerticalAlignment="Center"

                 Text="{TemplateBinding Header}" TextWrapping="NoWrap" TextTrimming="CharacterEllipsis" />







          <Condition Property="IsMouseOver" Value="True" />

          <Condition Property="IsEnabled" Value="True" />


        <Setter Property="Visibility" TargetName="hoverBorder" Value="Visible" />


      <Trigger Property="IsEnabled" Value="False">

        <Setter Property="Visibility" TargetName="hoverBorder" Value="Hidden" />

        <Setter Property="Opacity" TargetName="controlLabel" Value="0.5" />


      <Trigger Property="Selector.IsSelected" Value="True">

        <Setter Property="Visibility" TargetName="selectedBorder" Value="Visible" />

        <Setter Property="Foreground" TargetName="controlLabel" Value="White" />





Bhushan Poojary

Interview For IT

Dec 1, 2011 at 9:16 PM

You can Improve above solution becuase above solution can give sporadic run time xaml parse exception

Best thing to do would be to make new project with all the Images (For e.g ImagePack) and add this dll to both Fluent project and the projectin which your window xaml is using flunet controls.


Now use this line of code in XAML and rest of the things remain same



   <Fluent:BackstageTabItem Header="Earnings" Icon="pack://application:,,,/ImagePackage;component/coins.png"/>

Bhushan Poojary

Interview For IT

Jul 4, 2012 at 7:21 AM

In my case, I modified the BackstageTabItem.xaml in themes to replace this :

<TextBlock x:Name="controlLabel" HorizontalAlignment="Left" Margin="20,0" VerticalAlignment="Center" Text="{TemplateBinding Header}" TextWrapping="NoWrap" TextTrimming="CharacterEllipsis"/>

with this :

<ContentControl x:Name="controlLabel" HorizontalAlignment="Left" Margin="20,0" VerticalAlignment="Center" Content="{TemplateBinding Header}">
      <Style TargetType="TextBlock">
         <Setter Property="TextWrapping" Value="NoWrap" />
         <Setter Property="TextTrimming" Value="CharacterEllipsis" />


It allows to put anything as header, multiple texts, image, etc.

I don't notice regress so far. Maybe include this modification to the official ? Some other controls can be redesigned in that way too.

Jul 10, 2012 at 6:14 PM

Implemented your solution Kaon. That way, everyone should be happy.

Nov 6, 2012 at 3:00 PM

Is this in the latest source?  BackstageTabItem has a Header property but no Icon property.  Am I looking in the wrong place?


Nov 6, 2012 at 5:37 PM

The header is a ContentControl.

That way you can place every control you want in the header.