3

Just curious about how to accomplish this kind of custom columned app view. The source list goes straight through the titlebar but just on one side, I'm guessing that they hid the titlebar, maybe and then used an NSVisualEffectView? Any source code or tips are appreciated, its a pretty cool and from what I am seeing fairly widely used UI Element for Yosemite Apps.

Translucent source list that goes straight through NSTitleBar

The Search Bar in this photo and the Add List button are obviously in different views and I totally understand that an NSOutlineView with a SourceList style will automatically create this kind of effect in 10.10 but the button and the search field can't be in the source list scroll area yet their background is consistent with that of the source list which makes me think this effect is more view based than source list based.

Jon Brown
  • 235
  • 1
  • 3
  • 10
  • Thanks for adding the example on GitHub. For reference, Apple have an [example project](https://developer.apple.com/devcenter/download.action?path=/wwdc_2014/wwdc_2014_sample_code/visualeffectplaygroundblurstranslucencyandvibrancyonosx.zip) which is pretty exhaustive: (requires login): (link from [this page](https://developer.apple.com/wwdc/resources/sample-code/)) – lindon fox Jan 03 '15 at 12:06

1 Answers1

7

Ok, so I answered this myself. I created a github repository here to show others how to easily create the effect that I was looking to create.

Tri-Transarent-Window

The basic gist is to create a NSVisualEffectsView and then simply hide the titlebar and set the titlebar mask.

@implementation AppDelegate

- (void)applicationDidFinishLaunching:(NSNotification *)aNotification {
// Insert code here to initialize your application

self.window.styleMask = self.window.styleMask | NSFullSizeContentViewWindowMask;
self.window.titleVisibility = NSWindowTitleHidden;
self.window.titlebarAppearsTransparent = YES;

}

The above code will make the window accept the view and it will auto bleed through the titlebar. Here is my XIB

enter image description here

When you run you get a nice sidebar style transparent view that extends through the titlebar.

enter image description here

Jon Brown
  • 235
  • 1
  • 3
  • 10