WinUI3中代码创建的ScrollViewer在对话框内对齐异常求助

在WinUI3环境下通过C#代码创建ContentDialog时，若内部的ScrollViewer出现滚动条未紧贴对话框右侧、反而覆盖内容的情况，可通过以下方式修复：

当前效果 #

期望效果 #

问题根源 #

原代码中设置了HorizontalAlignment = HorizontalAlignment.Right，这会让ScrollViewer仅靠右对齐，但不会自动填充ContentDialog的内容宽度，导致ScrollViewer的内容区域与滚动条重叠。

修正代码 #

StackPanel contentPanel = new StackPanel()
{
    Orientation = Orientation.Vertical,
    Margin = new Thickness(12), // 添加内边距优化视觉体验
    Children =
    {
        new TextBlock
        {
            Text = "Choose a color then select Save.",
            Margin = new Thickness(0, 0, 0, 10)
        },

        new ColorPicker
        {
            ColorSpectrumShape = ColorSpectrumShape.Ring,
            // 保留你的其他设置
        }
    }
};

ScrollViewer scrollViewer = new ScrollViewer
{
    Content = contentPanel,
    VerticalScrollBarVisibility = ScrollBarVisibility.Auto,
    HorizontalScrollBarVisibility = ScrollBarVisibility.Auto,
    VerticalAlignment = VerticalAlignment.Stretch,
    HorizontalAlignment = HorizontalAlignment.Stretch, // 改为Stretch填充对话框内容宽度
    HorizontalContentAlignment = HorizontalAlignment.Stretch, // 让内部内容铺满ScrollViewer宽度
};

ContentDialog dialog = new()
{
    Title = "Choose a color",
    Content = scrollViewer,
    PrimaryButtonText = "Save",
    CloseButtonText = "Discard",
    DefaultButton = ContentDialogButton.Primary,
    XamlRoot = this.Content.XamlRoot,
};

关键修改点 #

• 将ScrollViewer的HorizontalAlignment从Right改为Stretch，使其自动适配ContentDialog的可用宽度
• 添加HorizontalContentAlignment = Stretch，确保内部StackPanel能铺满ScrollViewer宽度，避免内容与滚动条重叠
• 给StackPanel设置Margin，避免内容紧贴对话框边框，提升界面美观度

内容的提问来源于stack exchange，提问作者Stack Overflow User