WinUI3中用C#为RichEditBox加滚动条并填满可用空间

核心问题分析 #

你遇到的滚动条异常，本质是滚动容器与内容控件的尺寸适配逻辑冲突：

• 直接用ScrollViewer包裹RichEditBox时，默认RichEditBox会自适应ScrollViewer的高度，导致内容即使超出，ScrollViewer也无法识别到滚动需求，因此无拖动块。
• 给ScrollViewer设固定宽高，会破坏Grid的星号（*）布局规则，无法自适应容器空间。

最优方案：利用 RichEditBox 内置滚动 #

RichEditBox本身内置了滚动功能，无需额外嵌套ScrollViewer，既能填满Grid单元格，又能正常显示滚动条。

完整代码示例 #

// 创建三行均分的Grid
var mainGrid = new Grid();
// 添加三行，每行占1/3空间
mainGrid.RowDefinitions.Add(new RowDefinition { Height = new GridLength(1, GridUnitType.Star) });
mainGrid.RowDefinitions.Add(new RowDefinition { Height = new GridLength(1, GridUnitType.Star) });
mainGrid.RowDefinitions.Add(new RowDefinition { Height = new GridLength(1, GridUnitType.Star) });

// 创建RichEditBox并配置滚动
var richEditBox = new RichEditBox
{
    // 开启垂直滚动，自动显示滚动条
    VerticalScrollBarVisibility = ScrollBarVisibility.Auto,
    IsVerticalRailEnabled = true,
    // 禁用水平滚动（根据需求调整）
    HorizontalScrollBarVisibility = ScrollBarVisibility.Disabled,
    // 设置控件填满Grid单元格
    HorizontalAlignment = HorizontalAlignment.Stretch,
    VerticalAlignment = VerticalAlignment.Stretch
};

// 将RichEditBox放入第三行（索引从0开始）
Grid.SetRow(richEditBox, 2);
mainGrid.Children.Add(richEditBox);

// 将Grid添加到页面/窗口（示例：假设当前是Page）
Content = mainGrid;

备选方案：强制 ScrollViewer 适配布局（不推荐） #

如果必须使用ScrollViewer，需让RichEditBox高度随内容自动增长，同时让ScrollViewer填满Grid单元格：

代码示例 #

var mainGrid = new Grid();
mainGrid.RowDefinitions.Add(new RowDefinition { Height = new GridLength(1, GridUnitType.Star) });
mainGrid.RowDefinitions.Add(new RowDefinition { Height = new GridLength(1, GridUnitType.Star) });
mainGrid.RowDefinitions.Add(new RowDefinition { Height = new GridLength(1, GridUnitType.Star) });

// 创建ScrollViewer并适配布局
var scrollViewer = new ScrollViewer
{
    VerticalScrollBarVisibility = ScrollBarVisibility.Auto,
    HorizontalScrollBarVisibility = ScrollBarVisibility.Disabled,
    HorizontalAlignment = HorizontalAlignment.Stretch,
    VerticalAlignment = VerticalAlignment.Stretch
};

// 创建RichEditBox，关键设置高度为Auto（随内容增长）
var richEditBox = new RichEditBox
{
    HorizontalAlignment = HorizontalAlignment.Stretch,
    VerticalAlignment = VerticalAlignment.Top,
    Height = double.NaN // 等同于XAML中的Height="Auto"
};

scrollViewer.Content = richEditBox;
Grid.SetRow(scrollViewer, 2);
mainGrid.Children.Add(scrollViewer);

Content = mainGrid;

方案对比 #

• 内置滚动方案：更轻量，无嵌套滚动冲突，完全适配Grid的星号布局，是首选。
• 额外ScrollViewer方案：适合需要统一滚动容器样式的场景，但需注意内容尺寸的自适应配置。

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