Macos – How to use NSVisualEffectView in window’s title bar

macososx-yosemitetitlebar

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

Best Answer

@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.

Related Topic