Avalonia/XAML中实现控件百分比宽高及替代Grid布局方案咨询

要让StackPanel、Button这类原生控件支持百分比宽高，最简洁且符合XAML扩展机制的方式是自定义附加属性，无需依赖繁琐的Grid布局，完全贴合你习惯的Adobe Flex式开发体验。

核心实现思路 #

通过附加属性为控件添加WidthPercent和HeightPercent属性，在属性值变更或父容器尺寸变化时，自动计算并设置控件的实际宽高。这种方式无需修改控件源码，直接扩展现有控件功能。

Avalonia 实现代码 #

1. 定义附加属性类 #

using Avalonia;
using Avalonia.Controls;
using Avalonia.Layout;

public static class PercentageLayout
{
    // 宽度百分比附加属性
    public static readonly AttachedProperty<double> WidthPercentProperty =
        AvaloniaProperty.RegisterAttached<Control, double>("WidthPercent", typeof(PercentageLayout));

    // 高度百分比附加属性
    public static readonly AttachedProperty<double> HeightPercentProperty =
        AvaloniaProperty.RegisterAttached<Control, double>("HeightPercent", typeof(PercentageLayout));

    // 属性访问器
    public static double GetWidthPercent(Control control) => control.GetValue(WidthPercentProperty);
    public static void SetWidthPercent(Control control, double value) => control.SetValue(WidthPercentProperty, value);

    public static double GetHeightPercent(Control control) => control.GetValue(HeightPercentProperty);
    public static void SetHeightPercent(Control control, double value) => control.SetValue(HeightPercentProperty, value);

    static PercentageLayout()
    {
        // 监听属性变化
        WidthPercentProperty.Changed.Subscribe(OnPercentChanged);
        HeightPercentProperty.Changed.Subscribe(OnPercentChanged);
    }

    private static void OnPercentChanged(AvaloniaPropertyChangedEventArgs args)
    {
        if (args.Sender is Control control && control.Parent is Layoutable parent)
        {
            // 监听父容器布局变化，实时更新尺寸
            parent.LayoutUpdated += (_, __) => UpdateControlSize(control);
            // 立即执行一次尺寸计算
            UpdateControlSize(control);
        }
    }

    private static void UpdateControlSize(Control control)
    {
        if (control.Parent is not Layoutable parent) return;

        // 计算宽度
        var widthPercent = GetWidthPercent(control);
        if (widthPercent > 0)
        {
            control.Width = parent.Bounds.Width * (widthPercent / 100);
        }

        // 计算高度
        var heightPercent = GetHeightPercent(control);
        if (heightPercent > 0)
        {
            control.Height = parent.Bounds.Height * (heightPercent / 100);
        }
    }
}

2. XAML 中使用 #

在XAML中引入自定义命名空间后，直接为控件设置百分比属性：

<UserControl xmlns="https://github.com/avaloniaui"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:local="clr-namespace:YourProjectNamespace">

    <StackPanel Width="400" Height="300">
        <!-- 宽度占父容器50%的按钮 -->
        <Button local:PercentageLayout.WidthPercent="50" 
                Content="50% Width" 
                Margin="5"/>
        
        <!-- 高度占父容器20%的按钮 -->
        <Button local:PercentageLayout.HeightPercent="20" 
                Content="20% Height" 
                Margin="5"/>
        
        <!-- 同时设置宽高百分比 -->
        <Button local:PercentageLayout.WidthPercent="80" 
                local:PercentageLayout.HeightPercent="15" 
                Content="80% Width + 15% Height" 
                Margin="5"/>
    </StackPanel>
</UserControl>

通用XAML（WPF/UWP）实现代码 #

1. 定义附加属性类 #

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

public static class PercentageLayout
{
    public static readonly DependencyProperty WidthPercentProperty =
        DependencyProperty.RegisterAttached("WidthPercent", typeof(double), typeof(PercentageLayout),
            new PropertyMetadata(0.0, OnPercentChanged));

    public static readonly DependencyProperty HeightPercentProperty =
        DependencyProperty.RegisterAttached("HeightPercent", typeof(double), typeof(PercentageLayout),
            new PropertyMetadata(0.0, OnPercentChanged));

    public static double GetWidthPercent(UIElement element) => (double)element.GetValue(WidthPercentProperty);
    public static void SetWidthPercent(UIElement element, double value) => element.SetValue(WidthPercentProperty, value);

    public static double GetHeightPercent(UIElement element) => (double)element.GetValue(HeightPercentProperty);
    public static void SetHeightPercent(UIElement element, double value) => element.SetValue(HeightPercentProperty, value);

    private static void OnPercentChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
    {
        if (d is FrameworkElement control && control.Parent is FrameworkElement parent)
        {
            parent.SizeChanged += (_, __) => UpdateControlSize(control);
            UpdateControlSize(control);
        }
    }

    private static void UpdateControlSize(FrameworkElement control)
    {
        if (control.Parent is not FrameworkElement parent) return;

        var widthPercent = GetWidthPercent(control);
        if (widthPercent > 0)
        {
            control.Width = parent.ActualWidth * (widthPercent / 100);
        }

        var heightPercent = GetHeightPercent(control);
        if (heightPercent > 0)
        {
            control.Height = parent.ActualHeight * (heightPercent / 100);
        }
    }
}

2. XAML 中使用 #

逻辑和Avalonia一致，引入命名空间后直接使用：

<Window x:Class="YourProjectNamespace.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:YourProjectNamespace"
        Title="MainWindow" Height="450" Width="800">
    <StackPanel Width="400" Height="300">
        <Button local:PercentageLayout.WidthPercent="50" Content="50% Width" Margin="5"/>
        <Button local:PercentageLayout.HeightPercent="20" Content="20% Height" Margin="5"/>
    </StackPanel>
</Window>

关键注意事项 #

• 动态尺寸适配：当父容器尺寸变化（如窗口拉伸）时，控件会自动重新计算百分比尺寸，无需额外处理。
• 边界限制：可以结合MinWidth/MaxWidth、MinHeight/MaxHeight属性，限制百分比尺寸的取值范围，避免控件过小或过大。
• 参照容器：默认逻辑是基于直接父容器计算百分比，如果需要参照非直接父元素，可扩展附加属性添加RelativeTo参数，指定目标容器。

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