ScrollViewer

Introduction

The ScrollViewer control provides a container which can hold Gum objects (including other Gum Forms objects). The user can scroll the ScrollViewer with the mouse or ScrollBar.

By default the ScrollViewer's InnerPanel expands automatically in response to its children and stacks its children top-to-bottom. Of course, this behavior can be changed since the InnerPanel is a standard GraphicalUiElement.

Code Example: Creating a ScrollViewer with Forms Children

ScrollViewers can contain other forms controls. The following code creates a ScrollViewer and adds buttons using the AddChild method.

// Initialize
var scrollViewer = new ScrollViewer();
scrollViewer.AddToRoot();
scrollViewer.X = 50;
scrollViewer.Y = 50;
scrollViewer.Width = 200;
scrollViewer.Height = 200;
scrollViewer.InnerPanel.StackSpacing = 2;

for (int i = 0; i < 30; i++)
{
    var button = new Button();
    scrollViewer.AddChild(button);
    button.Text = "Button " + i;
    button.Click += (_, _) =>
        button.Text = DateTime.Now.ToString();
}

Try on XnaFiddle.NET

Children in a ScrollViewer

Scrolling a ScrollViewer

ScrollViewers can be scrolled by the user using by performing any of the following actions:

• Clicking on the ScrollBar buttons or track
• Dragging the ScrollBar thumb
• Using the mouse wheel to scroll vertically
• Using shift+mouse wheel to scroll horizontally. For more information see the Horizontal Scrolling page.

Mouse Wheel Scroll Speed

The MouseWheelScrollSpeed property controls how far the content scrolls per mouse-wheel notch. It applies to both vertical scrolling and shift+wheel horizontal scrolling. Larger values scroll farther per notch; the default is 30.

// Initialize
var scrollViewer = new ScrollViewer();
// Scroll farther per wheel notch than the default of 30.
scrollViewer.MouseWheelScrollSpeed = 60;

MouseWheelScrollSpeed is independent of SmallChange, which controls the distance scrolled when clicking the ScrollBar's arrow buttons. Adjusting one does not affect the other.

Because MouseWheelScrollSpeed is defined on ScrollViewer, it is also available on every control that derives from it, including ItemsControl, ListBox, and ComboBox.

Code Example: Creating a ScrollViewer With Non-Forms Children

The following code creates a ScrollViewer and adds ColoredRectangleRuntimes to the ScrollViewer. Any non-Forms visual object can be added to the ScrollViewer through AddChild.

// Initialize
var scrollViewer = new ScrollViewer();
scrollViewer.AddToRoot();
scrollViewer.X = 50;
scrollViewer.Y = 50;
scrollViewer.Width = 200;
scrollViewer.Height = 200;
scrollViewer.InnerPanel.StackSpacing = 2;

var random = new System.Random();
for (int i = 0; i < 30; i++)
{
    var innerRectangle = new ColoredRectangleRuntime();
    scrollViewer.AddChild(innerRectangle);
    innerRectangle.X = random.NextSingle() * 150;
    // no need to set innerRectangle.Y since each rectangle stacks
    innerRectangle.Width = 30;
    innerRectangle.Height = 30;
    innerRectangle.Color = new Color(random.Next(255), random.Next(255), random.Next(255));
}

Try on XnaFiddle.NET

ScrollViewer displaying multiple ColoredRectangles

Code Example: Wrapping Children

The following code shows how to wrap children in a ScrollViewer. It modifies the InnerPanel to change the layout type.

// Initialize
var scrollViewer = new ScrollViewer();
scrollViewer.Width = 310;
scrollViewer.AddToRoot();
scrollViewer.Anchor(Gum.Wireframe.Anchor.Center);
var innerPanel = scrollViewer.InnerPanel;
innerPanel.ChildrenLayout = Gum.Managers.ChildrenLayout.LeftToRightStack;
innerPanel.WrapsChildren = true;

for(int i= 0; i < 100; i++)
{
    var button = new Button();
    button.Width = 70;
    button.Text = $"Btn {i}";
    button.Anchor(Gum.Wireframe.Anchor.TopLeft);
    scrollViewer.AddChild(button);
}

Try on XnaFiddle.NET

ScrollViewer with wrapped children

Code Example: Filling Available Space

The following code creates a ScrollViewer that fills the entire screen using RelativeToParent sizing. The code also subscribes to Window.ClientSizeChanged to update the Gum canvas and layout when the window is resized. For more information on handling resizes, see the Resolution and Resizing the Game Window page.

// Initialize
Window.AllowUserResizing = true;
Window.ClientSizeChanged += (_, _) =>
{
    GumUI.CanvasWidth = GraphicsDevice.Viewport.Width;
    GumUI.CanvasHeight = GraphicsDevice.Viewport.Height;
    GumUI.Root.UpdateLayout();
};

var scrollViewer = new ScrollViewer();
scrollViewer.AddToRoot();
scrollViewer.Visual.WidthUnits = Gum.DataTypes.DimensionUnitType.RelativeToParent;
scrollViewer.Width = 0;
scrollViewer.Visual.HeightUnits = Gum.DataTypes.DimensionUnitType.RelativeToParent;
scrollViewer.Height = 0;

for (int i = 0; i < 30; i++)
{
    var button = new Button();
    scrollViewer.AddChild(button);
    button.Text = "Button " + i;
}

Try on XnaFiddle.NET