Adding scrollbar to stack panel in silverlight

The first time I used stack panel in silvelight, I didn’t knew unlike asp.net container controls silverlight controls do not have auto scrollbars on overflow. With much effort I learned that scroll viewer controls are used to provide scroll in silverlight container controls.

This is the xaml style that would be applied on the scrollviewer control to provide with horizontal and vertical scrollbars, It would be your choice to use as per need.

<Style x:Name="myScrollViewerStyle" TargetType="ScrollViewer">
  <Setter Property="HorizontalContentAlignment" Value="Left" />
  <Setter Property="VerticalContentAlignment" Value="Top" />
  <Setter Property="VerticalScrollBarVisibility" Value="Visible" />
  <Setter Property="Padding" Value="4" />
  <Setter Property="BorderThickness" Value="1" />
  <Setter Property="BorderBrush">
    <Setter.Value>
      <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
        <GradientStop Color="#FFA3AEB9" Offset="0" />
        <GradientStop Color="#FF8399A9" Offset="0.375" />
        <GradientStop Color="#FF718597" Offset="0.375" />
        <GradientStop Color="#FF617584" Offset="1" />
      </LinearGradientBrush>
    </Setter.Value>
  </Setter>
  <Setter Property="Template">
    <Setter.Value>
      <ControlTemplate TargetType="ScrollViewer">
        <Border CornerRadius="2"
                BorderBrush="{TemplateBinding BorderBrush}"
                BorderThickness="{TemplateBinding BorderThickness}">
          <Grid Background="{TemplateBinding Background}">
            <Grid.RowDefinitions>
              <RowDefinition Height="*"/>
              <RowDefinition Height="Auto"/>
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
              <ColumnDefinition Width="*"/>
              <ColumnDefinition Width="Auto"/>
            </Grid.ColumnDefinitions>
            <ScrollContentPresenter x:Name="ScrollContentPresenter"
            Cursor="{TemplateBinding Cursor}"
            Margin="{TemplateBinding Padding}"
            ContentTemplate="{TemplateBinding ContentTemplate}"/>
            <Rectangle Grid.Column="1" Grid.Row="1" Fill="#FFE9EEF4" />
            <ScrollBar x:Name="VerticalScrollBar" Width="15?" IsTabStop="False"
            Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}"
            Grid.Column="1" Grid.Row="0" Orientation="Vertical"
            ViewportSize="{TemplateBinding ViewportHeight}"
            Maximum="{TemplateBinding ScrollableHeight}"
            Minimum="0" Value="{TemplateBinding VerticalOffset}"
            Margin="0,-1,-1,-1" ValueChanged="VerticalScrollBar_ValueChanged" />
            <ScrollBar x:Name="HorizontalScrollBar" Height="15" IsTabStop="False"
            Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}"
            Grid.Column="0" Grid.Row="1" Orientation="Horizontal"
            ViewportSize="{TemplateBinding ViewportWidth}"
            Maximum="{TemplateBinding ScrollableWidth}"
            Minimum="0" Value="{TemplateBinding HorizontalOffset}"
            Margin="0,-1,-1,-1" ValueChanged="HorizontalScrollBar_ValueChanged" />
          </Grid>
        </Border>
      </ControlTemplate>
    </Setter.Value>
  </Setter>
</Style>

This is the scrollviewer control code inside which stack panel resides

<ScrollViewer x:Name="myScrollviewer"
              Height="350"
              Width="411"
              Grid.Column="1"
              Grid.Row="1"
              Style="{StaticResource myScrollViewerStyle}"
              HorizontalScrollBarVisibility="Disabled"
              Opacity="0.495"
              VerticalScrollBarVisibility="Auto"
              BorderThickness="0,0,0,0"
              Visibility="Collapsed"
              d:IsHidden="True"
              Background="#FFFFFFFF"
              Margin="0,3,0,0">
  <StackPanel x:Name="resultStack"
              Width="405"
              Visibility="Visible"
              Canvas.ZIndex="1"
              Background="{x:Null}"
              OpacityMask="#FF000000"
              HorizontalAlignment="Stretch"
              ScrollViewer.VerticalScrollBarVisibility="Visible"
              Opacity="1"
              MinHeight="10"
              Margin="0,5,0,0" />
</ScrollViewer>

 

Event handlers to scrollviewer’s value changed events

void HorizontalScrollBar_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)
{
    myScrollviewer.ScrollToHorizontalOffset(e.NewValue);
}

void VerticalScrollBar_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)
{
    ScrollViewer myScroll = scrollSender as ScrollViewer;
    if (myScroll != null)
    {
        myScroll.ScrollToVerticalOffset(e.NewValue);
    }
}
Advertisements

About Utkarsh Puranik

Software Engineer by Profession, Gamer by Nature, Techy by Attitude and a Good Person at Heart
This entry was posted in Technology and tagged , , , , . Bookmark the permalink.

2 Responses to Adding scrollbar to stack panel in silverlight

  1. Pingback: Mouse Wheel Scroll in Silverlight 2.0 « Utkarsh Puranik's Blog

  2. Mark says:

    When i use this code, none of the datagrids within the scrollviewer/stackpanel parent combo show up when debugging. It’s like their hidden or washed out, behind the stackpanel. Not sure what the deal is…any suggestions?

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s