Ghost1372

everything can be handy

LoopPanel

An infinitely scrolling panel.

Property

Name
Spacing
MouseWheelScrollFactor
DragScrollFactor
IsInertiaEnabled
BringChildrenIntoView
Offset
Orientation
RelativeOffset

Methods

Name
Scroll

Example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<ItemsControl x:Name="loopingList"
                Height="200"
                ItemsSource="{x:Bind Items, Mode=OneWay}">
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <dev:LoopPanel x:Name="LoopPanelSample"/>
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>

    <ItemsControl.ItemTemplate>
        <DataTemplate x:DataType="views:LoopPanelItem">
            <Border Margin="10,10,0,0"
                    Padding="5"
                    Background="Purple"
                    BorderBrush="{ThemeResource CardStrokeColorDefaultBrush}"
                    BorderThickness="1">
                <Image Source="{x:Bind ImageSource}"
                        Stretch="Uniform">

                </Image>
            </Border>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
public ObservableCollection<LoopPanelItem> Items = new ObservableCollection<LoopPanelItem>()
{
    new LoopPanelItem() {Title="Item 1", ImageSource = "ms-appx:///Assets/BannerView/1.jpeg"},
    new LoopPanelItem() {Title="Item 2", ImageSource = "ms-appx:///Assets/BannerView/2.png"},
    new LoopPanelItem() {Title="Item 3", ImageSource = "ms-appx:///Assets/BannerView/3.jpeg"},
    new LoopPanelItem() {Title="Item 4", ImageSource = "ms-appx:///Assets/BannerView/4.jpeg"},
    new LoopPanelItem() {Title="Item 5", ImageSource = "ms-appx:///Assets/BannerView/5.jpeg"},
    new LoopPanelItem() {Title="Item 6", ImageSource = "ms-appx:///Assets/BannerView/6.png"},
    new LoopPanelItem() {Title="Item 7", ImageSource = "ms-appx:///Assets/BannerView/7.jpeg"},
    new LoopPanelItem() {Title="Item 8", ImageSource = "ms-appx:///Assets/BannerView/8.jpeg"},
    new LoopPanelItem() {Title="Item 9", ImageSource = "ms-appx:///Assets/BannerView/9.jpeg"},
};
public partial class LoopPanelItem
{
    public string ImageSource { get; set; }
    public string Title { get; set; }
}

LoopPanel

Demo

you can run demo and see this feature.

0%