15

In OS X Yosemite, Apple introduced a new class NSVisualEffectView. Currently, this class is undocumented, but we can use it in Interface Builder.

How can I use NSVisualEffectView in the window's title bar?

Here's example: in Safari, when you scroll, the content appears under the toolbar and titlebar with a vibrance and blur effect.

enter image description here

alexwlchan
  • 5,699
  • 7
  • 38
  • 49
Nikolai Nagornyi
  • 1,312
  • 2
  • 11
  • 26
  • 1
    Fortunately, the API documentation for NSVisualEffectView does exist now, for anyone interested: https://developer.apple.com/library/mac/documentation/Foundation/Reference/NSVisualEffectView_Class/ – Benjamin R Oct 29 '14 at 22:53

3 Answers3

19

@sgonzalez's answer forced me to explore NSWindow.h file where i found titlebarAppearsTransparent property.

So we get: 

class BluredWindow: NSWindow {

    override func awakeFromNib() {

    let visualEffectView = NSVisualEffectView(frame: NSMakeRect(0, 0, 300, 180))
    visualEffectView.material = NSVisualEffectView.Material.dark
    visualEffectView.blendingMode = NSVisualEffectView.BlendingMode.behindWindow
    visualEffectView.state = NSVisualEffectView.State.active

    self.styleMask = self.styleMask | NSFullSizeContentViewWindowMask
    self.titlebarAppearsTransparent = true
    //self.appearance = NSAppearance(named: NSAppearanceNameVibrantDark)



    self.contentView.addSubview(visualEffectView)

    self.contentView.addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "V:|-0-[visualEffectView]-0-|", 
                                                                   options: NSLayoutConstraint.FormatOptions.directionLeadingToTrailing,
                                                                   metrics: nil, 
                                                                   views: ["visualEffectView":visualEffectView]))

    self.contentView.addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "H:|-0-[visualEffectView]-0-|",
                                                                   options: NSLayoutConstraint.FormatOptions.directionLeadingToTrailing, 
                                                                   metrics: nil, 
                                                                   views: ["visualEffectView":visualEffectView]))

Also you can setup NSVisualEffectView in IB it will be expanded on titlebar.

mrcendre
  • 1,053
  • 2
  • 15
  • 28
Nikolai Nagornyi
  • 1,312
  • 2
  • 11
  • 26
  • Would love to see this in an Objective C version to see if it works with OS 10.8 and up on a Cocoa app. – Volomike Dec 31 '15 at 00:51
  • @Volomike NSVisualEffectView class was introduced in OS X 10.10. – Nikolai Nagornyi Dec 31 '15 at 04:40
  • Unfortunately, my client requires that my app works on 10.8 and up. So, NSVisualEffectView won't work for me. However, I [did implement it as a test](http://stackoverflow.com/a/24025706/105539) and it works, at least on 10.10. – Volomike Dec 31 '15 at 04:43
  • @NikolaiNagorny : How can I give color with visualeffect ? I done some r&d and found that we need to loop through sublayers of visualEffectView where we have layer name "ClearCopyLayer" and need to give color to this layer. Is there anyother way ? – Devang Sep 01 '16 at 13:34
  • @Devang, sorry, but i don't understand you. – Nikolai Nagornyi Sep 13 '16 at 17:39
  • @NikolaiNagorny : Basically i want blurr window with whatever my specific color. Not just Dark and Light but with Specific color – Devang Sep 16 '16 at 09:04
18

You need to modify your window's stylemask to include NSFullSizeContentViewWindowMask so that its content view can "overflow" into it.

You can easily accomplish this by adding this line to your AppDelegate:

self.window.styleMask = self.window.styleMask | NSFullSizeContentViewWindowMask;

If you want it to appear dark, like in FaceTime, you need to also add this line of code:

self.window.appearance = NSAppearance(named: NSAppearanceNameVibrantDark)
sgonzalez
  • 1,086
  • 9
  • 24
  • There's also a checkbox in IB, just select the Window under the WindowController in the main storyboard, and check "Full Size ContentView" in the attributes inspector. – Christopher Swasey Jun 07 '15 at 19:49
  • Note that you also get this for free if you place a scroll view flush up against the title/toolbar. See also [WWDC 2014 Session 220](https://developer.apple.com/videos/play/wwdc2014/220/) – Ky - Jan 10 '17 at 20:52
9

Step by step Tutorial with examples:

http://eon.codes/blog/2016/01/23/Chromeless-window/

Setting up translucency:

  1. Set the styleMask of your NSWindow subclass to NSFullSizeContentViewWindowMask (so that the translucency will also be visible in the titlebar area, leave this out and the titlebar area will be blank)
  2. Set the self.titlebarAppearsTransparent = true (hides the titlebar default graphics)
  3. Add the code bellow to your NSWindow subclass: (you should now have a translucent window)

.

let visualEffectView = NSVisualEffectView(frame: NSMakeRect(0, 0, 0, 0))//<---the width and height is set to 0, as this doesn't matter. 
visualEffectView.material = NSVisualEffectMaterial.AppearanceBased//Dark,MediumLight,PopOver,UltraDark,AppearanceBased,Titlebar,Menu
visualEffectView.blendingMode = NSVisualEffectBlendingMode.BehindWindow//I think if you set this to WithinWindow you get the effect safari has in its TitleBar. It should have an Opaque background behind it or else it will not work well
visualEffectView.state = NSVisualEffectState.Active//FollowsWindowActiveState,Inactive
self.contentView = visualEffectView/*you can also add the visualEffectView to the contentview, just add some width and height to the visualEffectView, you also need to flip the view if you like to work from TopLeft, do this through subclassing*/

enter image description here

Also allows you to create chrome-less windows that are translucent:

enter image description here

Sentry.co
  • 5,355
  • 43
  • 38
  • updated. Ill add some more later. Like how you can do it chrom-less. – Sentry.co Jan 24 '16 at 09:04
  • This should be the answer. It is the most complete. – Juanjo Jan 26 '16 at 19:57
  • It will get more complete. Putting an end to the confusion about translucency mystiques. Give me 1-2weeks. The thing i want to sort out is how you can combine different translucencies above eachother, there are 2 types you can overlay. Think Safari titlebar and backround of an empty page area. Stay tuned. – Sentry.co Jan 26 '16 at 20:27
  • Added a Github gist, drop this code in your AppDelegate class and you have a working translucent window: https://gist.github.com/eonist/0c3cb90b5ad9ebcea83a – Sentry.co Jan 27 '16 at 14:14