# Other .NET Programming > Windows Presentation Foundation (WPF) & XAML forum >  How can I use scrollviewer to make it resizable when created button get off screen?

## TheUninvited

So basically I have a button that creates button on the right side after let's say 20 clicks my buttons becoming hidden because they become too many to fit in screen. So I wanted to use a scrollviewer so that I can use the scrollbar to view the hidden created buttons that I have created?

I also use grid with definition so I must set on scrollviewer the row and columns

----------


## Arjay

Put the buttons into a StackPanel. Set the height to a fixed value (this will cause the scroll bar to appear when the number of buttons exceed the visible area set by the height).

----------


## TheUninvited

> Put the buttons into a StackPanel. Set the height to a fixed value (this will cause the scroll bar to appear when the number of buttons exceed the visible area set by the height).



Your info is innacurate.

You said put the buttons in a stackpanel and the scrollviewer where? outside of stackpanel?



```
        <Border Padding="10">
<Grid x:Name="GategoryGrid">
    <Grid.RowDefinitions>
        <RowDefinition Height="140"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>

    <ScrollViewer>
    <StackPanel Grid.Row="0" Height="100">
        <!--Content-->
                    <Button>Text</Button>
                    <Button>Text</Button>
    </StackPanel>
                </ScrollViewer>

            </Grid>
        </Border>
```

----------


## Arjay

It's been 8 years or so since I've coded WPF, so the memory is failing...

Fortunately, WPF is easy and there is plenty of help to google.  Below code dynamically adds a button to a stack panel and the scrollbar gets added when there are more than 8 button items.

Note: I didn't dynamically add button handlers - there are several approaches to this.  In a real app, you'll want to be able to tell which button click on the handler (even though you can use the same handler for all the buttons).


```
<Window x:Class="WpfApp1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfApp1"
        mc:Ignorable="d"
        Title="MainWindow" Width ="275" Height="275">
    <Grid x:Name="CategoryGrid" Width="250px" >
        <Grid.RowDefinitions>
            <RowDefinition Height="200"/>
            <RowDefinition Height="35"/>
        </Grid.RowDefinitions>
        <Border BorderThickness="1" BorderBrush="Black">            
            <ScrollViewer Padding="20" Grid.Row="0" Height="200" VerticalScrollBarVisibility="Auto">
                <StackPanel x:Name="CategoryStackPanel" Orientation="Vertical">
                </StackPanel>
            </ScrollViewer>
        </Border>
        <Button Grid.Row="1" Height="20" Width="100" Click="Button_Click">Add Button</Button>
    </Grid>
</Window>
```

C#


```
namespace WpfApp1
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }

        private void Button_Click(object sender, RoutedEventArgs e)

        {
            CategoryStackPanel.Children.Add(new Button() { Content = $"Button: {++ButtonCount}" });
        }

        private int ButtonCount { get; set; }
    }
}
```

----------


## TheUninvited

> The StackPanel inherits from ScrollViewer.  If you use a StackPanel and set the Height property as I have I posted, a vertical scrollbar will appear as you add buttons to the StackPanel.
> 
> 
> ```
> <Border Padding="10">
> <Grid x:Name="CategoryGrid">
>     <Grid.RowDefinitions>
>         <RowDefinition Height="140"/>
>     </Grid.RowDefinitions>
> ...


This is how i managed it on my own  :Big Grin:  but thanks for help!



```
<Border>
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="140"/>
                <RowDefinition Height="140"/>
            </Grid.RowDefinitions>

            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="140"></ColumnDefinition>
                <ColumnDefinition Width="*"></ColumnDefinition>
            </Grid.ColumnDefinitions>
            <Button Grid.Column="0" Grid.Row="0" Margin="10,0,0,0" Height="100" Content="AddCategory" Click="AddCategory_Click" />

            <ScrollViewer Grid.Column="1"  Grid.Row="1" Name="ScrollViewer1" VerticalScrollBarVisibility="Disabled" HorizontalScrollBarVisibility="Visible"  CanContentScroll="True">
                <StackPanel Name="StackPanel1" OverridesDefaultStyle="False"    VerticalAlignment="Top" HorizontalAlignment="Left">
                    <Grid x:Name="GategoryGrid">

                        <!--Content-->

                    </Grid>
                </StackPanel>
            </ScrollViewer>
            <Label Content="This is userControl" Grid.Column="1" HorizontalAlignment="Left" Height="100" Margin="61,174,0,-133" Grid.Row="1" VerticalAlignment="Top" Width="496" FontSize="50"/>

        </Grid>
    </Border>
```

----------


## Arjay

Try the updated version, but glad you figured it out.

----------


## TheUninvited

> It's been 8 years or so since I've coded WPF, so the memory is failing...
> 
> Fortunately, WPF is easy and there is plenty of help to google.  Below code dynamically adds a button to a stack panel and the scrollbar gets added when there are more than 8 button items.
> 
> Note: I didn't dynamically add button handlers - there are several approaches to this.  In a real app, you'll want to be able to tell which button click on the handler (even though you can use the same handler for all the buttons).
> 
> 
> ```
> <Window x:Class="WpfApp1.MainWindow"
> ...


I tried to use yours but the window of the box is too small how to make it wider ?

----------


## Arjay

Title="MainWindow" Width ="*275*" Height="275">

----------

