How to remove blank space from marquee list’s first item and last item?

Question

Hi all,

I am using horizontal list view in marquee list. Which is keep moving from right to left.

My code is :

        double height = canMain.ActualHeight - marqueeList.ActualHeight;
        marqueeList.Margin = new Thickness(0, 0, 0, 0);
        doubleAnimation.From = -marqueeList.ActualWidth;
        doubleAnimation.To = canMain.ActualWidth;
        doubleAnimation.RepeatBehavior = RepeatBehavior.Forever;
        doubleAnimation.Duration = new Duration(TimeSpan.FromSeconds(_marqueeTimeInSeconds));
        Storyboard.SetTargetProperty(doubleAnimation, new PropertyPath("(Canvas.Right)"));
        _storyBoard.Children.Add(doubleAnimation);
        _storyBoard.Begin(marqueeList, true)

But once it move completely there is blank space come until again the first item is not come. I want to remove the blank space between first items to last item.(Like circullar)

Please help me on this…its urgent!!!

Answer 1

If your ListView items don't need mouse or keyboard interaction you can just put a Rectangle with a visual brush to the right of it:

<DockPanel Name="marqueeListTwice">
  <ListView Name="marqueeList" .../>
  <Rectangle Height="{Binding RenderHeight,ElementName=marqueeList}"
               Width="{Binding RenderWidth,ElementName=marqueeList}">
    <Rectangle.Fill>
      <VisualBrush Visual="{Binding ElementName=marqueeList}" />
    </Rectangle.Fill>
  </Rectangle>
</DockPanel>

This DockPanel will now appear to have two side-by-side copies of the ListView: The one on the left is the real one, and the one on the right is a Rectangle painted with a picture of it. The VisualBrush painting mechanism is "perfect" in the sense that you cannot tell the painted copy from the real thing.

Now you can animate the "marqueeListTwice" control across your canvas for a distance of marqueeList.ActualWidth. When you get to the end you will appear to be looking at the first item but you will actually be looking at the image of it painted on the rectangle. When you move back to 0, the "real" first item will be visible again but since it is visually identical you won't get so much as a flicker.

If you need individual items to interact with the mouse during the pan, this solution won't work because the painted rectangle won't respond as expected: You'll need logic to slide individual items around instead of sliding a ListView containing all of them. You can still use an animation to do it: Just animate a property of your container Window or UserControl, and use that to calculate your item positioning.