Window Decorations and Borders

Customizing window decorations

How can I customize window decorations in SDL2?

Abstract art representing computer programming

SDL2 itself does not provide direct support for customizing window decorations (title bar, borders, etc.). It only allows enabling or disabling decorations using the SDL_WINDOW_BORDERLESS flag.

For advanced customization, such as changing the appearance of the title bar or borders, you’ll need to use platform-specific APIs outside of SDL2.

Custom Decorations with SDL2

One common approach is to create a borderless window (SDL_WINDOW_BORDERLESS) and then draw custom decorations within the client area using SDL’s rendering functions.

This gives you full control over the appearance and functionality of the decorations. Here’s an example:

#include <SDL.h>
#include <iostream>

void RenderCustomDecorations(
  SDL_Renderer* Renderer,
  int Width,
  int Height
) {
  // Draw a custom title bar
  SDL_Rect TitleBar{0, 0, Width, 30};

  SDL_SetRenderDrawColor(Renderer,
    50, 50, 50, 255); // Dark gray
  SDL_RenderFillRect(Renderer, &TitleBar);

  // Draw a close button
  SDL_Rect CloseButton{Width - 30, 0, 30, 30};

  SDL_SetRenderDrawColor(Renderer,
    200, 50, 50, 255); // Red
  SDL_RenderFillRect(Renderer, &CloseButton);
}

int main() {
  SDL_Init(SDL_INIT_VIDEO);

  SDL_Window* Window{
    SDL_CreateWindow(
      "Custom Decorations",
      SDL_WINDOWPOS_CENTERED,
      SDL_WINDOWPOS_CENTERED,
      800, 600,
      SDL_WINDOW_BORDERLESS 
    )};
  SDL_Renderer* Renderer{
    SDL_CreateRenderer(
      Window, -1, SDL_RENDERER_ACCELERATED)};

  bool Running{true};
  SDL_Event Event;
  while (Running) {
    while (SDL_PollEvent(&Event)) {
      if (Event.type == SDL_QUIT) {
        Running = false;
      } else if (
        Event.type == SDL_MOUSEBUTTONDOWN
      ) {
        int MouseX = Event.button.x;
        int MouseY = Event.button.y;

        // Detect click on the close button
        if (MouseX >= 770 && MouseY <= 30) {
          
          Running = false;
        }
      }
    }

    // Render custom decorations
    SDL_SetRenderDrawColor(Renderer,
      0, 0, 0, 255); // Black background
    
    SDL_RenderClear(Renderer);
    RenderCustomDecorations(Renderer, 800, 600);
    SDL_RenderPresent(Renderer);
  }

  SDL_DestroyRenderer(Renderer);
  SDL_DestroyWindow(Window);
  SDL_Quit();
}

This example simulates a title bar with a close button, allowing you to customize the appearance as needed.

Using Platform-Specific APIs

For greater flexibility, you can modify the window style directly through platform-specific APIs. For example:

  • Windows (Win32 API): Use SetWindowLongPtr to modify the window style and remove specific decorations, such as the title bar, while keeping borders.
  • Linux (X11): Use XChangeProperty or related functions to interact with the window manager.
  • macOS (Cocoa): Use Objective-C APIs to customize window properties.

However, these approaches require writing separate code for each platform, which can complicate cross-platform projects.

Libraries for Custom Windowing

Another option is to use libraries like Dear ImGui or Qt for more advanced window customization. These libraries offer higher-level abstractions and more features for creating custom-styled windows.

For most SDL2 projects, using a borderless window with custom rendering is the simplest way to achieve custom decorations without breaking cross-platform compatibility.

This Question is from the Lesson:

Window Decorations and Borders

An introduction to managing SDL2 window decorations, borders, and client areas.

Answers to questions are automatically generated and may not have been reviewed.

This Question is from the Lesson:

Window Decorations and Borders

An introduction to managing SDL2 window decorations, borders, and client areas.

sdl2-promo.jpg
Part of the course:

Game Dev with SDL2

Learn C++ and SDL development by creating hands on, practical projects inspired by classic retro games

Free, unlimited access

This course includes:

  • 67 Lessons
  • 100+ Code Samples
  • 91% Positive Reviews
  • Regularly Updated
  • Help and FAQ
Free, Unlimited Access

Professional C++

Comprehensive course covering advanced concepts, and how to use them on large-scale projects.

Screenshot from Warhammer: Total War
Screenshot from Tomb Raider
Screenshot from Jedi: Fallen Order
Contact|Privacy Policy|Terms of Use
Copyright © 2024 - All Rights Reserved