Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Changing Ribbon Tab Control Background color and possibly adding Graphic Styling. #431

Closed
Alisaunder opened this issue May 5, 2017 · 30 comments
Assignees
Milestone

Comments

@Alisaunder
Copy link

I'm looking for a way to change the color of the ribbon part behind the tabs like in Office 365. The method you mention here changes the entire ribbon selected tab. It would also be nice if there were a way to add a graphic like they do in Office 365.

Environment

  • Fluent.Ribbon 5 v0.1.10
  • Theme Generic (not needed in version 5.0 and upwards)
  • Windows 10
  • .NET Framework 4.62
@robertmuehsig
Copy link
Contributor

(I hope I don't hijack this issue, but I have a similar problem)

With Version 5 we were able to paint the ribbon background in our desired color (e.g. grey for us) like that:

image

This was achived just by setting the background color on the ribbonwindow - the downside of this approach is (or was) that other controls that are normally have a transparent background needs to be set to a other (e.g. white) color.

Now I try to update to v6 and this "trick" doesn't seem to work anymore because the ribbon will stay white:
image
When I try to set the background color on the RibbonTabControl then whole ribbon has this color (which makes sense) :
image

So my question is: Is there an existing solution to set a color for the ribbon background with v6?

@batzen
Copy link
Member

batzen commented Jul 5, 2017

There is no easy way to do this currently.
Will add this to the 6.0 milestone, delay the release and try to get it done during the next two weeks.

@batzen batzen added this to the 6.0.0 milestone Jul 5, 2017
@batzen batzen self-assigned this Jul 5, 2017
batzen added a commit that referenced this issue Jul 22, 2017
Also deleting various images and screenshots
@batzen
Copy link
Member

batzen commented Jul 22, 2017

Could you have a look if the things i have done fit your needs?

@batzen
Copy link
Member

batzen commented Aug 4, 2017

@Alisaunder @robertmuehsig ping

dady8889 pushed a commit to dady8889/Fluent.Ribbon that referenced this issue Aug 4, 2017
Also deleting various images and screenshots
@robertmuehsig
Copy link
Contributor

Fancy!
image

Works for me! :shipit:

@Alisaunder
Copy link
Author

Alisaunder commented Aug 7, 2017

Yeah worked for me too but try it with a dark color and see how the Tab Text looks. Without being able to set the non-selected tab foreground colors they stay too dark to read.

@dthoeni
Copy link

dthoeni commented Aug 11, 2017

Hi there,

I've tested this feature too.
I'm missing a property to set the MouseOver background of an inactive RibbonTabItemHeader.

Office 2016 has the same MouseOver effect as the "File" tab for every RibbonTab.

@batzen
Copy link
Member

batzen commented Aug 11, 2017

Will have a look at that.

@batzen
Copy link
Member

batzen commented Aug 11, 2017

That one's a bit more difficult.
The MouseOver only applies if the theme is dark.
Doing this for the background is not a problem.
But the foreground also changes differently on MouseOver.
When the theme is light the foreground is a variant of the accent color, when the theme is dark the foreground is white on MouseOver.
The current "logic" behind the color schemes has no way to express this, in regards to the foreground...

@dthoeni
Copy link

dthoeni commented Aug 16, 2017

Yeah. Thats what I've figured when I had a look at the source code...
How about adding a stylesheet that overwrites only this behaviour?

@Alisaunder
Copy link
Author

I think the whole point of this was him trying to get away from style sheets, otherwise he could create a color theme to represent the colors Microsoft uses, Red, blue, green, purple, Orange etc.

@batzen
Copy link
Member

batzen commented Aug 18, 2017

@Menic0 I don't know what you mean by that. I guess microsoft has a more tailored engine to express such situations. I guess you should create a new issue for the dark/light MouseOver issue as it's not really in the scope of this particular issue. That way i can close this issue and think about the new issue. What do you think?

@Alisaunder I am not trying to get away from styles in general, i just removed the different themes because it was a maintenance nightmare. If the style were still there i would never have added the color schemes. ;-)

@dthoeni
Copy link

dthoeni commented Aug 21, 2017

@batzen I thought of a optional stylesheet one can use if he wants that effect like in Office 2016.
But I can open a seperate ticket with low prio if you want.

@batzen
Copy link
Member

batzen commented Sep 5, 2017

@Menic0 Could you open a new issue for your suggestion?
I am closing this as the core feature is done.

@batzen batzen closed this as completed Sep 5, 2017
@batzen
Copy link
Member

batzen commented Oct 15, 2017

@Menic0 FYI i am currently working on the dark theme and it now nearly matches the one in office 2016. Will push my changes during the next week.

@dthoeni
Copy link

dthoeni commented Oct 16, 2017

Nice. When do you think about making a release?
I'm still working with a self build version of fluent ribbon.

@TruePluto
Copy link

