Scrolling stackpanel width listbox/databinding

3 replies. Latest Post by Mog Liang - MSFT on November 2, 2009.

(0)

Member

1 points

Scrolling stackpanel width listbox/databinding

10-27-2009 3:53 AM |

Hi there, i have an problem with the double animation. i would that the listbox goes scroll,
but if i do this going al the text layer on top of each other with as result that the messages
are not readable. i know that you must set an static proportions on the listbox but it doesn't work.

<ListBox x:Name="RSSFeedListbox" HorizontalAlignment="Stretch" Height="24" ScrollViewer.HorizontalScrollBarVisibility="Disabled" ScrollViewer.VerticalScrollBarVisibility="Disabled" VerticalAlignment="Bottom" BorderThickness="0" Foreground="White" Margin="-8,0,8,26" FontSize="14.667" FontWeight="Bold" FontFamily="Calibri">
            	<ListBox.Background>
            		<ImageBrush ImageSource="ticker.png"/>
            	</ListBox.Background>          
            <ListBox.ItemsPanel>
                <ItemsPanelTemplate>
                    <StackPanel Orientation="Horizontal" />
                </ItemsPanelTemplate>
            </ListBox.ItemsPanel>
            <ListBox.ItemTemplate >
                <DataTemplate>
                    <StackPanel Orientation="Horizontal" VerticalAlignment="Top">
                        <Canvas xmlns="http://schemas.microsoft.com/client/2007"   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
                            <Canvas.Triggers>
                                <EventTrigger RoutedEvent="Canvas.Loaded" >
                                    <BeginStoryboard>
                                        <Storyboard x:Name="Ticker" Storyboard.TargetProperty="(Canvas.Left)" RepeatBehavior="Forever" >
                                            <DoubleAnimation Storyboard.TargetName="_Ticker" From="300" To="-875" Duration="0:0:15"  />                                       
                                        </Storyboard>
                                    </BeginStoryboard>
                                </EventTrigger>
                            </Canvas.Triggers>
                                  <TextBlock x:Name="_Ticker" Text="{Binding Title}"/>                          
                           </Canvas>
                    </StackPanel>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>

I hope that you can solve my problem Wink

Mog Lian...

All-Star

15962 points

1,552 Posts

Re: Scrolling stackpanel width listbox/databinding

11-02-2009 3:50 AM |

Hi,

You could get listbox's inner scrollviewer from its template, then use dispatchertimer to scroll it continuously.

Thanks,

Mog Liang
Microsoft Online Community Support

Please remember to mark the replies as answers if they help and unmark them if they provide no help.

eratek

Member

1 points

2 Posts

Re: Scrolling stackpanel width listbox/databinding

11-02-2009 4:24 AM |

Hi,

do you have any xamples ?

that would by great. i am just learning silverlight for an school project.

Thanks.

Mog Lian...

All-Star

15962 points

1,552 Posts

Re: Scrolling stackpanel width listbox/databinding

11-02-2009 5:24 AM |

Hi,

First copy the listbox default template, then find inner scrollviewer, register loaded event. after scrollviewer fetched, use timer to change offset. sample code:

