none
WPF Title Bar Text Hardly Readable In RibbonWindow

    Question

  • When using the Microsoft WPF RibbonWindow class (Oct 2010) or even third party WPF RibbonWindow controls (DevComponents RibbonWindow for WPF), the title bar text (especially with the translucent glass effect over a dark background) is significantly dimmer than when using Win forms or other types of Windows.

    The blurry white background behind the title bar text is not as big, and it is not as bright as with other windows. The result is that very little contrast is achieved.

    In my latest app one can barely read the title bar text.

    Guys, please tell me: how can I fix this?

    • Edited by JM Powell Tuesday, July 12, 2011 3:47 PM
    Friday, July 08, 2011 12:54 AM

Answers

  • What is the appearance? Could you please show a screenshot on the www.skydrive.com ? Or show some specific code about it?
    I check the title text, is it? The RibbonWindow title bar text does not have the white glow around the text.
     
    RibbonWindow does not use the system title bar, it hides the system title bar and use its own one. You could view the setting from the source code of the RibbonControls http://www.microsoft.com/download/en/details.aspx?id=11877.
    So we could change the source code of the RibbonControl to change this behaviour.
    For WPF 4, find the code in the MicrosoftRibbonForWPFSourceAndSamples\RibbonControlsLibrary\v4.0\Themes\Generic.xaml , line 2280
    you could change the DropShadowEffect properties (WPF 4 has canceled the BitmapEffect, so we can use Effect or use the PixelShader for enable the Text OuterGlow). Or replace the DataTemplate as below:
    <!-- Glowing effect around Title in Aero glass theme -->
    <DataTemplate DataType="{x:Type system:String}">
     <Grid>
    
     <TextBlock x:Name="titleTextBlock_background" 
        Margin="0,-2,0,0"
        Foreground="White"
        Text="{TemplateBinding Content}"
        TextTrimming="CharacterEllipsis"
        HorizontalAlignment="{TemplateBinding HorizontalAlignment}"/>
     <TextBlock x:Name="titleTextBlock" 
        Margin="0,-2,0,0"
        Text="{TemplateBinding Content}"
        TextTrimming="CharacterEllipsis"
        HorizontalAlignment="{TemplateBinding HorizontalAlignment}"/>
     </Grid>
     <DataTemplate.Triggers>
     <MultiDataTrigger>
      <MultiDataTrigger.Conditions>
      <Condition Binding="{Binding Path=IsGlassEnabled, Source={x:Static shell:SystemParameters2.Current}}" Value="True"/>
      <Condition Binding="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=ribbon:Ribbon}, Path=IsHostedInRibbonWindow}" Value="True" />
      </MultiDataTrigger.Conditions>
      <Setter TargetName="titleTextBlock" Property="TextBlock.Effect">
      <Setter.Value>
       <DropShadowEffect Color="White" BlurRadius="5.0" Opacity="1" Direction="0" ShadowDepth="5"/>
      </Setter.Value>
      </Setter>
    
      <Setter TargetName="titleTextBlock_background" Property="TextBlock.Effect">
      <Setter.Value>
       <BlurEffect Radius="5" />
      </Setter.Value>
      </Setter>
     </MultiDataTrigger>
     <DataTrigger Binding="{Binding Path=IsGlassEnabled, Source={x:Static shell:SystemParameters2.Current}}" Value="False">
      <Setter TargetName="titleTextBlock" Property="Margin" Value="0" />
      <Setter TargetName="titleTextBlock" Property="VerticalAlignment" Value="Center" />
     </DataTrigger>
     <DataTrigger Binding="{Binding Path=HighContrast, Source={x:Static shell:SystemParameters2.Current}}" Value="True">
      <Setter TargetName="titleTextBlock" Property="Margin" Value="0,1,0,0" />
     </DataTrigger>
     </DataTemplate.Triggers>
    </DataTemplate>
    
     
    And if you are using WPF 3.5, that is simple, just find the source code MicrosoftRibbonForWPFSourceAndSamples\RibbonControlsLibrary\v3.5\Themes\Generic.xaml , line 2293: 
    use the following code replace the Setter for the TextBlock.Effect
     <Setter TargetName="titleTextBlock" Property="TextBlock.BitmapEffect">
      <Setter.Value>
       <OuterGlowBitmapEffect GlowSize="7.0" GlowColor="White" Opacity="0.8" />
      </Setter.Value>
     </Setter>

    (you could test the different Opacity value to find one is good for viewing)
     
    Sincerely,
     
     
     

    Bob Bao [MSFT]
    MSDN Community Support | Feedback to us
    Get or Request Code Sample from Microsoft
    Please remember to mark the replies as answers if they help and unmark them if they provide no help.


    Monday, July 11, 2011 7:15 AM
    Moderator
  • Hi,

    I think I could share my changed source code of the MS Ribbon Library, but I cannot to change anything from the DevComponents. So please try to cntract the support, and you could recommend him to refer to this thread. I have shared a solution on this title issue.

     

    My sample: https://skydrive.live.com/?cid=51b2fdd068799d15#!/?cid=51b2fdd068799d15&sc=documents&uc=1&id=51B2FDD068799D15%21752

    Please view the code at  20110713_RibbonLibraryTitleBlur\RibbonControlsLibrary\v4.0\Themes\Generic.xaml, line 2281 in my sample.

    And I think DevComponents can do the same changes in his product.

    Sincerely,


    Bob Bao [MSFT]
    MSDN Community Support | Feedback to us
    Get or Request Code Sample from Microsoft
    Please remember to mark the replies as answers if they help and unmark them if they provide no help.

    Wednesday, July 13, 2011 5:40 AM
    Moderator

