NSCollectionView with vibrant background

Question

I'm trying to get an NSCollectionView in my application to use a vibrant (semi-blurred transparent) background. I've successfully implemented this for other views by simply adding the view (for instance a label or a progress indicator) to an NSVisualEffectView. I've also tried this on the NSCollectionViewItem view that is used by the NSCollectionView to render its contents. This also works.

But I cannot get the NSCollectionView to use a vibrant background. I've tried this by adding the NSScrollView that contains the NSCollectionView to an NSVisualEffectView but this does not work. I've also set the drawsBackground property to false (both in Interface Builder and programatically: collectionScrollView?.drawsBackground = false, and collectionScrollView?.backgroundColor = NSColor.clearColor().

The view hierarchy is:

Window
- View
  - Split View
    - Custom View (with a source list)
    - Custom View
      - Visual Effect View
        - Scroll View
          - Clip View
            - Collection View

NB. I've also tried changing the background color of the NSScrollView that contains the NSCollectionView to any other color (e.g. red) but this also does not work (either in Interface Builder or programatically). The background stays white.

Have you tried changing the background of your `NSCollectionView` itself? — sschale, Mar 09 '16 at 02:55
@sschale Iit was that simple. Apparently I assumed that I could not set the background colour because the option was not available in Interface Builder. But I can set the background colour using ` collectionView?.backgroundColors = [NSColor.clearColor()]`. Thank you! — Dieudonné, Mar 09 '16 at 08:24
Wow. Thanks to @Dieudonné I finally can make the NSCollectionView with transparent background. I did notice the property >backgroundColorS<. THANK YOU ! — user1105951, Apr 10 '19 at 13:17

score 0 · Answer 1 · answered Apr 26 '19 at 18:27

The comments above are correct, but it's important to note that an NSCollectionView is embedded in an NSScrollView which has its own background. The solution is to set the collection view’s background to clear AND set the enclosing scroll view to not draw its background. This can be done in Interface Builder or else with the second line of code below.

collectionView.backgroundColors = @[[NSColor clearColor]];
collectionView.enclosingScrollView.drawsBackground = NO;

Of course, be sure that no other superview is drawing an opaque background (e.g. set a parent view’s class to be NSVisualEffectView.

More details can be found at this answer (basically the same question).

NSCollectionView with vibrant background

1 Answers1