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 what my code does right now

This is the my current code that makes the scrollbar:

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,
};

This is how I want it to look

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. This is my current code:

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,
};

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

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 what my code does right now

This is the my current code that makes the scrollbar:

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,
};

This is how I want it to look

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. This is my current code:

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,
};

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

• c#
• xaml
• desktop-application
• winui-3
• winui

2 Answers 2

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
}; 

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.