Windows Forms实现拖拽窗口到屏幕顶部自动全屏及还原功能

Hey there! Let's get that drag-to-top auto-fullscreen feature working for your custom window. Since you already have drag functionality and basic controls in place, we just need to add a few key logic pieces to make this work smoothly.

First, Let's Break Down the Core Requirements #

We need two main behaviors:

1. Trigger fullscreen when dragging the window to the top of the screen
2. Restore the window to its original size/position when exiting fullscreen (either via drag-down, button click, or double-click)

Let's Start with a Web-Based Custom Window (HTML/CSS/JS) #

Assuming your window is built with a div-based custom UI, here's how to implement this:

Step 1: Set Up State Variables

First, we'll track the window's state and save its original dimensions before going fullscreen:

let isFullscreen = false;
// Store the window's position/size before fullscreen
let originalWindowState = { x: 0, y: 0, width: 0, height: 0 };
const windowEl = document.getElementById('customWindow');
const titleBar = document.getElementById('titleBar');
const fullscreenBtn = document.getElementById('fullscreenBtn');

// Adjust these thresholds to fit your needs
const TOP_TRIGGER_THRESHOLD = 10; // px from top to trigger fullscreen
const RESTORE_TRIGGER_THRESHOLD = 50; // px to pull down to restore

Step 2: Update Your Drag Logic

Modify your existing drag event listeners to check for the fullscreen trigger during dragging:

let isDragging = false;
let startX, startY, initialX, initialY;

titleBar.addEventListener('mousedown', (e) => {
  isDragging = true;
  startX = e.clientX;
  startY = e.clientY;
  initialX = windowEl.offsetLeft;
  initialY = windowEl.offsetTop;

  // If already fullscreen, restore first before dragging
  if (isFullscreen) {
    restoreWindow();
    isDragging = false;
    return;
  }
});

document.addEventListener('mousemove', (e) => {
  if (!isDragging) return;

  const dx = e.clientX - startX;
  const dy = e.clientY - startY;
  const newY = initialY + dy;

  // Trigger fullscreen when dragging to top threshold
  if (!isFullscreen && newY <= TOP_TRIGGER_THRESHOLD) {
    enterFullscreen();
    isDragging = false; // Stop dragging once fullscreen activates
    return;
  }

  // Restore window when pulling down from fullscreen
  if (isFullscreen) {
    if (e.clientY > RESTORE_TRIGGER_THRESHOLD) {
      restoreWindow();
      isDragging = false;
    }
    return;
  }

  // Normal drag behavior
  windowEl.style.left = `${initialX + dx}px`;
  windowEl.style.top = `${newY}px`;
});

document.addEventListener('mouseup', () => {
  isDragging = false;
});

Step 3: Implement Fullscreen/Restore Functions

These functions handle switching between states and saving/restoring the window's original properties:

function enterFullscreen() {
  // Save current state before going fullscreen
  originalWindowState = {
    x: windowEl.offsetLeft,
    y: windowEl.offsetTop,
    width: windowEl.offsetWidth,
    height: windowEl.offsetHeight
  };

  // Apply fullscreen styles
  windowEl.style.position = 'fixed';
  windowEl.style.left = '0';
  windowEl.style.top = '0';
  windowEl.style.width = '100vw';
  windowEl.style.height = '100vh';
  
  isFullscreen = true;
  fullscreenBtn.textContent = '▢'; // Update button icon
}

function restoreWindow() {
  // Revert to original position/size
  windowEl.style.position = 'absolute'; // Match your original positioning
  windowEl.style.left = `${originalWindowState.x}px`;
  windowEl.style.top = `${originalWindowState.y}px`;
  windowEl.style.width = `${originalWindowState.width}px`;
  windowEl.style.height = `${originalWindowState.height}px`;
  
  isFullscreen = false;
  fullscreenBtn.textContent = '□'; // Reset button icon
}

// Bind fullscreen button to toggle state
fullscreenBtn.addEventListener('click', () => {
  isFullscreen ? restoreWindow() : enterFullscreen();
});

For Electron Apps (If That's Your Stack) #

If you're building an Electron app with a custom title bar, the logic is similar but uses Electron's native APIs:

Main Process Code

const { BrowserWindow, screen } = require('electron');
let mainWindow;
let isFullscreen = false;
let originalBounds = {};
const TOP_TRIGGER_THRESHOLD = 10;

function createWindow() {
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    frame: false, // Custom title bar
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false
    }
  });

  // Listen for window movement to trigger fullscreen
  mainWindow.on('move', () => {
    if (isFullscreen) return;
    const bounds = mainWindow.getBounds();
    const display = screen.getDisplayNearestPoint({ x: bounds.x, y: bounds.y });
    const distanceToTop = bounds.y - display.workArea.y;
    
    if (distanceToTop <= TOP_TRIGGER_THRESHOLD) {
      enterFullscreen();
    }
  });

  // Handle system-level fullscreen changes
  mainWindow.on('enter-full-screen', () => {
    isFullscreen = true;
    originalBounds = mainWindow.getBounds();
  });

  mainWindow.on('leave-full-screen', () => {
    isFullscreen = false;
    mainWindow.setBounds(originalBounds);
  });
}

function enterFullscreen() {
  originalBounds = mainWindow.getBounds();
  mainWindow.setFullScreen(true);
  isFullscreen = true;
}

function restoreWindow() {
  mainWindow.setFullScreen(false);
  mainWindow.setBounds(originalBounds);
  isFullscreen = false;
}

// Expose functions to renderer process via IPC if needed

Key Notes to Avoid Issues #

• Threshold Tuning: Adjust TOP_TRIGGER_THRESHOLD and RESTORE_TRIGGER_THRESHOLD to match user expectations (too small might trigger accidentally, too large feels unresponsive).
• Positioning: Ensure your window uses position: absolute or fixed correctly—fullscreen mode relies on fixed to cover the entire viewport.
• State Accuracy: Double-check that originalWindowState captures the correct position/size (use getBoundingClientRect() instead of offsetLeft/offsetTop if you have nested elements).

内容的提问来源于stack exchange，提问作者jericho