xaml

	<UserControl.Resources>
		<ControlTemplate x:Key="ValidationToolTipTemplate">
			<Grid x:Name="Root" Margin="5,0" Opacity="0" RenderTransformOrigin="0,0">
				<VisualStateManager.VisualStateGroups>
					<VisualStateGroup x:Name="OpenStates">
						<VisualStateGroup.Transitions>
							<VisualTransition GeneratedDuration="0"/>
							<VisualTransition GeneratedDuration="0:0:0.2" To="Open">
								<Storyboard>
									<DoubleAnimationUsingKeyFrames Storyboard.TargetName="xform" Storyboard.TargetProperty="X">
										<SplineDoubleKeyFrame KeyTime="0:0:0.2" Value="0"/>
									</DoubleAnimationUsingKeyFrames>
									<DoubleAnimationUsingKeyFrames Storyboard.TargetName="Root" Storyboard.TargetProperty="Opacity">
										<SplineDoubleKeyFrame KeyTime="0:0:0.2" Value="1"/>
									</DoubleAnimationUsingKeyFrames>
								</Storyboard>
							</VisualTransition>
						</VisualStateGroup.Transitions>
						<VisualState x:Name="Closed">
							<Storyboard>
								<DoubleAnimationUsingKeyFrames Storyboard.TargetName="Root" Storyboard.TargetProperty="Opacity">
									<SplineDoubleKeyFrame KeyTime="0" Value="0"/>
								</DoubleAnimationUsingKeyFrames>
							</Storyboard>
						</VisualState>
						<VisualState x:Name="Open">
							<Storyboard>
								<DoubleAnimationUsingKeyFrames Storyboard.TargetName="xform" Storyboard.TargetProperty="X">
									<SplineDoubleKeyFrame KeyTime="0" Value="0"/>
								</DoubleAnimationUsingKeyFrames>
								<DoubleAnimationUsingKeyFrames Storyboard.TargetName="Root" Storyboard.TargetProperty="Opacity">
									<SplineDoubleKeyFrame KeyTime="0" Value="1"/>
								</DoubleAnimationUsingKeyFrames>
							</Storyboard>
						</VisualState>
					</VisualStateGroup>
				</VisualStateManager.VisualStateGroups>
				<Grid.RenderTransform>
					<TranslateTransform x:Name="xform" X="-25"/>
				</Grid.RenderTransform>
				<Border Margin="4,4,-4,-4" Background="#052A2E31" CornerRadius="5"/>
				<Border Margin="3,3,-3,-3" Background="#152A2E31" CornerRadius="4"/>
				<Border Margin="2,2,-2,-2" Background="#252A2E31" CornerRadius="3"/>
				<Border Margin="1,1,-1,-1" Background="#352A2E31" CornerRadius="2"/>
				<Border Background="#FFDC000C" CornerRadius="2"/>
				<Border CornerRadius="2">
					<TextBlock Margin="8,4,8,4" MaxWidth="250" UseLayoutRounding="false" Foreground="White" Text="{Binding (Validation.Errors)[0].ErrorContent}" TextWrapping="Wrap"/>
				</Border>
			</Grid>
		</ControlTemplate>
		<Style x:Key="ListBoxStyle1" TargetType="ListBox">
			<Setter Property="Padding" Value="1"/>
			<Setter Property="Background" Value="#FFFFFFFF"/>
			<Setter Property="Foreground" Value="#FF000000"/>
			<Setter Property="HorizontalContentAlignment" Value="Left"/>
			<Setter Property="VerticalContentAlignment" Value="Top"/>
			<Setter Property="IsTabStop" Value="False"/>
			<Setter Property="BorderThickness" Value="1"/>
			<Setter Property="TabNavigation" Value="Once"/>
			<Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto"/>
			<Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto"/>
			<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="ListBox">
						<Grid>
							<VisualStateManager.VisualStateGroups>
								<VisualStateGroup x:Name="ValidationStates">
									<VisualState x:Name="Valid"/>
									<VisualState x:Name="InvalidUnfocused">
										<Storyboard>
											<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ValidationErrorElement" Storyboard.TargetProperty="Visibility">
												<DiscreteObjectKeyFrame KeyTime="0">
													<DiscreteObjectKeyFrame.Value>
														<Visibility>Visible</Visibility>
													</DiscreteObjectKeyFrame.Value>
												</DiscreteObjectKeyFrame>
											</ObjectAnimationUsingKeyFrames>
										</Storyboard>
									</VisualState>
									<VisualState x:Name="InvalidFocused">
										<Storyboard>
											<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ValidationErrorElement" Storyboard.TargetProperty="Visibility">
												<DiscreteObjectKeyFrame KeyTime="0">
													<DiscreteObjectKeyFrame.Value>
														<Visibility>Visible</Visibility>
													</DiscreteObjectKeyFrame.Value>
												</DiscreteObjectKeyFrame>
											</ObjectAnimationUsingKeyFrames>
											<ObjectAnimationUsingKeyFrames Storyboard.TargetName="validationTooltip" Storyboard.TargetProperty="IsOpen">
												<DiscreteObjectKeyFrame KeyTime="0">
													<DiscreteObjectKeyFrame.Value>
														<System:Boolean>True</System:Boolean>
													</DiscreteObjectKeyFrame.Value>
												</DiscreteObjectKeyFrame>
											</ObjectAnimationUsingKeyFrames>
										</Storyboard>
									</VisualState>
								</VisualStateGroup>
							</VisualStateManager.VisualStateGroups>
							<Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="2">
								<ScrollViewer x:Name="ScrollViewer" Background="{TemplateBinding Background}" BorderBrush="Transparent" BorderThickness="0" Padding="{TemplateBinding Padding}" TabNavigation="{TemplateBinding TabNavigation}" Loaded="ScrollViewer_Loaded">
									<ItemsPresenter/>
								</ScrollViewer>
							</Border>
							<Border x:Name="ValidationErrorElement" Visibility="Collapsed" BorderBrush="#FFDB000C" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="2">
								<ToolTipService.ToolTip>
									<ToolTip x:Name="validationTooltip" DataContext="{Binding RelativeSource={RelativeSource TemplatedParent}}" Template="{StaticResource ValidationToolTipTemplate}" Placement="Right" PlacementTarget="{Binding RelativeSource={RelativeSource TemplatedParent}}">
										<ToolTip.Triggers>
											<EventTrigger RoutedEvent="Canvas.Loaded">
												<BeginStoryboard>
													<Storyboard>
														<ObjectAnimationUsingKeyFrames Storyboard.TargetName="validationTooltip" Storyboard.TargetProperty="IsHitTestVisible">
															<DiscreteObjectKeyFrame KeyTime="0">
																<DiscreteObjectKeyFrame.Value>
																	<System:Boolean>true</System:Boolean>
																</DiscreteObjectKeyFrame.Value>
															</DiscreteObjectKeyFrame>
														</ObjectAnimationUsingKeyFrames>
													</Storyboard>
												</BeginStoryboard>
											</EventTrigger>
										</ToolTip.Triggers>
									</ToolTip>
								</ToolTipService.ToolTip>
								<Grid Height="10" HorizontalAlignment="Right" Margin="0,-4,-4,0" VerticalAlignment="Top" Width="10" Background="Transparent">
									<Path Fill="#FFDC000C" Margin="-1,3,0,0" Data="M 1,0 L6,0 A 2,2 90 0 1 8,2 L8,7 z"/>
									<Path Fill="#ffffff" Margin="-1,3,0,0" Data="M 0,0 L2,0 L 8,6 L8,8"/>
								</Grid>
							</Border>
						</Grid>
					</ControlTemplate>
				</Setter.Value>
			</Setter>
		</Style>
	</UserControl.Resources>

	<Grid x:Name="LayoutRoot" Background="White">
		<ListBox Height="118" Margin="84,113,317,0" ItemsSource="abcdefghijkmlnopqrstuvwxy" Style="{StaticResource ListBoxStyle1}" VerticalAlignment="Top"/>
	</Grid>
</UserControl>

code

	public partial class MainPage : UserControl
	{
		public MainPage()
		{
			// Required to initialize variables
			InitializeComponent();
		}

		ScrollViewer _scrollviewer;
		private void ScrollViewer_Loaded(object sender, System.Windows.RoutedEventArgs e)
		{
            _scrollviewer = sender as ScrollViewer;
            Scroll();
		}

        public void Scroll()
        {
            DispatcherTimer timer = new DispatcherTimer();
            timer.Interval = TimeSpan.FromSeconds(.1);
            timer.Tick += new EventHandler(timer_Tick);
            timer.Start();
        }

        void timer_Tick(object sender, EventArgs e)
        {
            double offsety =_scrollviewer.VerticalOffset;
            if (offsety < _scrollviewer.ScrollableHeight)
                offsety += 1;
            _scrollviewer.ScrollToVerticalOffset(offsety);
        }
	}