locked
ScrollViewer vertical scrollbar not showing or clipped RRS feed

  • Question

  • Hello, consider for the following:

    <UserControl x:Class="MS.TNViewerVertical2" 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" mc:Ignorable="d" d:DesignWidth="125" Height="250"> <StackPanel x:Name="TNViewer" Orientation="Vertical" MouseMove="TNViewer_MouseMove" MouseLeave="TNViewer_MouseLeave" Background="Pink" MinHeight="100"> <ScrollViewer x:Name="TNScroller" Padding="0" BorderThickness="0" HorizontalScrollBarVisibility="Hidden" VerticalScrollBarVisibility="Auto" HorizontalAlignment="Left" VerticalAlignment="Top" > <StackPanel x:Name="ImagesList" Orientation="Vertical" HorizontalAlignment="Center" VerticalAlignment="Center"> <Image Height="100" Source="/RC/UPS128.png" Stretch="Fill" Width="100"/> <Image Height="100" Source="/RC/UPS128.png" Stretch="Fill" Width="100"/> <Image Height="100" Source="/RC/UPS128.png" Stretch="Fill" Width="100"/> <Image Height="100" Source="/RC/UPS128.png" Stretch="Fill" Width="100"/> </StackPanel> </ScrollViewer> </StackPanel> </UserControl>

    HTML clipboard

    Can someone explain why the ScrollViewer vertical scrollbar  is not showing?  Even if I force it visible the end of it clipped.

    Why is the behavior here not symmetrical with a horizontal layout?  What I mean, is if you were to take this xaml and flip it around width with height etc,... for a horizontal layout the ScrollViewer horizontal scrollbar shows up and reflects the width size of the UserContol eg. 250

    The images are 100x100 I guess you could force the ImagesList to be 400 high (wide for horizontal layout) to experiment without images.

    Thank you.

    ps. is insert XML the right way to insert xaml in this forum?  thanks

    Friday, September 10, 2010 12:12 AM

Answers

  • <UserControl x:Class="MS.TNViewerVertical2"
        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"
        mc:Ignorable="d"
         d:DesignWidth="125" Height="250">
    
        <StackPanel
                        x:Name="TNViewer"
                        Orientation="Vertical"
    					MouseMove="TNViewer_MouseMove"
                        MouseLeave="TNViewer_MouseLeave"
                        Background="Pink" MinHeight="100" Height="{Binding Height, ElementName=userControl}">
    
    
            <ScrollViewer x:Name="TNScroller"
                                  Padding="0"
                                  BorderThickness="0"
                                  HorizontalScrollBarVisibility="Hidden" 
                                                              VerticalScrollBarVisibility="Auto" 
                                                              HorizontalAlignment="Left" 
                                                              VerticalAlignment="Top" Height="{Binding Height, ElementName=TNViewer}"                                                                                      
                                  >
                <StackPanel x:Name="ImagesList" Orientation="Vertical" 
                            HorizontalAlignment="Center" VerticalAlignment="Top">
                    <Image Height="100" Source="Images/Splash.jpg" Stretch="Fill" Width="100"/>
                    <Image Height="100" Source="Images/Splash.jpg" Stretch="Fill" Width="100"/>
                    <Image Height="100" Source="Images/Splash.jpg" Stretch="Fill" Width="100"/>
                    <Image Height="100" Source="Images/Splash.jpg" Stretch="Fill" Width="100"/>
                </StackPanel>
            </ScrollViewer>
        </StackPanel>
    </UserControl>
    



    <UserControl x:Class="MS.TNViewerVertical2"
        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"
        mc:Ignorable="d"
         d:DesignWidth="125" Height="250">
        <StackPanel
                        x:Name="TNViewer"
                        Orientation="Vertical"
    MouseMove="TNViewer_MouseMove"
                        MouseLeave="TNViewer_MouseLeave"
                        Background="Pink" MinHeight="100" Height="{Binding Height, ElementName=userControl}">
            <ScrollViewer x:Name="TNScroller"
                                  Padding="0"
                                  BorderThickness="0"
                                  HorizontalScrollBarVisibility="Hidden" 
                                                              VerticalScrollBarVisibility="Auto" 
                                                              HorizontalAlignment="Left" 
                                                              VerticalAlignment="Top" Height="{Binding Height, ElementName=TNViewer}"                                                                                      
                                  >
                <StackPanel x:Name="ImagesList" Orientation="Vertical" 
                            HorizontalAlignment="Center" VerticalAlignment="Top">
                    <Image Height="100" Source="Images/Splash.jpg" Stretch="Fill" Width="100"/>
                    <Image Height="100" Source="Images/Splash.jpg" Stretch="Fill" Width="100"/>
                    <Image Height="100" Source="Images/Splash.jpg" Stretch="Fill" Width="100"/>
                    <Image Height="100" Source="Images/Splash.jpg" Stretch="Fill" Width="100"/>
                </StackPanel>
            </ScrollViewer>
        </StackPanel>
    </UserControl>

    Hello Marie


    If you don't want to fix the height of the scrollviewer than you can do one thing you can bind your TNViewer's height to the UserControl's height.

    Than you can bind your TNScroller's height to the height of the TNViewer's height.By doing this you can achieve what you want.

    and while using your usercontrol in main page assign the what ever height you want to that usercontrol.

    I think it will work try it out ...




    if it helps you don't forgot to mark as answer .... :D

    Regards

    Parth Pandya


    Friday, September 10, 2010 4:27 AM

