.NET MAUI 8中如何从自定义控件自身类获取宽度？

一、构造函数拿不到宽度的原因 #

控件的构造函数执行时，还没完成界面布局渲染，此时this.Width、this.Content.Width都是未初始化的默认值（通常是double.NaN或0）。只有当控件完成布局并显示到界面上后，才会获得实际的宽度值——这就是为什么你在XAML绑定里能拿到宽度，但构造函数里拿不到的核心原因。

二、获取控件实际宽度的正确方法 #

1. 订阅SizeChanged事件 #

在构造函数里订阅控件的SizeChanged事件，当控件尺寸首次确定或发生变化时，会触发该事件，此时就能拿到真实宽度：

public RangeSlider()
{
    this.Content = new Grid
    {
        Children =
        {
            Track,
            Range,
            LeftThumb,
            RightThumb
        },
        Padding = new Thickness(16, 3)
    };

    // 订阅尺寸变化事件
    this.SizeChanged += RangeSlider_SizeChanged;
}

private void RangeSlider_SizeChanged(object sender, EventArgs e)
{
    // 过滤未初始化的情况
    if (double.IsNaN(this.Width)) return;
    
    // 这里可以用实际宽度做计算，比如初始把Range设为控件宽度的一半
    Range.WidthRequest = this.Width / 2;
    
    // 初始化滑块位置
    LeftThumb.TranslationX = 0;
    RightThumb.TranslationX = Range.WidthRequest;
}

2. 重写OnSizeAllocated方法 #

这是MAUI控件生命周期的核心方法，当控件被分配尺寸时会调用，适合在尺寸变化时更新布局：

protected override void OnSizeAllocated(double width, double height)
{
    base.OnSizeAllocated(width, height);
    
    // 避免重复计算（尺寸未变化时跳过）
    if (double.IsNaN(width) || width == 0) return;
    
    // 使用分配好的width值做计算
    Range.WidthRequest = width;
    
    // 更新滑块位置
    UpdateThumbPositions();
}

private void UpdateThumbPositions()
{
    // 示例：根据Range宽度设置滑块位置
    LeftThumb.TranslationX = 0;
    RightThumb.TranslationX = Range.WidthRequest;
}

三、更优的位置计算方案 #

1. 用布局容器替代硬编码计算 #

可以使用RelativeLayout直接定位轨道、范围条和滑块，省去手动计算偏移量的麻烦：

public RangeSlider()
{
    var relativeLayout = new RelativeLayout();
    
    // 轨道占满控件宽度
    relativeLayout.Add(Track, 
        Constraint.Constant(0),
        Constraint.Constant(0),
        Constraint.RelativeToParent(parent => parent.Width),
        Constraint.Constant(2));
    
    // 范围条初始占控件一半宽度
    relativeLayout.Add(Range,
        Constraint.Constant(0),
        Constraint.Constant(0),
        Constraint.RelativeToParent(parent => parent.Width / 2),
        Constraint.Constant(2));
    
    // 左滑块居中对齐轨道起点
    relativeLayout.Add(LeftThumb,
        Constraint.Constant(-LeftThumb.WidthRequest / 2),
        Constraint.Constant(-(LeftThumb.HeightRequest - 2)/2));
    
    // 右滑块居中对齐范围条终点
    relativeLayout.Add(RightThumb,
        Constraint.RelativeToView(Range, (parent, view) => view.Width - RightThumb.WidthRequest / 2),
        Constraint.Constant(-(RightThumb.HeightRequest - 2)/2));
    
    this.Content = relativeLayout;
}

2. 用可绑定属性实现数据驱动布局 #

给RangeSlider定义Minimum、Maximum、LowerValue、UpperValue等可绑定属性，通过属性联动自动计算布局，比手动维护更易扩展：

// 定义可绑定属性
public static readonly BindableProperty LowerValueProperty =
    BindableProperty.Create(nameof(LowerValue), typeof(double), typeof(RangeSlider), 0.0);

public static readonly BindableProperty UpperValueProperty =
    BindableProperty.Create(nameof(UpperValue), typeof(double), typeof(RangeSlider), 50.0);

public static readonly BindableProperty MaximumProperty =
    BindableProperty.Create(nameof(Maximum), typeof(double), typeof(RangeSlider), 100.0);

public double LowerValue
{
    get => (double)GetValue(LowerValueProperty);
    set => SetValue(LowerValueProperty, value);
}

public double UpperValue
{
    get => (double)GetValue(UpperValueProperty);
    set => SetValue(UpperValueProperty, value);
}

public double Maximum
{
    get => (double)GetValue(MaximumProperty);
    set => SetValue(MaximumProperty, value);
}

// 尺寸变化时根据属性值更新布局
private void UpdateLayout()
{
    if (double.IsNaN(this.Width)) return;
    
    var pixelPerUnit = this.Width / Maximum;
    var rangeWidth = (UpperValue - LowerValue) * pixelPerUnit;
    Range.WidthRequest = rangeWidth;
    
    // 计算滑块位置（修正滑块居中偏移）
    LeftThumb.TranslationX = (LowerValue * pixelPerUnit) - (LeftThumb.WidthRequest / 2);
    RightThumb.TranslationX = (UpperValue * pixelPerUnit) - (RightThumb.WidthRequest / 2);
}

后续只需在属性变化或尺寸变化时调用UpdateLayout()，就能自动更新UI。

3. 滑块边界限制优化 #

因为滑块有固定宽度，要避免滑块超出轨道范围，计算时加上边界限制：

// 左滑块不能超出轨道左边界
LeftThumb.TranslationX = Math.Max(-LeftThumb.WidthRequest / 2, LeftThumb.TranslationX);
// 左滑块不能超过右滑块位置
LeftThumb.TranslationX = Math.Min(RightThumb.TranslationX - LeftThumb.WidthRequest, LeftThumb.TranslationX);

// 右滑块不能超出轨道右边界
RightThumb.TranslationX = Math.Min(this.Width - RightThumb.WidthRequest / 2, RightThumb.TranslationX);
// 右滑块不能小于左滑块位置
RightThumb.TranslationX = Math.Max(LeftThumb.TranslationX + LeftThumb.WidthRequest, RightThumb.TranslationX);

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