Maybe you can use this as temporary solve

           <f:Ribbon.Resources>
                <Style TargetType="{x:Type f:RibbonTabControl}">
                    <Setter Property="Background"
                            Value="#FFEA5E5E" />
                </Style>
            </f:Ribbon.Resources>

@batzen
Copy link
Member

batzen commented Jan 31, 2018

@Menic0 Forgot to answer. Version 6 was released on sunday.

@BendicoE
Copy link

I'm trying to achieve the look and feel of the Office 2016 ribbon, and I'm currently on the FluentRibbon 7.0.0-alpha0419. I have managed to set the background color using this this xaml:

            <Fluent:Ribbon.Resources>
                <Style TargetType="{x:Type Fluent:RibbonTabControl}">
                    <Setter Property="Background" Value="#2B579A" />
                </Style>
            </Fluent:Ribbon.Resources>

But I haven't found a way to make the text on the dark (not focused) tabs white, and a way to highlight the dark tab headers onmouseover.

My ribbon now looks like this:
myfluentribbon

And the Office 2016 ribbon looks like this:
office2016ribbon

Any hints on how to achieve the Office 2016 look?

@batzen
Copy link
Member

batzen commented Sep 11, 2018

Easy way: Use the recently added Theme Colorful.Blue. Don't know if i already released that to nuget. If i didn't i will do so during the weekend.

@BendicoE
Copy link

That would be great, thanks!

Another quick question: I'm combining Fluent.Ribbon with MahApps.Metro as per the instructions here. And I seem to have lost the title on the caption, it's just blank (only the icon shows). Any ideas?

@batzen
Copy link
Member

batzen commented Sep 12, 2018

Are there any binding errors being reported during debugging?
Have you set the title on your window?
If there are no errors and you have set the title it would nice if you could create a new issue for that and attach a repro there.

@BendicoE
Copy link

Yes, I get the following binding error:

System.Windows.Data Error: 4 : Cannot find source for binding with reference 'ElementName=window'. BindingExpression:Path=Title; DataItem=null; target element is 'RibbonTitleBar' (Name='RibbonTitleBar'); target property is 'Header' (type 'Object')

This led me to find the cause of the problem: I had forgot to give my main window an x:Name attribute, hence the Title binding could not be resolved:

<Metro:MetroWindow.TitleTemplate>
        <DataTemplate>
            <Fluent:RibbonTitleBar x:Name="RibbonTitleBar" Header="{Binding ElementName=TheMainWindow, Path=Title}" />
        </DataTemplate>
    </Metro:MetroWindow.TitleTemplate>

So when I named my main window x:Name="TheMainWindow", the title appears.

Thank you so much for leading me to the solution!

@batzen
Copy link
Member

batzen commented Sep 12, 2018

Thank you for pointing this issue out. Will have a look if i can get rid of that manual binding and make it work out of the box.

@yanbingms
Copy link

I use 6.1.0.326, still not work.
please have a look.


<fluent:Ribbon Grid.Row="0" Background="Blue">

@batzen
Copy link
Member

batzen commented Dec 26, 2018

@yanbingms Have you tried to use the current preview/pre-release of version 7.0?

@yanbingms
Copy link

@batzen Thank you for your instruction.
I tried 7.0 again, but nothing changed.
I installed it with this command.
Install-Package Fluent.Ribbon -Version 7.0.0-alpha0532

@batzen
Copy link
Member

batzen commented Dec 27, 2018

@yanbingms you have to, at least, do something like:

    <Fluent:RibbonWindow.Resources>
        <SolidColorBrush x:Key="Fluent.Ribbon.Brushes.RibbonTabControl.Background">LightBlue</SolidColorBrush>
        <SolidColorBrush x:Key="Fluent.Ribbon.Brushes.RibbonTabControl.TabsGrid.Background">LightBlue</SolidColorBrush>
        <SolidColorBrush x:Key="Fluent.Ribbon.Brushes.RibbonTabControl.Content.Background">LightBlue</SolidColorBrush>
        <SolidColorBrush x:Key="Fluent.Ribbon.Brushes.RibbonWindow.TitleBackground">LightBlue</SolidColorBrush>
    </Fluent:RibbonWindow.Resources>

To change the background of the ribbon. The reason why it doesn't work when you just set the background are fine grained styling needs.

@yanbingms
Copy link

@batzen It worked! Thank you very much.

@vikastarlekar
Copy link

vikastarlekar commented Aug 19, 2019

Fancy!
image

Works for me! :shipit:

Fancy!
image

Works for me! :shipit:

Fancy!
image

Works for me! :shipit:

Hi,
I have upgraded the V2.1 to V7.0.
In V2.1 we were using 'GlassBorderThickness' property which is not available in latest version of Fluent.
Can you please help me on this ?
Reason to upgrade the version is to change the Title Bar color of Fluent:Window.
Error : The property 'GlassBorderThickness' was not found in type 'RibbonWindow'.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

8 participants