All replies

  • Scrollviewer's vertical scroll is not showing because you haven't give the Scrollviewer's height so it is taking it's height as Auto.

    So when you Insert this images in it than it's height will grow up to 400 so every images are fit into this height so there is no needs to show vertical scroll.



    <UserControl x:Class="ElasticScrollingPoc.MainPage"
        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"
        mc:Ignorable="d"
        Width="125" Height="250">
        <StackPanel
                        x:Name="TNViewer"
                        Orientation="Vertical"
                        Background="Pink" MinHeight="100" Height="250">
            <ScrollViewer x:Name="TNScroller"
                                  Padding="0"
                                  BorderThickness="0"
                                  HorizontalScrollBarVisibility="Hidden" 
                                                              VerticalScrollBarVisibility="Auto" 
                                                              HorizontalAlignment="Left" 
                                                              VerticalAlignment="Top" Height="250"                                                                                     
                                  >
                <StackPanel x:Name="ImagesList" Orientation="Vertical" 
                            HorizontalAlignment="Center" VerticalAlignment="Center">
                    <Image Height="100" Source="Images/Splash.jpg" Stretch="Fill" Width="100"/>
                    <Image Height="100" Source="Images/Splash.jpg" Stretch="Fill" Width="100"/>
                    <Image Height="100" Source="Images/Splash.jpg" Stretch="Fill" Width="100"/>
                    <Image Height="100" Source="Images/Splash.jpg" Stretch="Fill" Width="100"/>
                </StackPanel>
            </ScrollViewer>
        </StackPanel>
    </UserControl>

    <UserControl x:Class="ElasticScrollingPoc.MainPage"

        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"

        mc:Ignorable="d"

        Width="125" Height="250">


        <StackPanel

                        x:Name="TNViewer"

                        Orientation="Vertical"

                        Background="Pink" MinHeight="100" Height="250">



            <ScrollViewer x:Name="TNScroller"

                                  Padding="0"

                                  BorderThickness="0"

                                  HorizontalScrollBarVisibility="Hidden" 

                                                              VerticalScrollBarVisibility="Auto" 

                                                              HorizontalAlignment="Left" 

                                                              VerticalAlignment="Top" Height="250"                                                                                     

                                  >

                <StackPanel x:Name="ImagesList" Orientation="Vertical" 

                            HorizontalAlignment="Center" VerticalAlignment="Center">

                    <Image Height="100" Source="Images/Splash.jpg" Stretch="Fill" Width="100"/>

                    <Image Height="100" Source="Images/Splash.jpg" Stretch="Fill" Width="100"/>

                    <Image Height="100" Source="Images/Splash.jpg" Stretch="Fill" Width="100"/>

                    <Image Height="100" Source="Images/Splash.jpg" Stretch="Fill" Width="100"/>

                </StackPanel>

            </ScrollViewer>

        </StackPanel>

    </UserControl>



    this is the XAML code to by which you can view verticalscroll....

    Regards,
    Parth
    Friday, September 10, 2010 12:54 AM
  • Hello Marie,

    that's because you put your ScrollViewer in a StackPanel and the StackPanel grows depending on its content. Replace the StackPanel with a Grid to make it work.

    Take a look there: http://stackoverflow.com/questions/802821/how-can-i-get-scrollviewer-to-work-inside-a-stackpanel

    Patrick

    Friday, September 10, 2010 1:00 AM
  • Hi Parth,

    I don't want to fix the height at the end (I was using a hard value only in Blend design-time)  Ideally I want this control to grow and adjust according to where it will be contained/sized.  Consider the following xaml which is essentially identical to the one posted except the layout is horizontal instead of vertical.  I certainly did not fix the width of scrollviewer yet its scrollbar paints according its container a SP which in turn inherits the UserControl now temporarily set to 250.  Why do we have inconsistent layout behaviors?


    <UserControl x:Class="MS.TNViewer1"
        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"
        mc:Ignorable="d"
        d:DesignHeight="125" Width="250">
    
      
        <StackPanel
                        x:Name="TNViewer"
                        Orientation="Vertical"
                        MouseMove="TNViewer_MouseMove"
                        MouseLeave="TNViewer_MouseLeave"
                        Background="Pink" MinHeight="100">
    
            
            <ScrollViewer x:Name="TNScroller"
                                  Padding="0"
                                  BorderThickness="0"
                                  HorizontalScrollBarVisibility="Auto" 
    							  VerticalScrollBarVisibility="Hidden" 
    							  HorizontalAlignment="Left" 
    							  VerticalAlignment="Top"                               
                                  >
                <StackPanel x:Name="ImagesList" Orientation="Horizontal" 
                            HorizontalAlignment="Center" VerticalAlignment="Center">
                	<Image Height="100" Source="/RC/UPS128.png" Stretch="Fill" Width="100"/>
                	<Image Height="100" Source="/RC/UPS128.png" Stretch="Fill" Width="100"/>
                	<Image Height="100" Source="/RC/UPS128.png" Stretch="Fill" Width="100"/>
                	<Image Height="100" Source="/RC/UPS128.png" Stretch="Fill" Width="100"/>
                </StackPanel>
            </ScrollViewer>
        </StackPanel>
        
    </UserControl>



    Hi Patrick,

    can you explain why the outer stackpanel does not grow depending on its content when the layout is horizontal?  In blend it shows Width as Auto (250) whereas in the vertical version (base post) it shows Height as Auto (400)

    Paste the above xaml into Blend4 (perhaps same in Blend3) and check it out (compare both layouts rendering, I could post a picture but this forum expects some URL for images ;-).

    I am quite puzzled, I like the behavior of the horizontal layout perhaps that's the buggy one?  I am becoming confused as to who should follow which dimension :)

    Thanks

    Friday, September 10, 2010 2:56 AM
  • can you explain why the outer stackpanel does not grow depending on its content when the layout is horizontal?

    Hi Marie,

    it seems that it's a bug in the implementation of the StackPanel.

    Patrick

    Friday, September 10, 2010 3:32 AM
  • <UserControl x:Class="MS.TNViewerVertical2"
        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"
        mc:Ignorable="d"
         d:DesignWidth="125" Height="250">
    
        <StackPanel
                        x:Name="TNViewer"
                        Orientation="Vertical"
    					MouseMove="TNViewer_MouseMove"
                        MouseLeave="TNViewer_MouseLeave"
                        Background="Pink" MinHeight="100" Height="{Binding Height, ElementName=userControl}">
    
    
            <ScrollViewer x:Name="TNScroller"
                                  Padding="0"
                                  BorderThickness="0"
                                  HorizontalScrollBarVisibility="Hidden" 
                                                              VerticalScrollBarVisibility="Auto" 
                                                              HorizontalAlignment="Left" 
                                                              VerticalAlignment="Top" Height="{Binding Height, ElementName=TNViewer}"                                                                                      
                                  >
                <StackPanel x:Name="ImagesList" Orientation="Vertical" 
                            HorizontalAlignment="Center" VerticalAlignment="Top">
                    <Image Height="100" Source="Images/Splash.jpg" Stretch="Fill" Width="100"/>
                    <Image Height="100" Source="Images/Splash.jpg" Stretch="Fill" Width="100"/>
                    <Image Height="100" Source="Images/Splash.jpg" Stretch="Fill" Width="100"/>
                    <Image Height="100" Source="Images/Splash.jpg" Stretch="Fill" Width="100"/>
                </StackPanel>
            </ScrollViewer>
        </StackPanel>
    </UserControl>
    



    <UserControl x:Class="MS.TNViewerVertical2"
        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"
        mc:Ignorable="d"
         d:DesignWidth="125" Height="250">
        <StackPanel
                        x:Name="TNViewer"
                        Orientation="Vertical"
    MouseMove="TNViewer_MouseMove"
                        MouseLeave="TNViewer_MouseLeave"
                        Background="Pink" MinHeight="100" Height="{Binding Height, ElementName=userControl}">
            <ScrollViewer x:Name="TNScroller"
                                  Padding="0"
                                  BorderThickness="0"
                                  HorizontalScrollBarVisibility="Hidden" 
                                                              VerticalScrollBarVisibility="Auto" 
                                                              HorizontalAlignment="Left" 
                                                              VerticalAlignment="Top" Height="{Binding Height, ElementName=TNViewer}"                                                                                      
                                  >
                <StackPanel x:Name="ImagesList" Orientation="Vertical" 
                            HorizontalAlignment="Center" VerticalAlignment="Top">
                    <Image Height="100" Source="Images/Splash.jpg" Stretch="Fill" Width="100"/>
                    <Image Height="100" Source="Images/Splash.jpg" Stretch="Fill" Width="100"/>
                    <Image Height="100" Source="Images/Splash.jpg" Stretch="Fill" Width="100"/>
                    <Image Height="100" Source="Images/Splash.jpg" Stretch="Fill" Width="100"/>
                </StackPanel>
            </ScrollViewer>
        </StackPanel>
    </UserControl>

    Hello Marie


    If you don't want to fix the height of the scrollviewer than you can do one thing you can bind your TNViewer's height to the UserControl's height.

    Than you can bind your TNScroller's height to the height of the TNViewer's height.By doing this you can achieve what you want.

    and while using your usercontrol in main page assign the what ever height you want to that usercontrol.

    I think it will work try it out ...




    if it helps you don't forgot to mark as answer .... :D

    Regards

    Parth Pandya


    Friday, September 10, 2010 4:27 AM