Why is a ScrollViewer created with code not aligned properly inside of a dialog?

Question

I am trying to create content inside of a Scrollbar in a Dialog. I am doing this through C# instead of XAML even though this is Win UI 3. The problem I am experiencing is that my Scrollbar is not on the right side of the dialog instead it is covering content.

This is the my current code that makes the scrollbar:

StackPanel contentPanel = new StackPanel()
{
    Orientation = Orientation.Vertical,
    Children =
    {
new TextBlock
{
    Text = "Choose a color then select Save.",
    Margin = new Thickness(0, 0, 0, 10)
},

new ColorPicker
{
    ColorSpectrumShape = ColorSpectrumShape.Ring,
    // Other settings...
}
    }
};

ScrollViewer scrollViewer = new ScrollViewer
{
    Content = contentPanel,
    VerticalScrollBarVisibility = ScrollBarVisibility.Auto,
    HorizontalScrollBarVisibility = ScrollBarVisibility.Auto,
    VerticalAlignment = VerticalAlignment.Stretch,
    HorizontalAlignment = HorizontalAlignment.Right,
};

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

Notice how the Scrollbar is touching the side. This what I am trying to do.

I had searched online for help but I did not find help to this issue.

I tried different ways of aligning the Scrollbar but none of those ways worked.

I had expected VerticalAlignment = VerticalAlignment.Stretch to align the Scrollbar the the right side of the dialog. This did not work.

Answer 1

Try adjusting the ScrollViewer's Padding:

double scrollbarSize = (double)App.Current.Resources["ScrollBarSize"];
Thickness scrollViewerPadding = scrollViewer.Padding;
scrollViewerPadding.Right = scrollbarSize;
scrollViewer.Padding = scrollViewerPadding;

You can learn more about ScrollBarSize in the generic.xaml file.

UPDATE

If you want the Scrollbar to be at the right edge of the ContentDialog:

• Stretch the ScrollViewer to fit in the ContentDialog.

  scrollViewer.HorizontalAlignment = HorizontalAlignment.Stretch;
  

• Update the ContentDialog's Padding (which is 24 by default).

  if (dialog.Resources.TryGetValue("ContentDialogPadding", out var value) is true &&
    value is Thickness contentDialogPadding)
    {
        contentDialogPadding.Right = 0;
        dialog.Resources["ContentDialogPadding"] = contentDialogPadding;
    }
  

Answer 2

Thanks to Gerry Schmitz I was able to load content outside of the dialog's content area using scaling.

double size = 1.05;

ScaleTransform adjustsize = new ScaleTransform
{
    ScaleX = size,
    ScaleY = size,
};

scrollViewer.RenderTransform = adjustsize;

Answer 3

It seems that the issue occurs because you align the entire ScrollViewer to the right instead of allowing it to stretch to fill the available space. Just remove HorizontalAlignment.Right and make sure that both alignments are set to Stretch. Also, if your contentPanel is a StackPanel, replace it with a Grid (or set HorizontalAlignment on the panel) to ensure that content stretches properly.

Here is fixed version:

 ScrollViewer scrollViewer = new ScrollViewer{
    Content = contentPanel,
    VerticalScrollBarVisibility = ScrollBarVisibility.Auto,
    HorizontalScrollBarVisibility = ScrollBarVisibility.Disabled, // Disable horizontal scroll
    VerticalAlignment = VerticalAlignment.Stretch,
    HorizontalAlignment = HorizontalAlignment.Stretch // Key change
};

ContentDialog dialog = new()
{
    Title = "Choose a color",
    Content = scrollViewer,
    // ... rest of your dialog properties
};