#885 – Wrapping a Grid in a ScrollViewer

August 15, 2013 2 Comments

Because the ScrollViewer control is a ContentControl, it can contain any single element.  It most often contains a single Panel, which in turn contains child elements.

Below is an example of a ScrollViewer that contains a Grid, which in turn contains a number of different elements.

    <ScrollViewer Margin="5" CanContentScroll="False"
                  HorizontalScrollBarVisibility="Auto">
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition/>
            </Grid.ColumnDefinitions>

            <Image Source="Augustus.jpg" Height="100" Margin="10"/>
            <Label Grid.Column="1" Content="Augustus - 63BC - 14AD" />

            <Image Grid.Column="2" Source="Tiberius.jpg" Height="100" Margin="10"/>
            <Label Grid.Column="3" Content="Tiberius - 42BC - 37AD"/>

            <Button Grid.Row="1" Content="Learn"
                    HorizontalAlignment="Center" VerticalAlignment="Center"
                    Padding="10,5"/>
            <Button Grid.Row="1" Grid.Column="2" Content="Learn"
                    HorizontalAlignment="Center" VerticalAlignment="Center"
                    Padding="10,5"/>
        </Grid>
    </ScrollViewer>

885-001
885-002

Advertisement

Filed under Controls Tagged with , , ,

#884 – Making a StackPanel Scroll More Intelligently

August 14, 2013 Leave a comment

By default, when you place content in a ScrollViewer, the ScrollViewer itself decides how far to scroll the content each time that you click on the arrows included with the scrollbar (or use the arrow keys).

For example, we can place a vertical StackPanel within a ScrollViewer, where each element in the StackPanel is itself a panel containing an image and some text.  Each time we click on an arrow widget to scroll down by one increment, the content slides down a little bit.

884-001
884-002
However, we can tell the ScrollViewer that the StackPanel knows how to scroll itself by setting the ScrollViewer.CanContentScroll property to true.  The StackPanel now scrolls down one element a time when we click on the arrows.  That is, it scrolls down to the next child element, which in this case is the next image/text combination.

884-003

884-004

 

Filed under Controls Tagged with , , ,

#883 – ScrollViewer Is a ContentControl

August 13, 2013 Leave a comment

Because a ScrollViewer is a ContentControl, it can contain exactly one child element.  The size of the child element is typically larger than the actual size of the ScrollViewer.  You then use the scrollbars in the ScrollViewer to scroll the larger child element within the smaller view.

As a ContentControl, a ScrollViewer will typically contain a Panel control, which in turn can contain a number of different children.  However, the ScrollViewer might also just contain a single child control that is not a panel.

In the example below, the ScrollViewer contains a single Image that can then be scrolled within the parent window.

    <ScrollViewer HorizontalScrollBarVisibility="Auto"
                  VerticalScrollBarVisibility="Auto">
        <Image Source="Augustus.jpg"/>
    </ScrollViewer>

883-001

Filed under Controls Tagged with , ,

#565 – Workaround for Inability to Scroll ScrollViewer in Design Mode in Blend

May 24, 2012 1 Comment

When you’re working in Blend and have some scrollable content in a ScrollViewer, you won’t be able to see all of the content at design time because Blend doesn’t let you scroll the ScrollViewer.

This can be frustrating, since you want to see your content at design time.  In the example above, I have a series of Image controls in a vertical StackPanel, but I can only see the first couple.

The trick to working around this limitation is to put your content into a UserControl and then put that UserControl into the ScrollViewer.  You can then scroll the contents of the UserControl on the artboard.

Create a UserControl.

Move your content into the new UserControl.

Remove design-time width and height.

Go back to the window that contains your ScrollViewer.  Find the UserControl in the Assets panel and drag it into the ScrollViewer.

You can now scroll at design time.

Filed under Blend Tagged with , , ,

#389 – Wrap a Panel in A ScrollViewer to Provide Scrolling Support

September 19, 2011 5 Comments

The layout containers in WPF do not automatically provide scrolling support.  To scroll the content in a container, however, you can wrap it in a ScrollViewer control.

    <ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto">
        <StackPanel Orientation="Vertical" >
            <Label Content="I am happy to join with you today in what will go down in history as the greatest demonstration for freedom in the history of our nation." />
            <Label Content="Some famous speeches:"/>
            <Label Content="I Have a Dream. --MLK" />
            <Label Content="Inaugural Address --JFK"/>
            <Label Content="First Inaugural --FDR"/>
            <Label Content="Pearl Harbor Address --FDR"/>
            <Label Content="1976 DNC Keynote --Barbara Jordan"/>
        </StackPanel>
    </ScrollViewer>



Notice that we’ve set the visibility of both scrollbars to Auto. By default, though, the horizontal scrollbar is disabled and the vertical scrollbar is visible.

You can set the HorizontalScrollbarVisibility and VerticalScrollbarVisibility properties to one of the following: Disabled, Visible, Auto or Hidden.

Filed under Layout Tagged with , , ,

Newer posts →