CODEWITHSUNDEEP
c#wpfscrollbar
Doro
Doro

Reputation: 785

StackPanel in ScrollViewer WPF

I've got a problem with extremly strange behaviour of ScrollViewer's ScrollBar.

Here is my code:

<ScrollViewer CanContentScroll="True">
    <StackPanel>
        <StackPanel>
            <Button Height="40"/>
            <Button Height="40"/>
            <Button Height="40"/>
            <Button Height="40"/>
            <Button Height="40"/>
            <Button Height="40"/>
            <Button Height="40"/>
            <Button Height="40" Background="Yellow"/>
        </StackPanel>

        <StackPanel>
            <Button Height="40" Background="Red"/>
            <Button Height="40" Background="Red"/>
            <Button Height="40" Background="Red"/>
            <Button Height="40" Background="Red"/>
            <Button Height="40" Background="Red"/>
            <Button Height="40" Background="Red"/>
            <Button Height="40" Background="Red"/>
            <Button Height="40" Background="Red"/>
            <Button Height="40" Background="Red"/>
            <Button Height="40" Background="Red"/>
            <Button Height="40" Background="Green"/>
        </StackPanel>
    </StackPanel>
</ScrollViewer>

The problem is in those StackPanels inside StackPanel. If there's only one main StackPanel without StackPanels inside it, it acts ok.

I've tried using ScrollViewer inside main StackPanel for each of it's childrens. The other problem in that solution is that I don't want to have fixed height of StackPanels.

@EDIT: The problem is that ScrollBar doesn't shift smoothly and it prevents showing all the content. Sorry for lack of informations.

Upvotes: 0

Views: 6689

Answers (2)

Suresh
Suresh

Reputation: 4159

You are getting that strange behaviour because you set CanContentScroll to True on ScrollViewer. That means, the ScorllViewer is treating each StackPanel as a single content element and scrolling by height of each StackPanel instead of height of each Button within the child StackPanels.

To get rid of that strange behavior, change your code to:

<ScrollViewer>
    <StackPanel>
        <StackPanel>
            <Button Height="40"/>
            <Button Height="40"/>
            <Button Height="40"/>
            <Button Height="40"/>
            <Button Height="40"/>
            <Button Height="40"/>
            <Button Height="40"/>
            <Button Height="40" Background="Yellow"/>
        </StackPanel>

        <StackPanel>
            <Button Height="40" Background="Red"/>
            <Button Height="40" Background="Red"/>
            <Button Height="40" Background="Red"/>
            <Button Height="40" Background="Red"/>
            <Button Height="40" Background="Red"/>
            <Button Height="40" Background="Red"/>
            <Button Height="40" Background="Red"/>
            <Button Height="40" Background="Red"/>
            <Button Height="40" Background="Red"/>
            <Button Height="40" Background="Red"/>
            <Button Height="40" Background="Green"/>
        </StackPanel>
    </StackPanel>
</ScrollViewer>

Upvotes: 3

Aleksey
Aleksey

Reputation: 1347

You "need" add your StackPanels to ItemsControl collection: 

 <ScrollViewer CanContentScroll="True">
      <ItemsControl >
           <StackPanel>
                <StackPanel>
                    <Button Height="40"/>
                    <Button Height="40"/>
                    <Button Height="40"/>
                    <Button Height="40"/>
                    <Button Height="40"/>
                    <Button Height="40"/>
                    <Button Height="40"/>
                    <Button Height="40" Background="Yellow"/>
                </StackPanel>

                <StackPanel>
                    <Button Height="40" Background="Red"/>
                    <Button Height="40" Background="Red"/>
                    <Button Height="40" Background="Red"/>
                    <Button Height="40" Background="Red"/>
                    <Button Height="40" Background="Red"/>
                    <Button Height="40" Background="Red"/>
                    <Button Height="40" Background="Red"/>
                    <Button Height="40" Background="Red"/>
                    <Button Height="40" Background="Red"/>
                    <Button Height="40" Background="Red"/>
                    <Button Height="40" Background="Green"/>
                </StackPanel>
            </StackPanel>
       </ItemsControl >
   </ScrollViewer>

Upvotes: 0

Related Questions