WPF how make StackPanel Scrollable

Tom picture Tom · Apr 19, 2014 · Viewed 12.4k times · Source

in a stackpanel i add some labels from code behind at runtime: i want make the stackpanel scrollable. In the xaml file i have:

<ScrollViewer HorizontalAlignment="Left" Height="299" Margin="592,120,0,0" VerticalAlignment="Top" Width="188" VerticalScrollBarVisibility="Auto">

    <StackPanel x:Name="stackPanelVistaProfiloTessera" Height="292" Width="170"/>

</ScrollViewer>

In the code behind i add some label to the stackpanel:

for(.....)
{
    stackPanelVistaProfiloTessera.Children.Add(new Label {....});
}

Why the stackpanel isn't scrollable? How can i resolve this?

Thanks

Answer

Heena Patil picture Heena Patil · Apr 19, 2014

Remove height and width from stackpanel..rest is working fine here.

<ScrollViewer HorizontalAlignment="Left" Background="Green" Height="299" Margin="592,120,0,0" VerticalAlignment="Top" Width="188" VerticalScrollBarVisibility="Auto">
    <StackPanel x:Name="stackPanelVistaProfiloTessera"  Background="RoyalBlue" >
        <Label Height="30" Width="100" Margin="5">label1</Label>
        <Label Height="30" Width="100" Margin="5">label1</Label>
        <Label Height="30" Width="100" Margin="5">label1</Label>
        <Label Height="30" Width="100" Margin="5">label1</Label>
        <Label Height="30" Width="100" Margin="5">label1</Label>
        <Label Height="30" Width="100" Margin="5">label1</Label>
        <Label Height="30" Width="100" Margin="5">label1</Label>
        <Label Height="30" Width="100" Margin="5">label1</Label>
        <Label Height="30" Width="100" Margin="5">label1</Label>
        <Label Height="30" Width="100" Margin="5">label1</Label>
        <Label Height="30" Width="100" Margin="5">label1</Label>
        <Label Height="30" Width="100" Margin="5">label1</Label>
        <Label Height="30" Width="100" Margin="5">label1</Label>
        <Label Height="30" Width="100" Margin="5">label1</Label>
        <Label Height="30" Width="100" Margin="5">label1</Label>
        <Label Height="30" Width="100" Margin="5">label1</Label>
    </StackPanel>
</ScrollViewer>

Output look like this.

enter image description here

and you can set margin to stackpanel if you are using height and width for design purpose.