locked
ScrollBar help RRS feed

  • Question

  • I need help with understanding how to create basic functionality for a scrollbar.  It sounds simple but it seems that all the tutorials out there simply describe how to customize the appearance of scrollbars, and not how to actually link them to a page.

    I basically just have a .PSD file that I've imported in Blend as my main page, and for some reason when I build the page in my browser (Firefox) I can't access the content that overflows vertically.  Basically, there's no way to scroll down to see the rest of my page, which is a question in itself as to why the browser won't automatically create a scrollbar so that I can scroll down (can anyone answer this too?).

    Anyway, I want to be able to create a scrollbar on my page (which I know how to do - I just dump it into my layout root), but most importantly, I need to know how to connect that scrollbar to my main canvas, so that scrolling up and down on the scrollbar will make my page scroll up and down.

    Again, I know it sounds simple, I just haven't found a straight answer on how to do it.  I just need to know how to link the scrollbar to the rest of my page.

    Can anyone help?
    Tuesday, November 10, 2009 5:03 PM

All replies

  • Can you post a link to your solution files?  I'm trying to figure out what you're describing, and it sounds like you just want a really big canvas, but have scrollbars on the screen so you can pan around, as it doesn't fit on the screen all at once?
    Wednesday, November 18, 2009 5:39 AM
  • I am running into this same issue. Can you offer some guidance?
    Monday, May 7, 2012 5:56 PM
  • Hello Mike.

    The following is an example of binding to the value of a scrollBar.

    I did it in WPF, but works the same for Silverlight.

    	<Grid x:Name="LayoutRoot">
    		<ScrollBar x:Name="scrollBar" HorizontalAlignment="Right" Height="100" VerticalAlignment="Top" d:LayoutOverrides="Width" Margin="0,8,8,0" SmallChange="1" Maximum="100"/>
    		<Rectangle Fill="Blue" HorizontalAlignment="Left" Height="20" Stroke="Black" VerticalAlignment="Top" Width="20" Margin="8,8,0,0" RenderTransformOrigin="0.5,0.5">
    			<Rectangle.RenderTransform>
    				<TransformGroup>
    					<ScaleTransform/>
    					<SkewTransform/>
    					<RotateTransform/>
    					<TranslateTransform X="{Binding Value, ElementName=scrollBar}"/>
    				</TransformGroup>
    			</Rectangle.RenderTransform>
    		</Rectangle>
    	</Grid>

    As easy as it is to bind to the value, I believe most would use a ScrollViewer as a container.  It makes life pretty simple.

    ~Christine


    My Gallery

    • Proposed as answer by Mike7seven Thursday, May 10, 2012 12:01 PM
    Monday, May 7, 2012 6:42 PM
  • Ya like Christine said, just wrap it in a scrollviewer

    <ScrollViewer>

      <YourStuff>

    </ScrollViewer>


    Check out the Gooroovster Windows Phone App! Also, please mark answers as helpful when used, and answered when completed.

    Monday, May 7, 2012 7:27 PM