Silverlight Vertical and Horizontal Scroller
This free Scroller control allows Silverlight 2 content be scrolled automatically and also through user control via the mouse.
This Silverlight only Scroller Control is easy to implement on your Silverlight driven website and is also customizable to provide a visual feel suitable for any site design.
To use the Scroller control you will need to add a reference to Liquid.dll in your project.
You need to login to Download the Scroller example, If you do not have a login you can register for free!
How to Use the Scroller Control
To use the Scroller on your Silverlight page:
<UserControl x:Class="Scroller.Page"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:liquid="clr-namespace:Liquid;assembly=Liquid"
xmlns:liquidRichText="clr-namespace:Liquid;assembly=Liquid.RichText"
Width="400" Height="300">
<Grid x:Name="LayoutRoot" Background="White">
<Grid.RowDefinitions>
<RowDefinition Height="45" />
<RowDefinition Height="60" />
</Grid.RowDefinitions>
<Border Grid.Row="0" BorderThickness="1" BorderBrush="#aaaaaa" CornerRadius="4" Margin="4">
<Border.Background>
<LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
<GradientStop Color="#e0e0e0" Offset="0.0" />
<GradientStop Color="#f8f8f8" Offset="0.5" />
<GradientStop Color="#efefef" Offset="1.0" />
</LinearGradientBrush>
</Border.Background>
<liquid:Scroller Direction="-1,0">
<liquidRichText:TextBlockPlus FontSize="25" Shadow="Normal" Text="This is a horizontal scroller, but it doesn't have to scroll from right-to-left. By specifying the Direction property you can scroll content in any direction!" />
</liquid:Scroller>
</Border>
<Border Grid.Row="1" BorderThickness="1" BorderBrush="#aaaaaa" CornerRadius="4" Margin="4">
<Border.Background>
<LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
<GradientStop Color="#e0e0e0" Offset="0.0" />
<GradientStop Color="#f8f8f8" Offset="0.5" />
<GradientStop Color="#efefef" Offset="1.0" />
</LinearGradientBrush>
</Border.Background>
<liquid:Scroller Direction="1,0" EnableUserControl="True">
<liquidRichText:TextBlockPlus FontSize="35" Foreground="Red" Shadow="Normal" Text="You can also allow the user to interact with the scrolling with the mouse. Click and drag the content to affect the scrolling!" />
</liquid:Scroller>
</Border>
</Grid>
</UserControl>
Here we have two scrollers, both scrolling a TextBlock Plus. In reality you can specify anything as content, so you could scroll and image or even a Rich Text document. The top scroller is a non-interactive right-to-left scroller, the lower one is a left-to-right scroller and you can interact with the scrolling using the mouse.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
namespace Scroller
{
public partial class Page : UserControl
{
public Page()
{
InitializeComponent();
}
}
}
The Direction property controls how fast and in what direction the content is scrolled and the EnableUserControl property determines whether the user can interact with the scrolling.
Example Silverlight Scroller Control:
Latest Forum Posts
Here are latest posts from around the forums, if you have a question about any of the Liquid controls you can get your answers in the Forum.