如何通过附加属性实现WPF控件的宽高比保持？

Great question! I’ve dealt with this exact headache in WPF before—let’s walk through how to build those attached properties you’re thinking of, without the downsides of the approaches you’ve already tried.

Why Your Existing Approaches Fall Short #

First, let’s validate your frustrations because they’re totally justified:

• Win32 API works for Windows but is tied to window handles, so it’s useless for standalone Controls.
• ViewBox scales content, which ruins element sizes like border thickness and font sizes—totally not what you want when you need crisp, consistent UI elements.
• Binding Width/ActualHeight or using SizeChanged causes flickering, reliability issues, and fights with WPF’s layout system, leading to weird interaction limits.

The Better Approach: Attached Properties with Layout Logic #

Instead of wrapping controls in a Decorator, we can create two attached properties to inject aspect ratio logic directly into any FrameworkElement (Windows, Controls, etc.):

1. AspectRatio.Ratio: A double to define your desired width/height ratio (e.g., 16/9 for widescreen, 1 for square).
2. AspectRatio.KeepRatio: A bool to toggle whether the ratio should be enforced.

We won’t directly override Measure or Arrange (since we can’t modify existing controls’ methods via attached properties), but we’ll hook into WPF’s layout cycle to adjust size constraints during valid layout passes—no flickering, no layout system conflicts.

Step 1: Define the Attached Property Class #

Here’s the full code for the attached property logic:

using System;
using System.Windows;
using System.Windows.Controls;

public static class AspectRatio
{
    // Ratio Property: Defines width/height ratio (e.g., 16/9 = 1.777...)
    public static readonly DependencyProperty RatioProperty =
        DependencyProperty.RegisterAttached(
            "Ratio",
            typeof(double),
            typeof(AspectRatio),
            new PropertyMetadata(1.0, OnRatioChanged));

    // KeepRatio Property: Toggles aspect ratio enforcement
    public static readonly DependencyProperty KeepRatioProperty =
        DependencyProperty.RegisterAttached(
            "KeepRatio",
            typeof(bool),
            typeof(AspectRatio),
            new PropertyMetadata(false, OnKeepRatioChanged));

    // Getters/Setters for XAML access
    public static double GetRatio(DependencyObject obj) => (double)obj.GetValue(RatioProperty);
    public static void SetRatio(DependencyObject obj, double value) => obj.SetValue(RatioProperty, value);

    public static bool GetKeepRatio(DependencyObject obj) => (bool)obj.GetValue(KeepRatioProperty);
    public static void SetKeepRatio(DependencyObject obj, bool value) => obj.SetValue(KeepRatioProperty, value);

    // Handle ratio changes when enforcement is active
    private static void OnRatioChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
    {
        if (d is FrameworkElement element && GetKeepRatio(element))
        {
            UpdateAspectRatioConstraints(element);
        }
    }

    // Toggle layout event listening when enforcement is turned on/off
    private static void OnKeepRatioChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
    {
        if (d is FrameworkElement element)
        {
            if ((bool)e.NewValue)
            {
                element.LayoutUpdated += Element_LayoutUpdated;
                UpdateAspectRatioConstraints(element);
            }
            else
            {
                element.LayoutUpdated -= Element_LayoutUpdated;
                ClearAspectRatioConstraints(element);
            }
        }
    }

    // Adjust constraints during every layout pass
    private static void Element_LayoutUpdated(object sender, EventArgs e)
    {
        if (sender is FrameworkElement element)
        {
            UpdateAspectRatioConstraints(element);
        }
    }

    // Core logic: Lock size to the defined ratio
    private static void UpdateAspectRatioConstraints(FrameworkElement element)
    {
        double ratio = GetRatio(element);
        if (ratio <= 0) return;

        double availableWidth = element.ActualWidth;
        double availableHeight = element.ActualHeight;

        // Calculate what the width/height should be to maintain the ratio
        double desiredWidth = availableHeight * ratio;
        double desiredHeight = availableWidth / ratio;

        // Lock the limiting dimension to enforce the ratio
        if (desiredWidth > availableWidth)
        {
            // Height is the limiting factor—lock width to match the ratio
            element.MaxWidth = desiredWidth;
            element.MinWidth = desiredWidth;
            element.MaxHeight = double.PositiveInfinity;
            element.MinHeight = double.PositiveInfinity;
        }
        else
        {
            // Width is the limiting factor—lock height to match the ratio
            element.MaxHeight = desiredHeight;
            element.MinHeight = desiredHeight;
            element.MaxWidth = double.PositiveInfinity;
            element.MinWidth = double.PositiveInfinity;
        }
    }

    // Reset constraints when enforcement is turned off
    private static void ClearAspectRatioConstraints(FrameworkElement element)
    {
        element.MaxWidth = double.PositiveInfinity;
        element.MinWidth = 0;
        element.MaxHeight = double.PositiveInfinity;
        element.MinHeight = 0;
    }
}

Step 2: Use the Properties in XAML #

You can apply this to any FrameworkElement—Windows, UserControls, Grids, you name it:

<!-- For a resizable window that stays 16:9 -->
<Window x:Class="WpfApp.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:WpfApp"
        Title="16:9 Window"
        local:AspectRatio.KeepRatio="True"
        local:AspectRatio.Ratio="16/9">
    <!-- Your window content here -->
</Window>

<!-- For a square control inside a parent layout -->
<Grid x:Name="SquareGrid"
      local:AspectRatio.KeepRatio="True"
      local:AspectRatio.Ratio="1"
      HorizontalAlignment="Center"
      VerticalAlignment="Center">
    <!-- Your control content here (border thickness, fonts stay intact!) -->
</Grid>

How This Solves Your Problems #

• No flickering: We work with WPF’s layout system instead of against it—constraints are applied during valid layout passes, not after.
• Works for all FrameworkElements: Unlike the Win32 API trick, this works for both Windows and standalone Controls.
• Preserves element sizes: No scaling (unlike ViewBox)—border thickness, font sizes, and other UI elements stay exactly as you define them.
• Toggleable: Turn enforcement on/off anytime by setting KeepRatio to False.

Quick Notes #

• For resizable windows, you might want to add a SizeChanged handler to adjust the window size smoothly while maintaining the ratio (just make sure to avoid infinite loops by checking if the size change is intentional).
• If your control is inside a parent layout (like a Grid with fixed rows/columns), ensure the parent allows the control to size freely (e.g., use HorizontalAlignment="Stretch" and VerticalAlignment="Stretch").

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