All replies

  • What is the appearance? Could you please show a screenshot on the www.skydrive.com ? Or show some specific code about it?
    I check the title text, is it? The RibbonWindow title bar text does not have the white glow around the text.
     
    RibbonWindow does not use the system title bar, it hides the system title bar and use its own one. You could view the setting from the source code of the RibbonControls http://www.microsoft.com/download/en/details.aspx?id=11877.
    So we could change the source code of the RibbonControl to change this behaviour.
    For WPF 4, find the code in the MicrosoftRibbonForWPFSourceAndSamples\RibbonControlsLibrary\v4.0\Themes\Generic.xaml , line 2280
    you could change the DropShadowEffect properties (WPF 4 has canceled the BitmapEffect, so we can use Effect or use the PixelShader for enable the Text OuterGlow). Or replace the DataTemplate as below:
    <!-- Glowing effect around Title in Aero glass theme -->
    <DataTemplate DataType="{x:Type system:String}">
     <Grid>
    
     <TextBlock x:Name="titleTextBlock_background" 
        Margin="0,-2,0,0"
        Foreground="White"
        Text="{TemplateBinding Content}"
        TextTrimming="CharacterEllipsis"
        HorizontalAlignment="{TemplateBinding HorizontalAlignment}"/>
     <TextBlock x:Name="titleTextBlock" 
        Margin="0,-2,0,0"
        Text="{TemplateBinding Content}"
        TextTrimming="CharacterEllipsis"
        HorizontalAlignment="{TemplateBinding HorizontalAlignment}"/>
     </Grid>
     <DataTemplate.Triggers>
     <MultiDataTrigger>
      <MultiDataTrigger.Conditions>
      <Condition Binding="{Binding Path=IsGlassEnabled, Source={x:Static shell:SystemParameters2.Current}}" Value="True"/>
      <Condition Binding="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=ribbon:Ribbon}, Path=IsHostedInRibbonWindow}" Value="True" />
      </MultiDataTrigger.Conditions>
      <Setter TargetName="titleTextBlock" Property="TextBlock.Effect">
      <Setter.Value>
       <DropShadowEffect Color="White" BlurRadius="5.0" Opacity="1" Direction="0" ShadowDepth="5"/>
      </Setter.Value>
      </Setter>
    
      <Setter TargetName="titleTextBlock_background" Property="TextBlock.Effect">
      <Setter.Value>
       <BlurEffect Radius="5" />
      </Setter.Value>
      </Setter>
     </MultiDataTrigger>
     <DataTrigger Binding="{Binding Path=IsGlassEnabled, Source={x:Static shell:SystemParameters2.Current}}" Value="False">
      <Setter TargetName="titleTextBlock" Property="Margin" Value="0" />
      <Setter TargetName="titleTextBlock" Property="VerticalAlignment" Value="Center" />
     </DataTrigger>
     <DataTrigger Binding="{Binding Path=HighContrast, Source={x:Static shell:SystemParameters2.Current}}" Value="True">
      <Setter TargetName="titleTextBlock" Property="Margin" Value="0,1,0,0" />
     </DataTrigger>
     </DataTemplate.Triggers>
    </DataTemplate>
    
     
    And if you are using WPF 3.5, that is simple, just find the source code MicrosoftRibbonForWPFSourceAndSamples\RibbonControlsLibrary\v3.5\Themes\Generic.xaml , line 2293: 
    use the following code replace the Setter for the TextBlock.Effect
     <Setter TargetName="titleTextBlock" Property="TextBlock.BitmapEffect">
      <Setter.Value>
       <OuterGlowBitmapEffect GlowSize="7.0" GlowColor="White" Opacity="0.8" />
      </Setter.Value>
     </Setter>

    (you could test the different Opacity value to find one is good for viewing)
     
    Sincerely,
     
     
     

    Bob Bao [MSFT]
    MSDN Community Support | Feedback to us
    Get or Request Code Sample from Microsoft
    Please remember to mark the replies as answers if they help and unmark them if they provide no help.


    Monday, July 11, 2011 7:15 AM
    Moderator
  • Bob, thank you for your response.

    I am using WPF 4 in VS2010 SP1. Where do I place the DataTemplate? I tried pasting it into App.xaml...but when I try to compile I get the error message "'system' is an undeclared namespace". Also, there appears to be nothing in the template to hook it up to the Title text of the RibbonWindow.

    So should I put it directly in the RibbonWindow...maybe inside of RibbonWindow.Resources? Please give me a little more to work with.

     

    Thanks!

    Monday, July 11, 2011 2:33 PM
  • I hope you are not saying I would have to recompile the source?!?!

    Monday, July 11, 2011 2:45 PM
  • Unfortunately, you should recompile the code of the Ribbon library. It is a open source library, we could modify it.

     


    Bob Bao [MSFT]
    MSDN Community Support | Feedback to us
    Get or Request Code Sample from Microsoft
    Please remember to mark the replies as answers if they help and unmark them if they provide no help.

    Tuesday, July 12, 2011 4:48 AM
    Moderator
  • Bob, here is an example of what the title bar text in my application looks like...

    http://i71.photobucket.com/albums/i146/joeypowell/Dim.jpg

    I am using a third party WPF Ribbon control from DevComponents, so modifying the source code is not an option. Whatever the problem is with the original Microsoft RibbonWindow class...it seemingly got ported to their code as well? Even if the problem is with an underlying Microsoft class...if you are suggesting that I could fix it, then I think surely they will be able to do it???

    I feel that this is MAJOR issue and deserves some attention.

    I don't understand how Microsoft could release a control with an obvious problem like this (and many others I ran into) and then, 9 months later, still not provide a solution (or even indicate to anyone that they are working on one!). How can we expect to use these controls to build professional applications when our users can sometimes not even read the text in RibbonWindow.Title?

    If this doesn't qualify as a bug, then I don't know what does.

    I am going to ask DevComponents to fix the issue; thus far they have given VERY GOOD support, and I would highly reccommend them to others.

    I'll let you guys know of their response for this issue...

    Tuesday, July 12, 2011 3:37 PM
  • Hi,

    I think I could share my changed source code of the MS Ribbon Library, but I cannot to change anything from the DevComponents. So please try to cntract the support, and you could recommend him to refer to this thread. I have shared a solution on this title issue.

     

    My sample: https://skydrive.live.com/?cid=51b2fdd068799d15#!/?cid=51b2fdd068799d15&sc=documents&uc=1&id=51B2FDD068799D15%21752

    Please view the code at  20110713_RibbonLibraryTitleBlur\RibbonControlsLibrary\v4.0\Themes\Generic.xaml, line 2281 in my sample.

    And I think DevComponents can do the same changes in his product.

    Sincerely,


    Bob Bao [MSFT]
    MSDN Community Support | Feedback to us
    Get or Request Code Sample from Microsoft
    Please remember to mark the replies as answers if they help and unmark them if they provide no help.

    Wednesday, July 13, 2011 5:40 AM
    Moderator
  • For me the fix did not work: Things got better, but not really good. The title still is hardly readable. What's worse is that you see the title twice when not using aero: The white one is a few pixel higher (not taller) than the black one. Am I missing something?
    Friday, November 29, 2013 1:08 PM