# 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.

```csharp
// 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](https://xnafiddle.net/#snippet=H4sIAAAAAAAACm2PT0vDQBDF74F8hyGnhJQlKF6sEbSC9iJign8gUNZkbYZuZ2U7MWLpd3eTKNSme5md33szzNv6HkAw39w26-Ac2DZq0hMkZJQav5XDwae0sCmt0foJVasspECqhWwPhdG0oH2PuKqq3Dwaw2PpxS04Sw7p61H6jBXXTjlJRtKdwmXNx7U5kbIPkpQWGctylX3IEmnZmZ21oHdjIURiQIeSqSsXcNrVOI4K2hYE7nW53xpmQ7-Jr_umD9Tph3lnNeoqHCb-PEMncvXVXVoEwwr3gRjwv2emsVxBnEK4mMAigvRykMdrbiSrHNdK3JtW5CZj67L1Z-0C39v53g-0fe7K2AEAAA)

<figure><img src="https://2695663588-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M_fzQmxQ1VeUFHcoo2c%2Fuploads%2Fgit-blob-32664ecc42428cc13c2e7e73d7d17fc5639ebbe0%2F13_09%2043%2023.gif?alt=media" alt=""><figcaption><p>Children in a ScrollViewer</p></figcaption></figure>

## 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](https://docs.flatredball.com/gum/code/controls/scrollviewer/horizontal-scrolling) page.

## 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.

```csharp
// 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](https://xnafiddle.net/#snippet=H4sIAAAAAAAACnVRwU4CMRS8k_APL3tahCyI4SJ6MByUizG7RiXZS7P7ZF_svpq2iEr8d9sqZIGllyYz03lvpptuByCam9tVHV2C1SscBISYLAlJ3-jg6ENoMIVWUj4RrlHDNTCuIWtAcW-ac1OT3JTlo0qVssfUizOYjA7RRSv6TKWtHDMeHVF3SMvKtnNzZtQPglEmmRXFW_YuCuKlFztpzj6SFlyqehvmy1iskzRgYeVXpSEmtkBOMpq66wou_N3v93Le5AzueB_ys1IsrOClxH-_mZJKY7mD0xVbqjE4-4eHXc0qkmW8b7XV7qOhvr_dk3v8tJnLJZ0xnMF56M8_GQ6BlVsES7AKDLoU-yYLMMQFAoqiAr1b3viyTOvY7U-4Dlr53XecEoRKmvXEjRTxeDLpDZq5TiC-lJ-o2_npdn4Bp89eML4CAAA)

<figure><img src="https://2695663588-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M_fzQmxQ1VeUFHcoo2c%2Fuploads%2Fgit-blob-039e9160bb30e94a80df74b98f51218e154c004a%2F13_09%2044%2012.gif?alt=media" alt=""><figcaption><p>ScrollViewer displaying multiple ColoredRectangles</p></figcaption></figure>

## Code Example: Wrapping Children

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

```csharp
// 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](https://xnafiddle.net/#snippet=H4sIAAAAAAAAA31RwWrCQBD9lSX0EKGEVQ8FxYPJoQgWSg31kss2mZihcVY2k9o2-O_dTdSaFJrDwsx78-bNS-Otqsd6783Y1HDvISGjKvEbvJn3oYyoUqPL8hXhCEYsBMFRbG5a_mie0C0n2GLGhWVOx3IILbMs1i9a89-pJaWFNr51YgUM5Ebt4dwMIiAG40acISQC86wISrukp7G6Ipb6SwuiAsvMAK3Vl67ZTrktT4rUDkw1QIM15GxN4q7gDav0vS-1NepQXSaskgvNMnJrHYkFLoScCxRJLeU0EmPpKldMwu4dJdQkJOznTnmrmTWdUw3bok3G4R12TfNB9vsxfLpL7lrZScgkGjx1RZ_4X7CxPrhzLyuH_6q90-90HOfknX4A80bhzy4CAAA)

<figure><img src="https://2695663588-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M_fzQmxQ1VeUFHcoo2c%2Fuploads%2Fgit-blob-4d29bf4a74bef29dff6291c468c7dee57f9e125c%2F11_07%2054%2007.png?alt=media" alt=""><figcaption><p>ScrollViewer with wrapped children</p></figcaption></figure>

## 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](https://docs.flatredball.com/gum/code/layout/resizing-the-game-window) page.

```csharp
// 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](https://xnafiddle.net/#snippet=H4sIAAAAAAACA61Rz2vCMBS--1c8eqpUgrDbnANXwQk7DK16KUhm3-yDmJQktVPxf1_SqjhlO61Q0ny_Xvrl0AIIxmZUboJHsLrEjgdIkiUuaI8ODRYkM1WxgRCqmhnUEzS0J7mGfu3opfKkiAWhtFNni3Mu15hB1Idw2YFlG_rPqTykEtzjhs3GLOZyy82CMpu7oJHmRU4rM8QtrZDNCatCactqvnfve0Va5_YPYyP44ZwoZdmsyLjFN75TpQ3bjj-6N3WRGsxKKyF8AmqXLLGC6RVUq681bJBlifKp99ScTMlFc_yZa9P4o5YbNuSWJ7sCDRvSBqUhJT3tITZBwS1tMVHvXLsibzPPXXV_Gdb88n9NuzTcrQv6VBpCkhaohtzyBA9-jaL25WZ9ix-ltUqe-nupN3U9nr9tL85JZGHjOGuaHUvwyw9PgybCfUAE5O8raB1b359-Fhi3AgAA)